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

Posted on by

正文

使用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
<h3 id="first-blog">first blog</h3>
<p>Hello Blog</p>
===
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 內容初始化的資料請關註WalkonNet其它相關文章！

推薦閱讀：