小白也能用hugo架設自己的網站-4 在本地啟動網站server進行測試,修改專案設定檔中的選單參數

小白也能用hugo架設自己的網站-4 在本地啟動網站server進行測試,修改專案設定檔中的選單參數

這篇是檢驗小成果的一篇,下面要告訴你如何在自己的電腦上啟動一個虛擬的網站server,
那什麼是server呢?不用擔心,關於server,我會在之後的文章詳細的說明,
你只要知道這個虛擬server,可以讓你用瀏覽器打開一個網站,而這個網站就是根據你專案資料夾內的各種設定檔產生的,
你可以一邊修改專案設定檔、新增文章,而虛擬的網站server會在你更動專案內的檔案時即時的刷新,並呈現在瀏覽器上,非常的直覺又方便,
OK! 那我們馬上開始!

在本地啟動網站server進行測試

要使用hugo來模擬一個網站server之前,有幾個觀念需要先告訴你,
首先,這個虛擬網站server是由hugo根據專案資料夾內的所有相關檔案生成的,在你修改檔案並存檔後就會立即刷新,
這個虛擬網站server會在cmd輸入一條指令後啟動,也會在你關閉cmd視窗後關閉,
其次,這個虛擬網站server只能從本地,也就是你啟動虛擬網站server的電腦才能連線到網站,其他人是連不上的,
最後,這個虛擬網站server所呈現的,九成以上就是最終架設網站時,其他人會看到的樣子,
少數幾個功能需要在生成最後的網站資料夾後才會呈現,例如網站流量統計、評論功能。

  1. 用檔案總管找到你的專案資料夾,按
    alt+d
    跳到視窗的網址列,按home跳到開頭,並且輸入
    cmd
    cmd後面記得要空一格,之後按enter
  2. 此時會打開cmd視窗,
    執行以下指令,告訴 hugo 啟動虛擬網站server,並且連草稿一併顯示。
    hugo server -D
    p.s 注意D有大寫
  3. 成功啟動虛擬網站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 如果有報錯訊息,代表你的專案設定檔有問題,例如你修改時無意刪除了某些符號、或某些參數修改錯誤,另一種可能是你修改了主題模板內的檔案所產生的錯誤,
    一般來說,錯誤訊息也會包含導致錯誤的檔案,因此可以仔細看看錯誤訊息是否有提到是哪邊的問題
  4. 打開你電腦上的瀏覽器,輸入下面的網址→
    http://localhost:1313/
    或是打ip也可以→
    127.0.0.1:1313
    輸入完後記得按enter
  5. 接下來你應該就能在瀏覽器看到你的網站了,使用一般操作網頁的方法來操作你的網站看看,
    不要關閉cmd的視窗,你可以修改專案設定檔,或新增文章,查看瀏覽器中網站的改變,相信會非常有趣,
    當你修改完,或不需要邊修改邊從瀏覽器查看網站的改變時,在關閉cmd視窗

網站中的選單

什麼是網站中的選單

在meme主題模板中,網站的頂部有一塊區域,可以放其他網頁的連結,這塊區域在專案設定檔內被稱為
menu
可以被翻譯成菜單或選單,
例如分類文章、同標籤文章、關於本站,都會以連結的方式在網頁頂部呈現,比較容易被注意到,
也可以將這裡的選單理解為自己網站的其他版塊或頁面,當然也能連結到其他網站的某個頁面,
而網站的選單,也與下篇我要介紹的Front Matter息息相關,
Front Matter是下篇教學文章我會重點介紹的內容,
簡單來說,Front Matter是每一篇用hugo新增的文章都會有的,它是一段純文字的內容,會在每一篇文章的開頭處,
這段純文字是用來描述文章的標題、作者、分類、標籤、發布時間等等資訊的,
有了這些資訊,文章才能成功的被顯示在網頁上,
接下來,我們先來了解選單的相關參數設定,
看完後,再搭配下篇介紹新增文章、Front Matter的內容,來決定選單和文章該如何搭配和顯示囉!

專案設定檔中的選單設定

接下來我們又需要來編輯專案設定檔了,一起來看看那些地方要修改吧!

  1. 用檔案總管找到你的專案資料夾,並找到專案設定檔→
    config.toml
  2. 按快顯鍵,往下找用notepad++開啟,或找
    開啟檔案(H)
    按enter後,選擇用記事本開啟
  3. 在打開的notepad++或記事本中使用搜尋功能,也就是按
    ctrl+f
    輸入
    選單
    按enter,之後按ESC關閉搜尋對話框
  4. 往下會看到選單的相關介紹,一直往下找這幾行,我會告訴你這幾行都是什麼意思→
    • 每一個選單都必須要有的開頭參數,這個參數前面有四個空格→
      [[menu.main]]
    • 這個選單要指向的位置,可以是網站資料夾內的某個資料夾,或是外部連結,也就是以http開頭的連結,
      要注意這裡已經有八個空格了,也就是這些參數都是在menu下面的參數,要特別注意參數的階層關係,如果忘了可以回頭看上一篇→
      pageref = "/posts/"
    • 這個選單顯示在網站上的連結名→
      name = "文章"
    • 這個選單在網站上顯示的位置,其實就是選單之間的先後順序,數字越小越靠前,這個順序也會影響到實際操作網頁時按tab看到的順序→
      weight = 2
    • 這裡是控制前面的pageref指向的地址是網站內部的位置,還是外網的位置,
      如果要指向網站資料夾內的某個路徑,這裡就改為"internal"
      如果是要指向其他網站的連結,就改為"external"→
      pre = "internal"
    • 選單要顯示的圖片,如果留空就沒有圖片→
      post = "archive"
  5. ok,我們現在要做的第一件事情就是將上面的那個選單,以及該選單下的所有參數全部用#來讓參數不生效,因為這個選單是無用的,
    只要是在#之後的任何文字,都不會被執行,因此這種作法也被稱為注釋,
    很多人都會利用#的特性,在寫程式的時候,在程式碼旁邊加說明文字,
    OK! 那麼在修改完之後,看起來會像這樣→

[[menu.main]]

pageref = "/posts/"

name = "文章"

weight = 2

pre = "internal"

post = "archive"

  1. 接下來,你會看到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輸入路徑的慣性思維帶進來,不然你可能會很常看到各種錯誤訊息喔!
  2. 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關於專案資料夾如何轉換成網站資料夾,會在後續文章有詳細的介紹,
  3. 再往下,你會看到(標籤)這個選單的設定參數→
    [[menu.main]]
    pageref = "/tags/"
    name = "標籤"
    weight = 4
    pre = "internal"
    post = "tags"
    說明:按照上一個步驟的要點,編輯這個選單的參數,
    要注意的是這一行→
    pageref = "/tags/"
    跟content一樣,tags資料夾也是跟文章中的Front Matter有關,
    所有文章中有用到tags參數的,都會在轉換成網站資料夾時被分類到tags資料夾下,
    在網站上的選單,點進去後一樣會先看到各個標籤,再點進去才會看到有相同標籤的文章
  4. 繼續往下,你會看到(關於)這個選單的設定參數→
    [[menu.main]]
    pageref = "/about/"
    name = "關於"
    weight = 5
    pre = "internal"
    post = "user-circle"
    說明:一樣按照上述的要點來修改參數,about這個資料夾就比較普通了,
    如果你要在點選選單後,以列表呈現about所有的文章檔案,
    只需要在專案資料夾的content目錄下,新增about資料夾,接著在裡面新增文章檔案,pageref的參數修改成跟上面一樣就可以了,
    如果你要改成點了這個選單後,直接顯示about資料夾內某個文章內的文字,那一樣是要在專案資料夾下的content資料夾內新增about資料夾,
    接著新增文章檔案,編輯好檔案的內容,pageref改為這樣→
    pageref = "/about/檔名"
  5. 當你要新增其他選單時,參考第六步的要點,和第九步的操作即可,
    想要新增更多的選單,你可以複製上面的選單參數,加以修改,再貼到自己的專案設定檔中,最後一個選單的後一行即可,
    不過要特別注意每一行前面的空格,為了讓你更清楚,就拿上面(關於)的選單為例,
    (關於)是預設的專案設定檔中最後一個選單,下面我將在(關於)這個選單後再新增一個(我的作品)的選單→
    [[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"
  6. 根據上面的例子,你應該對修改選單有了初步的了解了,上面我所指向的路徑是網站資料夾內的My finished product資料夾,
    當然,這樣設定的話,你的專案資料夾下的content資料夾下也必須新增一個名為My finished product的資料夾,
    這個資料夾下也要有文章檔案,這樣點選這個選單才能看到文章檔案的連結,
    如果想要指定顯示某個文章檔案的內容,只要按照第九步的方法,把檔名也加到路徑中就好了
  7. 整個選單的參數,和概念都告訴你了,唯一比較不同的就是tags和categories這兩個資料夾,
    因為他們跟文章檔案中的Front Matter有關,且只有在轉換成網站資料夾時才會生成這兩個資料夾,
  8. 另外,不想要的選單,也可以用#來讓參數不被執行,
    例如接下來這兩個,也是預設舊有的,我推薦你將他們也注釋掉,修改後會像這樣→

[[menu.main]]

weight = 6

identifier = "theme-switcher"

[[menu.main]]

weight = 7

identifier = "lang-switcher"