Hugo 遊樂場內容初始化範例詳解

2023-02-25 06:00:59

正文

使用Hugo構建站點的體驗很棒。首先是構建速度快，其次是使用起來簡單，一個hugo命令，我們的站點就已經就緒。

在構建過程中，Hugo提供了豐富的內建功能函數，可以在構建過程中向你提供所需要的幾乎任何站點相關的資訊。通過可重用模板，讓主題來幫助處理所有展示和佈局相關的問題。讓作者更專注在內容的創作上。

Hugo 遊樂場

站點構建的就將寫好的內容，轉化成Web伺服器能理解的網站資源。比如我們寫作的時候用的是Markdown格式，生成的網站資源通常是HTML格式。

下面是一個簡單的初始化部落格內容：

-- config.toml --
theme = "mytheme"
contentDir = "mycontent"
-- myproject.txt --
Hello project!
-- themes/mytheme/mytheme.txt --
Hello theme!
-- mycontent/blog/post.md --
---
title: "Post Title"
---
### first blog
Hello Blog
-- layouts/index.html --
{{ $entries := (readDir ".") }}
START:|{{ range $entry := $entries }}{{ if not $entry.IsDir }}{{ $entry.Name }}|{{ end }}{{ end }}:END:
-- layouts/_default/single.html --
{{ .Content }}
===
Static Content
===

可以看到我們自定義了一個主題mytheme，只有一個mytheme.txt檔案，並沒有實際的模板檔案。這將會在下面的構建流程講解中，幫助我們理解到主題是如何巢狀和載入的。

我們的內容資料夾是mycontent，在blog目錄下有一篇簡單博文/blog/post.md。如果想要獨立存取這篇博文，就需要為她生成一個HTML檔案，這樣我們就可以在瀏覽器中存取了。

在樣例中，為了生成首頁和部落格，我們還在layouts下建立了兩個模板。一個是首頁模板index.html，另一個則是單篇文章會用到的模板_default/single.html。

通過golang tools txtar解析上述文字，方便我們轉換成如下結構的磁碟檔案：

.
├── config.toml
├── layouts
│  ├── _default
│  │   └── single.html
│  └── index.html
├── mycontent
│   └── blog
│     └── post.md
├── myproject.txt
└── themes
    └── mytheme
        └── mytheme.txt

通過Hugo命令進行構建，就能生成如下站點資源：

➜  public tree
.
├── blog
│   └── index.html
├── index.html
└── robots.txt

幷包含了我們想要的資訊：

站點首頁

➜  public cat index.html
START:|config.toml|myproject.txt|:END:%

部落格頁面

➜  public cat blog/index.html
&lt;h3 id="first-blog"&gt;first blog&lt;/h3&gt;
&lt;p&gt;Hello Blog&lt;/p&gt;
===
Static Content
===
  %

那Hugo的這個魔術到底是怎麼變出來的呢？

為了瞭解Hugo構建的核心原理，通過對Hugo最新原始碼進行裁剪，移除當前階段不必要的"噪音"。結合我們上面的範例，手動生成了一個最小可工作原始碼庫 - hugo遊樂場。以保證我們在這個遊樂場可以盡情地玩耍，專注於核心原理，享受整個原始碼的學習過程。

通過命令:

git ls-files | grep '.go' | xargs wc -l

分別統計gohugoio/hugo和hugo playground的程式碼行數。我們得到的資料分別是 163075 和 33990 行。

整整縮減了近四倍！

相信各位看官也會虎軀一震，信心倍增！看原始碼原來也可以這麼開心。請準備好瓜子飲料小板凳，各位看官你細聽分說。

Show Me The Code

package main
import (
   "bytes"
   "fmt"
   "path/filepath"
   "golang.org/x/tools/txtar"
)
// 檔案結構
// 檔名: config.toml
// 檔案內容：theme = 'mytheme'
var files = "-- config.toml --n" +
   "theme = 'mytheme'"
func main() {
   // 解析上面的檔案結構
   data := txtar.Parse([]byte(files))
   fmt.Println("File start:")
   // 遍歷解析生成的所有檔案，通過File結構體獲取檔名和檔案資料
   // f.Name 獲取檔名
   // f.Data 獲取檔案資料
   for _, f := range data.Files {
      filename := filepath.Join("workingDir", f.Name)
      data := bytes.TrimSuffix(f.Data, []byte("n"))
      fmt.Println(filename)
      fmt.Println(string(data))
   }
   fmt.Println("File end.")
}

Output:

# 解析後得到檔案config.toml，以及下面的檔案內容
# workingDir就是我們的工作目錄，通常是要寫入的檔案目錄
File start:
workingDir/config.toml
theme = 'mytheme'
File end.

Try it yourself

以上就是Hugo 遊樂場內容初始化範例詳解的詳細內容，更多關於Hugo 內容初始化的資料請關注it145.com其它相關文章！

Hugo 遊樂場內容初始化範例詳解

目錄

正文

Hugo 遊樂場

Show Me The Code

熱門文章