[新手開發記錄] 規劃網站目標

Affren發表於2020-05-20
網站
系列文章：
[新手開發記錄] 規劃網站目標 [新手開發記錄] 新建一個網站

我準備開發一個名校公開課的資料下載和討論版，功能就是站長髮布資訊和資料下載連結，使用者可以在下面討論，並且可以生成各種平臺的分享方式分享出去。這一系列文章就記錄這一過程。當然博文功能也是必不可少的。

樣式

css 框架用什麼呢？以前我一直使用 bootstrap，主要是熟悉了。這次想試試新的框架，比如 bulma 。
還有看到 laracasts 視訊教程 Laravel From Scratch（[完結] Laravel 6 實戰 - 寫一個 Twitter - [Laracasts 免費視訊中文語音]） 中實戰案例採用了 TailwindCSS，它和上述兩者略有不同，是用類的方法替代了傳統寫 css 的方法，也可以嘗試一下。由於我暫時沒精力反覆除錯樣式，還是就用現成固定的框架好了。
我這次選擇 bulma ，也不去研究怎麼定製化，就直接通過 CDN 引入就好：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">

Bulma 也有一些要求，包括使用 HTML 5 的 doctype :

<!DOCTYPE html>

加上自適應的 viewpoint meta tag

<meta name="viewport" content="width=device-width, initial-scale=1">

具體參看這個：Getting started with Bulma

Vue 也引入：

<script type="text/javascript" src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

這裡我發現一個小技巧，就是通過 https://unpkg.com 去引入什麼檔案的時候，比如 Vue，你也不確定到底什麼版本，直接訪問這個 URL ：https://unpkg.com/vue@2，然後它自動幫你跳轉到最新版本的具體檔案 URL，很方便。

設計

樣式選擇好了，但是頁面到底怎麼規劃還是沒想好，簡單 PS 一個，至少有個方向，也可以研究一下 laracasts 中出現多次的 zeplin，如果你精力確實很旺盛的話。
對於設計，我思考的角度主要有兩個：

  1. 有沒有現成比較好的可以參考。
  2. 我最終希望呈現給使用者是什麼樣的，使用者應該如何使用我的網站。

關於第1點，我就不多說了，青菜蘿蔔，各有所愛。
關於第2點，我首先希望展現網站的logo和網站名稱，作為品牌印象。其次我希望使用者第一時間瞭解網站是做什麼的，以及目前進展的一些情況，然後可以有一些直觀的入口：一方面老使用者可以迅速進入想要進入的版塊，另一方面，新使用者也可以快速瞭解如何開始使用網站。
所以我不得不說，似乎 Bulma 的首頁還挺符合我的需求的，看起來也挺清爽：

[新手開發記錄] 規劃網站目標

那就先照著它用 photoshop 把大概的樣子設計一下，比如下圖，當然，因為想法還很初步，所以都可以隨時調整。

[新手開發記錄] 規劃網站目標

佈局

在正式開始寫之前，還應該瞭解一些 bulma 的基礎，不過這個可能不適合放在這個系列裡，我幕後瞭解一下，之後就開始慢慢寫。
英文版文件：bulma.io/documentation/
中文版有好的文件歡迎留言推薦！
Bulma 文件具體看右側的導航欄，可以按順序學習瞭解：

[新手開發記錄] 規劃網站目標

佈局也是很重要的，既然設計初步達成了，就應該分析一下佈局應該如何去做，主要是參考這個視訊的方式：【中文語音】（61）【實戰】在組建中巢狀佈局檔案 - Laracasts - Laravel 6 From Scratch

我在 view 目錄下新建了 components 目錄，然後新建了一個 main.blade.php
主要程式碼除了一些 html 就是在 body 中插入了 {{ $slot }}：

<body>
    {{ $slot }}
</body>

然後任何頁面要使用 main.blade.php 這個佈局檔案，就可以這樣寫：

<x-main>
   <!--要放入的其他程式碼 -->
</x-main>

兩個標籤中間的內容就會插入上面 {{ $slot }} 的位置。
目前而言，我都可以使用一些佔位的內容將整個頁面先構建起來，然後逐步把一些真正業務的東西加入進去。
最後大概寫成這個樣子，這裡主要還是 bulma 的學習花了點時間，可能寫得還不一定對，不過在後續可以逐步調整：

[新手開發記錄] 規劃網站目標

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章