Hugo-架構學習

概念

hugo是由Go語言實現的靜態網站產生器。簡單、易用、高效、易擴充、快速部署。

主要用於個人Blog、項目文檔、初創公司網站構建。

hugo的下載安裝很簡單，可以參考官方的quickstart，本文主要介紹一下hugo架構的基本概念和工作原理。

目錄結構

命令：hugo new site blog

blog├── archetypes├── config.toml├── content├── data├── layouts├── static├── themes└── public

archetypes

在通過hugo new xxx 建立內容頁面的時候，預設情況下hugo會建立date、title等front matter，可以通過在archetypes目錄下建立檔案，設定自訂的front matter。

config.toml

所有的hugo網站都有一個全域設定檔，用來配置整個網站的資訊，hugo預設提供了跟多配置指令。

content

網站下所有的內容頁面，也就是我們建立的md檔案都在這個content目錄下面。

data

data目錄用來儲存網站用到一些配置、資料檔案。檔案類型可以是yaml|toml|json等格式。

layouts

存放用來渲染content目錄下面內容的模版檔案，模版.html格式結尾，layouts可以同時儲存在項目目錄和themes/<THEME>/layouts目錄下。

static

用來儲存圖片、css、js等靜態資源檔案。

themes

用來儲存主題，主題可以方便的協助我們快速建立網站，也可以方便的切換網站的風格樣式。

public

hugo編譯後產生網站的所有檔案都儲存在這裡面，把這個目錄放到任意web伺服器就發行就緒網站成功。

頁面綁定

Page bundles

hugo中的內容組織是依賴Page Bundles來管理的。Page Bundles包括Leaf Bundle（沒有子節點）和Branch Bundle（home page, section, taxonomy terms, taxonomy list）兩類。

	Leaf Bundle	Branch Bundle
索引檔案	index.md	_index.md
布局類型	single	list
嵌套	不允許嵌套	允許Leaf或Branch Bundle嵌套

Section

section是基於content/目錄下的組織圖定義的頁面集合。

content/ 下的第一級子目錄都是一個section。如果想讓一個子目錄成為section，需要在目錄下面定義_index.md檔案。 所有的section構成一個section tree。

content└── blog        <-- Section, 因為是content的子目錄    ├── funny-cats    │   ├── mypost.md    │   └── kittens         <-- Section, 因為包含_index.md    │       └── _index.md    └── tech                <-- Section, 因為包含 _index.md        └── _index.md

如果section tree 需要可導航，至少最底層的部分需要定義一個_index.md檔案。

front matter

front matter 用來配置文章的標題、時間、連結、分類等元資訊，提供給模板調用

+++title = "post title"description = "description."date = "2018-08-20"tags = [ "tag1", "tag2", "tag3"]categories = ["cat1","cat2"]weight = 20+++

模版

Hugo以go語言的html/template庫作為模版引擎，將內容通過template渲染成html，模版作為內容和顯示視圖之間的橋樑。

hugo由三種類型的模版：single、list and partial。

Hugo有一套自己的模版尋找機制，如果找不到與內容完全符合的模板，它將向上移動一級並從那裡搜尋。直到找到匹配的模板或用完模板來嘗試。如果找不到模板，它將使用該網站的預設範本。

Single Template

single template 用於渲染頁面內容。

List Template

list template 用於渲染一組相關內容，例如一個網站下所有內容，一個目錄下的內容；

homepage 也就是_index.md，是一個特殊類型的list template，homepage實際上就是一個網站所有內容的入口。

partial Template

partial template 可以被其他模版引用，實際上可以理解為模版層級的組件，例如頁面頭部、頁面底部等。

基礎模版查詢規則

基本模版是指baseof.html的尋找規則

1. /layouts/section/<TYPE>-baseof.html2. /themes/<THEME>/layouts/section/<TYPE>-baseof.html3. /layouts/<TYPE>/baseof.html4. /themes/<THEME>/layouts/<TYPE>/baseof.html5. /layouts/section/baseof.html6. /themes/<THEME>/layouts/section/baseof.html7. /layouts/_default/<TYPE>-baseof.html8. /themes/<THEME>/layouts/_default/<TYPE>-baseof.html9. /layouts/_default/baseof.html10. /themes/<THEME>/layouts/_default/baseof.html

頁面模版查詢規則

kind

判斷頁面是single page 還是 list page？

如果是single page，會選擇模版_default/single.html

如果是list page（section listings, home page, taxonomy lists, taxonomy terms），會選擇模版_default/list.html

Output Format

根據輸出格式的名稱和尾碼，選擇匹配的模版。例如輸出格式是rss，尾碼是.html,首先看有沒有匹配的index.rss.html格式的模版。

Language

根據網站設定的語言選擇匹配的模版，比如，網站的語言為fr，模版匹配的優先順序是：index.fr.amp.html > index.amp.html > index.fr.html

Layout

可以在頁面頭部設定front matter：layout，設定頁面用指定的模版進行渲染，例如，頁面在目錄posts（預設section）下面，layout=custom，尋找規則如下：

• layouts/posts/custom.html
• layouts/posts/single.html
• layouts/_default/custom.html
• layouts/_default/single.html

type

如果在頁面的頭部設定了屬性type屬性，例如type=event，尋找規則如下：

• layouts/event/custom.html
• layouts/event/single.html
• layouts/events/single.html
• layouts/_default/single.html

文法

基礎文法

go-template 基礎文法

block

在父模版中通過{{ block "xxx"}} 定義一個塊，在子模組中可以通過{{define "xxx"}} 定義的內容進行替換。

{{< button theme="info">}} 模版定義 {{< /button >}}

{{ define "chrome/header.html" }}  <div>{{ .Site.Params.author}}</div>{{ end }}

模版引用

方法一 ：partial（推薦使用）

用於引入定義的局部模版，局部模版位置必須在themes/layouts/partials 或者layouts/partials目錄下。

{{ partial "chrome/header.html" . }}

方法二 ：template

template 在一些比較老的版本中用於引入定義的局部模版，現在在內部模版中仍然使用。

{{ template "chrome/header.html" . }}

{{- xxx -}}

-用於去除空格，例如：

1. {{- xxx}用於去除{{- 前邊的空格
2. {{ xxx -}用於去除-}}後邊的空格
3. {{- xxx -}}用於去除兩邊的空格

Paginator

.Paginator主要用來構建菜單，只能在homePage、listPage中使用。

{{ range .Paginator.Pages }}   {{ .Title }}{{ end }}

短代碼

短代碼（shortcodes）相當於一些自訂模版，通過在md文檔中引用，產生程式碼片段，類似於一些js架構中的組件。

短代碼必須在themes/layouts/partials 或者layouts/partials目錄下定義。

短代碼在模版檔案中引用是無效的，只能在content目錄下的*.md檔案中引用。

引用方式

{{%/* msshortcodes params1="xxx" */%}}**this** is a text{{%/* /msshortcodes */%}}{{</* msshortcodes params1="xxx"  */>}} **Yeahhh !** is a text {{</* /msshortcodes */>}}

1. % 代表短代碼中的內容需要進一步渲染
2. < 代表短代碼中間的內容項不需要進一步渲染

taxonomy

hugo中通過taxonomy來實現使用者對內容的分組。taxonomy需要在網站設定檔中定義：

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

預設情況下，hugo提供了category、tag兩個分類，不需要使用者在設定檔中定義，但如果還有其他的taxonomy定義，則預設的tag、category也需要定義；

使用方式

1. 在網站設定檔中添加taxonomy,例如：series
2. 定義taxonomy list template；例如，在layouts/taxonomy/series.html
3. 在內容檔案的front matter中設定term；例如，series = ["s1","s2"]
4. 訪問taxonomy列表，例如，localhost:1313/series/s1

變數

Hugo提供了很多不同類型變數用於建立模版，構建網站。

Site

大部分網站變數定義在網站設定檔中（config.[yaml|toml|json] ）

.Site.Menus:網站下的所有菜單

.Site.Pages:網站下的所有頁面

.Site.Params: 網站下的參數

Page

頁面級參數都定義在頁面頭部的front matter中，例如：

+++title = "Hugo"date = 2018-08-13T18:29:20+08:00description = ""draft = falseweight = 10+++

使用方式

{{ .Params.xxx }} 或者是 {{ .Site.Params.xxx }}