Hugo 學習紀錄

這個 blog 是用 hugo 完成的
語言是用 go,可產生靜態網頁 安裝步驟官網都有說明、在此就不贅述了

首先是要讓 hugo 動起來、必須下載 hugo 的 template 到 theme 資料夾,網頁才會動,網址如下:
https://themes.gohugo.io/
因為在網頁根目錄已經有一份 git repo 了、不能用 git clone 下載
就用 git submodule
(git 嫩嫩是我QQ)
對網頁修改之後、有兩個方法可以看到修改
第一個是 hugo server,hugo server 提供一個 web server
可以透過 127.0.0.1:1313 存取到網頁,而且預設還附贈 LiveLoad 的功能
第二個是在網頁根目錄執行 hugo,會重新產生網頁內容(位於 public)
之後將 web server 的 root 指到 public 資料夾、即可透過 web server 存取到 hugo 網頁

再來是 theme 的部分,我是用 Beautiful Hugo
(有一個跟 hugo 很像的 framework 是 hexo,我覺得 hexo 的主題比較好看QQ)
但這邊我覺得很麻煩的是 hugo 有不同 content 屬性
(pages -> sections) -> pages -> sections -> content
↑重複0~n次,一個 tree 的結構
page 表示任何網頁的 resource,一張圖片、一篇文章等等
section 是一個資料夾,當我在資料夾底下有一個”_index.md”的檔案時
就表示是一個子章節、感覺有點像另一個首頁一樣
例如我 root 的 section 就是 yclin@blog
如果我建了一個 section 是 WebDev
那該 section 首頁(ex. yongching.csie.io/WebDev)照片底下的標題就會變成 WebDev

然後我在 po 第一篇文的時候、文章不知道為什麼沒有顯示在首頁
一直看文件想說是不是哪裡漏掉了(說明 section 的章節看三遍了嗚嗚嗚)
結果去 theme/beautifulhugo/layouts/index.html 看到了以下的程式碼

{{ $pag := .Paginate (where .Data.Pages "Type" "post") }}

……
type 要是 post 才會顯示在首頁的列表裡面
Orz
因為我沒有特殊需求,基本上只用來寫 blog
資料夾對我來說就是分類而已
所以我就在 front matter(位於原始內容的最上方,角色是定義 metadata)增加 type: post
這樣所有文章都會顯示在首頁

還有就是 template 套用
beautifulhugo 有兩種文章 template: post, page
page template 可以點選 ABOUT 參考
不像一般文章會有時間戳記、標題位置也不同
也都是用 type: page 來寫死
不過如果不想用寫死的方法,在 content 底下可以建立 post 跟 page 的資料夾
要哪種 type 就寫在各自的資料夾
beautifulhugo 的 source code 有 exampleSite
其他主題我想應該也有,真的很好用不要傻呼呼的一直看文件QQ
另外 _index.md 的優先度是大於 front matter
也就是在 _index.md 寫了 type: post 也不會出現在文章列表的唷
_index.md 內容也只會被當成首頁的說明欄

在最上方的 navbar 是 hugo 的 menu 功能
可以指定某一個 page 放在 menu 內(一樣用 front matter 定義)
也可以在 config 內設定非 content 的頁面
例如 category 跟 tag 都不是 content 內容
但 hugo 可以協助 render 這些頁面、不過記得要先在 config 設定

[taxonomies]
     tag = "tags"
     category = "categories"

為了要在 navbar 顯示 tags & categories 就在 config 內設定

[[menu.main]]
    name = "Categories"
    url = "/categories/"
    weight = 100
[[menu.main]]
    name = "Tags"
    url = "/tags/"
    weight = 95

不過 beautifulhugo 不會顯示文章 category QQ

最後就是 comments 功能,我是用 disqus,簡單好用
1. 申請 disqus 帳號
2. 在設定檔做設定(我的主題需要設定 comments = true,可參考主題 source code 的判斷式)

disqusShortname = "yourdiscussshortname"
[params]
	comments = "true"

easy peasy,讚讚讚

comments powered by Disqus