小白也能用hugo架設自己的網站-4 在本地啟動網站server進行測試，修改專案設定檔中的選單參數
這篇是檢驗小成果的一篇，下面要告訴你如何在自己的電腦上啟動一個虛擬的網站server，
那什麼是server呢?不用擔心，關於server，我會在之後的文章詳細的說明，
你只要知道這個虛擬server，可以讓你用瀏覽器打開一個網站，而這個網站就是根據你專案資料夾內的各種設定檔產生的，
你可以一邊修改專案設定檔、新增文章，而虛擬的網站server會在你更動專案內的檔案時即時的刷新，並呈現在瀏覽器上，非常的直覺又方便，
OK! 那我們馬上開始!
在本地啟動網站server進行測試
要使用hugo來模擬一個網站server之前，有幾個觀念需要先告訴你，
首先，這個虛擬網站server是由hugo根據專案資料夾內的所有相關檔案生成的，在你修改檔案並存檔後就會立即刷新，
這個虛擬網站server會在cmd輸入一條指令後啟動，也會在你關閉cmd視窗後關閉，
其次，這個虛擬網站server只能從本地，也就是你啟動虛擬網站server的電腦才能連線到網站，其他人是連不上的，
最後，這個虛擬網站server所呈現的，九成以上就是最終架設網站時，其他人會看到的樣子，
少數幾個功能需要在生成最後的網站資料夾後才會呈現，例如網站流量統計、評論功能。
- 用檔案總管找到你的專案資料夾，按
alt+d
跳到視窗的網址列，按home跳到開頭，並且輸入
cmd
cmd後面記得要空一格，之後按enter - 此時會打開cmd視窗，
執行以下指令，告訴 hugo 啟動虛擬網站server，並且連草稿一併顯示。
hugo server -D
p.s 注意D有大寫 - 成功啟動虛擬網站server後，NVDA在cmd的視窗裡按小鍵盤7、9可以看到像這樣的訊息→
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
p.s 如果有報錯訊息，代表你的專案設定檔有問題，例如你修改時無意刪除了某些符號、或某些參數修改錯誤，另一種可能是你修改了主題模板內的檔案所產生的錯誤，
一般來說，錯誤訊息也會包含導致錯誤的檔案，因此可以仔細看看錯誤訊息是否有提到是哪邊的問題 - 打開你電腦上的瀏覽器，輸入下面的網址→
http://localhost:1313/
或是打ip也可以→
127.0.0.1:1313
輸入完後記得按enter - 接下來你應該就能在瀏覽器看到你的網站了，使用一般操作網頁的方法來操作你的網站看看，
不要關閉cmd的視窗，你可以修改專案設定檔，或新增文章，查看瀏覽器中網站的改變，相信會非常有趣，
當你修改完，或不需要邊修改邊從瀏覽器查看網站的改變時，在關閉cmd視窗
網站中的選單
什麼是網站中的選單
在meme主題模板中，網站的頂部有一塊區域，可以放其他網頁的連結，這塊區域在專案設定檔內被稱為
menu
可以被翻譯成菜單或選單，
例如分類文章、同標籤文章、關於本站，都會以連結的方式在網頁頂部呈現，比較容易被注意到，
也可以將這裡的選單理解為自己網站的其他版塊或頁面，當然也能連結到其他網站的某個頁面，
而網站的選單，也與下篇我要介紹的Front Matter息息相關，
Front Matter是下篇教學文章我會重點介紹的內容，
簡單來說，Front Matter是每一篇用hugo新增的文章都會有的，它是一段純文字的內容，會在每一篇文章的開頭處，
這段純文字是用來描述文章的標題、作者、分類、標籤、發布時間等等資訊的，
有了這些資訊，文章才能成功的被顯示在網頁上，
接下來，我們先來了解選單的相關參數設定，
看完後，再搭配下篇介紹新增文章、Front Matter的內容，來決定選單和文章該如何搭配和顯示囉!
專案設定檔中的選單設定
接下來我們又需要來編輯專案設定檔了，一起來看看那些地方要修改吧!
- 用檔案總管找到你的專案資料夾，並找到專案設定檔→
config.toml - 按快顯鍵，往下找用notepad++開啟，或找
開啟檔案(H)
按enter後，選擇用記事本開啟 - 在打開的notepad++或記事本中使用搜尋功能，也就是按
ctrl+f
輸入
選單
按enter，之後按ESC關閉搜尋對話框 - 往下會看到選單的相關介紹，一直往下找這幾行，我會告訴你這幾行都是什麼意思→
- 每一個選單都必須要有的開頭參數，這個參數前面有四個空格→
[[menu.main]] - 這個選單要指向的位置，可以是網站資料夾內的某個資料夾，或是外部連結，也就是以http開頭的連結，
要注意這裡已經有八個空格了，也就是這些參數都是在menu下面的參數，要特別注意參數的階層關係，如果忘了可以回頭看上一篇→
pageref = "/posts/" - 這個選單顯示在網站上的連結名→
name = "文章" - 這個選單在網站上顯示的位置，其實就是選單之間的先後順序，數字越小越靠前，這個順序也會影響到實際操作網頁時按tab看到的順序→
weight = 2 - 這裡是控制前面的pageref指向的地址是網站內部的位置，還是外網的位置，
如果要指向網站資料夾內的某個路徑，這裡就改為"internal"
如果是要指向其他網站的連結，就改為"external"→
pre = "internal" - 選單要顯示的圖片，如果留空就沒有圖片→
post = "archive"
- 每一個選單都必須要有的開頭參數，這個參數前面有四個空格→
- ok，我們現在要做的第一件事情就是將上面的那個選單，以及該選單下的所有參數全部用#來讓參數不生效，因為這個選單是無用的，
只要是在#之後的任何文字，都不會被執行，因此這種作法也被稱為注釋，
很多人都會利用#的特性，在寫程式的時候，在程式碼旁邊加說明文字，
OK! 那麼在修改完之後，看起來會像這樣→
[[menu.main]]
pageref = "/posts/"
name = "文章"
weight = 2
pre = "internal"
post = "archive"
- 接下來，你會看到meme主題模板的專案設定檔中，最典型的三個選單，
不過在往下看之前，你需要先了解一些觀念，方便你後續修改參數，讓網站變成你想要的樣子，
上面我們介紹到pageref這個參數，可以指向網站資料夾內的路徑，也可以指向外部網站的連結，
而當你修改的路徑是指向網站資料夾內的路徑時，在網頁上可以有兩種呈現方式→- 如果你指向的是某個資料夾，並且資料夾內有文章檔案時，
那從網站點選這個選單進入的頁面，會以列表的方式，呈現這個資料夾內的所有文章檔案，
每個檔案都會在網頁上以連結的方式呈現，要再點選文章的連結才會看到文章的內容，
這種呈現方式，適合用在一個資料夾內有很多文章檔案的時候 - 如果你指向的路徑是某個資料夾內的某個文章檔案，
那從網站上點選選單進入後，看到的就是這個文章檔案的內容， - 例如，像這樣就是用列表的方式，呈現about資料夾內的所有文章→
pageref = "/about/"
p.s 記得指向的路徑如果是資料夾，資料夾名後面還要加斜線
而像這樣，就是呈現categories裡面，名為MyName.md這個文章檔案的內容
pageref = "/about/MyName"
p.s 要特別注意的是，當你指向的是某個檔案的檔名時，不需要加副檔名，檔名後也不要有斜線 - 一般來說，所有的文章檔案都會放在專案資料夾內的content資料夾下，
而使用pageref指定路徑時，就是指向content內的某個資料夾，
但要特別注意的是，pageref所指向的資料夾路徑，並非專案資料夾的路徑，而是網站資料夾的路徑，
基本上，在content資料夾下的所有資料夾和文章檔案，都會在轉換成網站資料夾的過程中，被納入網站資料夾中，
每個在content下的資料夾，在網站資料夾都是一個獨立的資料夾，資料夾和子資料夾的層級關係也是相同的，
如果你已經快要暈頭轉向了，可以看看下面的例子，
例如，我想要指定專案資料夾下，content資料夾下的about資料夾，而在我電腦上的路徑長這樣→
c:\我的專案資料夾\content\about
當我要修改pageref，指向about這個資料夾，修改後看起來會像這樣→
pageref = "/about/" - 另外還有一點需要注意的，因為網站資料夾最終通常都會放在linux系統的電腦上，所以資料夾路徑的輸寫方式都是以linux的邏輯為主，
例如上方的好幾個例子你會發現，在windows電腦上，我們會有各種磁碟分割區，每個分割區都有自己的英文代號，例如c、d、e等等，路徑也都是由這些字母開頭，
但在linux系統中，就沒有使用英文代號來代表某個分割區的概念，而是以斜線，來表示最外層的目錄，
而windows中，用來分隔每一層資料夾是使用反斜線，linux系統則是使用斜線，
因此在編輯專案設定檔的路徑時，要特別注意，不要把在windows輸入路徑的慣性思維帶進來，不然你可能會很常看到各種錯誤訊息喔!
- 如果你指向的是某個資料夾，並且資料夾內有文章檔案時，
- OK! 我們回到專案設定檔，
繼續往下，你會看到名為(分類)這個選單的設定參數→
[[menu.main]]
pageref = "/categories/"
name = "分類"
weight = 3
pre = "internal"
post = "th"
說明:根據你的需求，可以更改=(等號)後面的參數，如果有"(雙引號)包夾的參數，只需修改引號內的文字，但不要刪除引號，
另外要注意的是這一行→
pageref = "/categories/"
這裡所指向的路徑，不是content中已經存在的categories資料夾，
categories資料夾只會在最後，從專案資料夾轉換為網站資料夾時才會被新增到網站資料夾中，
在專案資料夾下的content中，所有文章檔案中有用到categories這個參數的所有檔案，都會被納入categories資料夾內，
另外，所有具有相同categories的文章，也會被放到同一個子資料夾下，
例如有五篇文章，第一和第二篇的categories都是軟體，第三到第五篇的categories都是音樂，
第一第二篇就會被放到軟體子資料夾下，第三到第五就會被放到音樂子資料夾下，
而在網站上點選(分類)這個選單後，你會先看到軟體和音樂這兩個分類的連結，再點選某個分類才會看到文章
p.s關於專案資料夾如何轉換成網站資料夾，會在後續文章有詳細的介紹， - 再往下，你會看到(標籤)這個選單的設定參數→
[[menu.main]]
pageref = "/tags/"
name = "標籤"
weight = 4
pre = "internal"
post = "tags"
說明:按照上一個步驟的要點，編輯這個選單的參數，
要注意的是這一行→
pageref = "/tags/"
跟content一樣，tags資料夾也是跟文章中的Front Matter有關，
所有文章中有用到tags參數的，都會在轉換成網站資料夾時被分類到tags資料夾下，
在網站上的選單，點進去後一樣會先看到各個標籤，再點進去才會看到有相同標籤的文章 - 繼續往下，你會看到(關於)這個選單的設定參數→
[[menu.main]]
pageref = "/about/"
name = "關於"
weight = 5
pre = "internal"
post = "user-circle"
說明:一樣按照上述的要點來修改參數，about這個資料夾就比較普通了，
如果你要在點選選單後，以列表呈現about所有的文章檔案，
只需要在專案資料夾的content目錄下，新增about資料夾，接著在裡面新增文章檔案，pageref的參數修改成跟上面一樣就可以了，
如果你要改成點了這個選單後，直接顯示about資料夾內某個文章內的文字，那一樣是要在專案資料夾下的content資料夾內新增about資料夾，
接著新增文章檔案，編輯好檔案的內容，pageref改為這樣→
pageref = "/about/檔名" - 當你要新增其他選單時，參考第六步的要點，和第九步的操作即可，
想要新增更多的選單，你可以複製上面的選單參數，加以修改，再貼到自己的專案設定檔中，最後一個選單的後一行即可，
不過要特別注意每一行前面的空格，為了讓你更清楚，就拿上面(關於)的選單為例，
(關於)是預設的專案設定檔中最後一個選單，下面我將在(關於)這個選單後再新增一個(我的作品)的選單→
[[menu.main]]
pageref = "/about/"
name = "關於"
weight = 5
pre = "internal"
post = "user-circle"
[[menu.main]]
pageref = "/My finished product/"
name = "我的作品"
weight = 6
pre = "internal"
post = "user-circle" - 根據上面的例子，你應該對修改選單有了初步的了解了，上面我所指向的路徑是網站資料夾內的My finished product資料夾，
當然，這樣設定的話，你的專案資料夾下的content資料夾下也必須新增一個名為My finished product的資料夾，
這個資料夾下也要有文章檔案，這樣點選這個選單才能看到文章檔案的連結，
如果想要指定顯示某個文章檔案的內容，只要按照第九步的方法，把檔名也加到路徑中就好了 - 整個選單的參數，和概念都告訴你了，唯一比較不同的就是tags和categories這兩個資料夾，
因為他們跟文章檔案中的Front Matter有關，且只有在轉換成網站資料夾時才會生成這兩個資料夾， - 另外，不想要的選單，也可以用#來讓參數不被執行，
例如接下來這兩個，也是預設舊有的，我推薦你將他們也注釋掉，修改後會像這樣→