Hugo-框架學習

Arthas發表於2019-02-16
Go框架

概念

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.html
2. /themes/<THEME>/layouts/section/<TYPE>-baseof.html
3. /layouts/<TYPE>/baseof.html
4. /themes/<THEME>/layouts/<TYPE>/baseof.html
5. /layouts/section/baseof.html
6. /themes/<THEME>/layouts/section/baseof.html
7. /layouts/_default/<TYPE>-baseof.html
8. /themes/<THEME>/layouts/_default/<TYPE>-baseof.html
9. /layouts/_default/baseof.html
10. /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:00
description = ""
draft = false
weight = 10
+++

使用方式

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

相關文章