Hugo建站深入

Last updated on 2021年9月20日 6 min read

1. Hugo常用命令

启动web服务器

hugo server -D

启动了服务器，可以在localhost:1313访问

2. config.toml配置

baseURL = "https://ianying.github.io/"
languageCode = "en-us"
title = "Ian's Blog"
theme = "zen"

[permalinks]
  post = "/:year/:month/:title/"

3. front matter

front matter可以支持3种格式：YAML, TOML, JSON 注意：注意在front matter中，如果时间超过当前时间，不会被发布。

4. Template

通常情况下，3种模板:

  • theme/layout/_default/single.html
  • theme/layout/_default/list.html
  • theme/layout/index.html

首页模板

baseof.html

模板中的模板

<body>
    {{ block "main" . }}

    {{end}}
</body>

main可以在其它模板中定义，比如在single中

<body>
    {{ define "main" }}
    This is the single template.
    {{end}}
</body>

在这种情况下，首页会使用baseof.html,single会使用single.html但single.html又会引用baseof.html中的框架。

override原来的Template

在根目录的layout目录下建一个_default的文件夹，如果是建立single的模板，建一个single.html文件，这个模板就可以override主题文件夹下的single模板（theme/layout/_default/single.html） 也可以为section建立不同的模板，再override主题中的模板。如有一个section叫post在theme/layout/post/下新建一个single.html文件，这个模板就可以override theme/layout/_default/single.html。所有在post这个section下的single页面就会使用theme/layout/post/single.html模板。

partial Template

在layout文件夹下创建一个partail文件夹，存放partial模板，partial模板可以是见面文件的平分，比如header或footer。

一个header的例子

<h1>{{ .Title }}</h1>
<p>{{ .Date }}</p>
<hr> // 水平线

在single模板中的调用

{{ partial "header" . }} // . 的意思是所有的变量，就是把header中所有的内容都带过来

short code 模板

可以方便引用经常要输入的内容 在layout文件夹下创建一个 shortcodes 文件夹，在其中建立模板文件，示例(myshortcode.html ，此文件命名可随意)，在文件中写： This is the shortcode text.

(由于html依然会解释代码块中的内容，因此将shortcode相关的"<"和">"替换成了”[“和”]") 调用：


'{{[ myshortcode ]}} //无参数

有参数调用的示例1， myshortcode.html

<p style = " color:{{.Get `color` }}" >This is the text</p> //理论上是应该用"color"，但是因为css关键字的关系，所以用``框起来

调用：

{{[ myshortcode color = "blue" ]}}

有参数调用的示例2， myshortcode.html

<p style = " color:{{.Get 0 }}" >This is the text</p> //直接把第一个拿到的参数传进来

调用：

{{[ myshortcode blue ]}}

有tags调用的示例3， myshortcode.html

<p style="background-color:yellow;">{{ .Inner }} </p> //背景变黄

调用1：

{{ < myshortcode > }}
    This is the text inside the shortcode tags. // 这种调用不会渲染这里的Markdown格式
{{ < /myshortcode >}}

调用2:

{{ % myshortcode %}}
    **This is the text inside the shortcode tags.** // 这种调用会渲染这里的Markdown格式
{{ % /myshortcode %}}

模板中的变量

基本都是`{{.variables}}`格式。 {{ .Title }} 标题 {{ .Date }} {{ .URL }} 也可以调用front matter中定义一个变量：

---
title: "Hugo 教程"
date: 2017-11-14T21:19:01+08:00
draft: true
isCJKLanguage: true
myVar: testVar
---

可能通过如下方法调用

{{ .Params.myVar }}

也可以在页面中自定义一个变量 {{ $myVarname := 3 }} {{ $myVarname := true }} {{ $myVarname := "a string" }}

在页面显示这个变量 {{ $myVarname }}

5. archetypes

在archetypes目录中可以新建模板，如post.md，这样，所有在content/post目录下的新文件都会使用post.md框架。

6. 静态文件

Static

hugo网站建立起来之后，第一个问题是如何组织页面。第二个问题就是如何保存图片文件了。 原来在网站文件夹下有一个static文件夹，所有在这个目录下的文件都会被原样copy到public文件夹下。比如，如果为图片建立一个img文件夹，放在static文件夹下，生成网站时，这个目录及里面的内容会被直接复制到public下。

data文件夹

存放json，Yaml格式文件的地方 如：存放了一个所有省市信息的states.json文件，可以在模板中调用： 文件内容：

{
    "WI": {
	"name": "Wisconsin",
	"capital": "Madison",
	"lat": "43.074722",
	"long": "-89.234234"
    }
}

模板调用

{{ range .Site.Data.states }} //遍历states.json文件中所有内容
    {{ .name }} </br> //显示所有json文件中的name值
{{ end }}

7. taxonomy

如何组织内容的方法，提供两种默认基本形式，tags, catagories，都在front matter中显示。

tags

tags: ["tags1", "tags2"]

catagories

catagroies: ["cat1"]

自定义taxonmy

另外也可以自定义taxonomy，如：mood: [“happy”, “unhappy”]，为了生成tag的页面，需要在config.toml中配置

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

即使只加了一个，也需要把默认的写一下。

8. fuctions

仅在模板中有效

{{functionname parm1 parm2}}

{{truncate 10 "this is an example"}}

{{ siguralize "dogs" }}

{{ range .Page}} // 遍历所有的页面
  // .Page表示所有的页面
  {{ .Title }} // 遍历所有页面，显示标题

{{ end }}

if

{{ $var1 := "dog" }}
{{ $var2 := "cat" }}

{{ if eq $var1 $var2 }} // if var1 == var2
  true // 页面显示true
{{else}}
  false
{{ end }}

一个应用的例子，鼠标hover的标题高亮黄色

{{ $title := .Title }}  // 当前标题
{{ range .Site.Pages }}
    <li><a href="{{.URL}}" style="{{ if eq .Tilee $title }} background-color:yellow;{{ end }}">{{ .Title }}</a>
{{ end }} //函数的结尾

9. 问题的解决

9.1 列表页面的显示问题

Hugo有两种页面，一种叫list page（文章的页面），另一种叫list page（列表页面） 在列表页面，在文章标题下会有一个摘要的显示，但摘要有两个问题。

    1. 随意断句
    1. 不换行

摸索了一段时间后，这个问题是属于：summary，官方文档：Summaries Summary Splitting Options 有两个，一个是系统默认，一个是用户手动，手动的方法就是在markdown中加入一个

<!--more-->

如果是org格式的话

# more

除此之外，在文章的头属性中需增加： isCJKLanguage: true 说这个也影响断句及字数统计。

换行的问题也同时解决。

9.2 文章链接问题

一般链接设置是：

[permalinks]
  post = "/:year/:month/:title/"

其中title默认是文件名，但同时也是文章的主题，会显示在文章的第一行。这就对于如果想链接是英文而标题是中文就很难操作了。 解决的方案参照了：URL Management其中提到的除日期外的链接参数：

:section

the content’s section

:sections

the content’s sections hierarchy

:title

the content’s title

slug
the content’s slug (or title if no slug is provided in the front matter)
之前试过在每篇文章中加入这个参数，也是可以的。

:filename

在转换一个wordpress网站之后，发现其实最直接的方式是在front matter中设置一个url属性，直接写Url

the content’s filename (without extension)，最终选定的是这个方案

[permalinks]
  post = "post/:year/:month/:filename/"

参考：

http://newoxygen.github.io/post/hugo%E5%BF%AB%E9%80%9F%E5%BB%BA%E7%AB%99/

http://www.zimustudio.com/hugo.html

https://gohugo.io/

Hugo
海上一民工

Related