道破——Hugo

发表于： 分类于：
字数：3720 阅读：≈ 8分钟 浏览：

1. 快速上手

  1. 下载 Hugo 对应系统版本并安装。

Windows

将hugo.exe放到任意目录，并将该目录添加到系统-高级系统设置-环境变量

Linux

将hugo放到/usr/local/bin下

Mac

通过homebrew安装

1

brew install hugo

检查安装是否成功

1
2

hugo help
hugo version
  1. 创建新站点
1

hugo new site quickstart
  1. 添加主题
1
2
3
4

cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo theme = \"ananke\" >> config.toml
  1. 添加内容
1

hugo new posts/my-first-post.md
  1. 启动服务器
1

hugo server

如果需要外部访问，执行命令时指定绑定IP：0.0.0.0

1

hugo server --bind="0.0.0.0"
  1. 访问 http://localhost:1313/

2. 配置

2.1. .toml和.yml

学习配置之前必须掌握toml和yaml的用法，以免遇到不必要的报错。

TOML详细用法查看 TOML教程

YAML详细用法查看 YAML教程

3. 部署

GitHub Pages的部署方法请参考 道破——GitHub Pages

4. 主题

官方文档中用例是 Ananke 。

如果不喜欢这款主题，可以去 Hugo Themes 挑选一款最近仍在更新的主题。

一定要注意主题作者提供的使用文档，我在试了几个主题之后，发现需要修改太多以前写作的md文本Front-matter，如果不按照作者提供的关键字修改， 服务根本跑不起来，所以我选择了从Hexo-NexT移植的 hugo-theme-next 主题，可以参考作者提供的文档进行配置。

4.1. NexT快速上手

1
2
3
4
5
6
7

hugo new site hugo-next-example
cd hugo-next-example
git init
git submodule add https://github.com/hugo-next/hugo-theme-next.git themes/hugo-theme-next
cp -r themes/hugo-theme-next/exampleSite/* .
rm -rf config.toml
hugo server

执行完以上命令后，访问 http://localhost:1313/

后续更新主题只需要在你的站点目录中，执行如下命令：

1
2

cd hugo-next-example
git submodule update --remote

作者非常贴心，把已实现的和计划实现的功能配置都写在config.yml中了，注释直观清晰，有需要的功能直接改。

4.2. 创建新篇

使用Hugo快速创建新篇。

1

hugo new posts/hello-world.md

关于文章头部那些参数作用的说明参考如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

---
# 文章标题
title: ""
# 文章内容摘要
description: ""
# 文章内容关键字
keywords: ""
# 发表日期
date:
# 最后修改日期
lastmod:
# 分类
categories:
 -
# 标签
tags:
  -
  -

# 原文作者
#author:
# 原文链接
#link:
# 图片链接，用在open graph和twitter卡片上
#imgs:
# 在首页展开内容
#expand: true
# 外部链接地址，访问时直接跳转
#extlink:
# 在当前页面开启或关闭评论功能
#comment:
# enable: false
# 开启文章目录功能
#toc: false
# 绝对访问路径
#url: "{{ lower .Name }}.html"
# 开启文章置顶，数字越小越靠前
#weight: 1
---

4.3. 主题支持语法

4.3.1. 块引用

在引用一些经典名言名句时，可以采用此短语，语法参考如下：

1
2
3
4

{{< quote >}}
  ### block quote
  写下你想表达的话语！
{{< /quote >}}

实际效果：

希望是无所谓有，无所谓无的，这正如地上的路。

其实地上本没有路，走的人多了，也便成了路。

鲁迅

4.3.2. 信息块

支持 default，info，success，warning，danger 等五种不同效果的展示，语法参考如下：

1
2
3
4

{{< note [class] [no-icon] >}}
  书写表达的信息
  支持 Markdown 语法
{{< /note >}}

实际效果：

4.3.3. Default Header without icon

Welcome to Hugo NexT!

4.3.4. Default Header

Welcome to Hugo NexT!

4.3.5. Info Header

Welcome to Hugo NexT!

4.3.6. Success Header

Welcome to Hugo NexT!

4.3.7. Warning Header

Welcome to Hugo NexT!

4.3.8. Danger Header

Welcome to Hugo NexT!

5. Emoji

Emoji 可以通过多种方式在 Hugo 项目中启用。

emojify 方法可以直接在模板中调用, 或者使用 行内 Shortcodes .

要全局使用 emoji, 需要在你的 网站配置 中设置 enableEmoji 为 true， 然后你就可以直接在文章中输入 emoji 的代码。

它们以冒号开头和结尾，并且包含 emoji 的 代码：

1
2
3

去露营啦! {:}tent: 很快就回来.

真开心! {:}joy:

呈现的输出效果如下:

去露营啦! ⛺ 很快就回来。

真开心! 😂

以下符号清单是 emoji 代码的非常有用的参考。

5.1. 表情与情感

5.1.1. 笑脸表情

图标代码图标代码
😀grinning😃smiley
😄smile😁grin
😆laughing
satisfied		😅sweat_smile
🤣rofl😂joy
🙂slightly_smiling_face🙃upside_down_face
😉wink😊blush
😇innocent

5.1.2. 爱意表情

图标代码图标代码
😍heart_eyes😘kissing_heart
😗kissing☺️relaxed
😚kissing_closed_eyes😙kissing_smiling_eyes

5.1.3. 吐舌头表情

图标代码图标代码
😋yum😛stuck_out_tongue
😜stuck_out_tongue_winking_eye😝stuck_out_tongue_closed_eyes
🤑money_mouth_face

5.1.4. 国家和地区旗帜

图标代码图标代码
🇦🇩andorra🇦🇪united_arab_emirates
🇦🇫afghanistan🇦🇬antigua_barbuda
🇦🇮anguilla🇦🇱albania
🇦🇲armenia🇦🇴angola
🇦🇶antarctica🇦🇷argentina
🇦🇸american_samoa🇦🇹austria
🇦🇺australia🇦🇼aruba
🇦🇽aland_islands🇦🇿azerbaijan
🇧🇦bosnia_herzegovina🇧🇧barbados
🇧🇩bangladesh🇧🇪belgium
🇧🇫burkina_faso🇧🇬bulgaria
🇧🇭bahrain🇧🇮burundi
🇧🇯benin🇧🇱st_barthelemy
🇧🇲bermuda🇧🇳brunei
🇧🇴bolivia🇧🇶caribbean_netherlands
🇧🇷brazil🇧🇸bahamas
🇧🇹bhutan🇧🇼botswana
🇧🇾belarus🇧🇿belize
🇨🇦canada🇨🇨cocos_islands
🇨🇩congo_kinshasa🇨🇫central_african_republic
🇨🇬congo_brazzaville🇨🇭switzerland
🇨🇮cote_divoire🇨🇰cook_islands
🇨🇱chile🇨🇲cameroon
🇨🇳cn🇨🇴colombia
🇨🇷costa_rica🇨🇺cuba
🇨🇻cape_verde🇨🇼curacao
🇨🇽christmas_island🇨🇾cyprus
🇨🇿czech_republic🇩🇪de
🇩🇯djibouti🇩🇰denmark
🇩🇲dominica🇩🇴dominican_republic
🇩🇿algeria🇪🇨ecuador
🇪🇪estonia🇪🇬egypt
🇪🇭western_sahara🇪🇷eritrea
🇪🇸es🇪🇹ethiopia
🇪🇺eu
european_union		🇫🇮finland
🇫🇯fiji🇫🇰falkland_islands
🇫🇲micronesia🇫🇴faroe_islands
🇫🇷fr🇬🇦gabon
🇬🇧gb
uk		🇬🇩grenada
🇬🇪georgia🇬🇫french_guiana
🇬🇬guernsey🇬🇭ghana
🇬🇮gibraltar🇬🇱greenland
🇬🇲gambia🇬🇳guinea
🇬🇵guadeloupe🇬🇶equatorial_guinea
🇬🇷greece🇬🇸south_georgia_south_sandwich_islands
🇬🇹guatemala🇬🇺guam
🇬🇼guinea_bissau🇬🇾guyana
🇭🇰hong_kong🇭🇳honduras
🇭🇷croatia🇭🇹haiti
🇭🇺hungary🇮🇨canary_islands
🇮🇩indonesia🇮🇪ireland
🇮🇱israel🇮🇲isle_of_man
🇮🇳india🇮🇴british_indian_ocean_territory
🇮🇶iraq🇮🇷iran
🇮🇸iceland🇮🇹it
🇯🇪jersey🇯🇲jamaica
🇯🇴jordan🇯🇵jp
🇰🇪kenya🇰🇬kyrgyzstan
🇰🇭cambodia🇰🇮kiribati
🇰🇲comoros🇰🇳st_kitts_nevis
🇰🇵north_korea🇰🇷kr
🇰🇼kuwait🇰🇾cayman_islands
🇰🇿kazakhstan🇱🇦laos
🇱🇧lebanon🇱🇨st_lucia
🇱🇮liechtenstein🇱🇰sri_lanka
🇱🇷liberia🇱🇸lesotho
🇱🇹lithuania🇱🇺luxembourg
🇱🇻latvia🇱🇾libya
🇲🇦morocco🇲🇨monaco
🇲🇩moldova🇲🇪montenegro
🇲🇬madagascar🇲🇭marshall_islands
🇲🇰macedonia🇲🇱mali
🇲🇲myanmar🇲🇳mongolia
🇲🇴macau🇲🇵northern_mariana_islands
🇲🇶martinique🇲🇷mauritania
🇲🇸montserrat🇲🇹malta
🇲🇺mauritius🇲🇻maldives
🇲🇼malawi🇲🇽mexico
🇲🇾malaysia🇲🇿mozambique
🇳🇦namibia🇳🇨new_caledonia
🇳🇪niger🇳🇫norfolk_island
🇳🇬nigeria🇳🇮nicaragua
🇳🇱netherlands🇳🇴norway
🇳🇵nepal🇳🇷nauru
🇳🇺niue🇳🇿new_zealand
🇴🇲oman🇵🇦panama
🇵🇪peru🇵🇫french_polynesia
🇵🇬papua_new_guinea🇵🇭philippines
🇵🇰pakistan🇵🇱poland
🇵🇲st_pierre_miquelon🇵🇳pitcairn_islands
🇵🇷puerto_rico🇵🇸palestinian_territories
🇵🇹portugal🇵🇼palau
🇵🇾paraguay🇶🇦qatar
🇷🇪reunion🇷🇴romania
🇷🇸serbia🇷🇺ru
🇷🇼rwanda🇸🇦saudi_arabia
🇸🇧solomon_islands🇸🇨seychelles
🇸🇩sudan🇸🇪sweden
🇸🇬singapore🇸🇭st_helena
🇸🇮slovenia🇸🇰slovakia
🇸🇱sierra_leone🇸🇲san_marino
🇸🇳senegal🇸🇴somalia
🇸🇷suriname🇸🇸south_sudan
🇸🇹sao_tome_principe🇸🇻el_salvador
🇸🇽sint_maarten🇸🇾syria
🇸🇿swaziland🇹🇨turks_caicos_islands
🇹🇩chad🇹🇫french_southern_territories
🇹🇬togo🇹🇭thailand
🇹🇯tajikistan🇹🇰tokelau
🇹🇱timor_leste🇹🇲turkmenistan
🇹🇳tunisia🇹🇴tonga
🇹🇷tr🇹🇹trinidad_tobago
🇹🇻tuvalu🇹🇼taiwan
🇹🇿tanzania🇺🇦ukraine
🇺🇬uganda🇺🇸us
🇺🇾uruguay🇺🇿uzbekistan
🇻🇦vatican_city🇻🇨st_vincent_grenadines
🇻🇪venezuela🇻🇬british_virgin_islands
🇻🇮us_virgin_islands🇻🇳vietnam
🇻🇺vanuatu🇼🇫wallis_futuna
🇼🇸samoa🇽🇰kosovo
🇾🇪yemen🇾🇹mayotte
🇿🇦south_africa🇿🇲zambia
🇿🇼zimbabwe

6. Markdown

以下内容是在 NexT 主题中测试是否支持 Markdown 的各种语法，并展示实际效果。

查看MarkDown原生语法请移步 Markdown Reference

6.1. 标题样式

让我们从所有可能的标题开始，在 HTML 中 <h1>-<h6>元素分别表示六个不同级别的标题样式，其中 <h1> 为最大标题，<h6>为最小标题，效果如下：

1
2
3
4
5
6

# 标题 1
## 标题 2
### 标题 3
#### 标题 4
##### 标题 5
###### 标题 6

6.2. 段落格式

根据 W3C 定义的 HTML5 规范 ，HTML 文档由元素和文本组成。每个元素的组成都由一个 开始标记 表示，例如： <body> ，和 结束标记 表示，例如： </body> 。（某些开始标记和结束标记在某些情况下可以省略，并由其他标记暗示。） 元素可以具有属性，这些属性控制元素的工作方式。例如：超链接是使用 a 元素及其 href 属性形成的。

6.2.1. Markdown 语法

1

![图像说明](图像地址)

hugo-next-primary

6.2.2. HTML IMG 标签

1

<img src="图像地址" width="宽度" height="高度" />

6.2.3. SVG 格式

1

<svg>xxxxxx</svg>

6.3. 列表类型

6.3.1. 有序列表

  1. 第一个元素
  2. 第二个元素
  3. 第三个元素

6.3.2. 无序列表

  • 列表元素
  • 另一个元素
  • 和其它元素

6.3.3. 嵌套列表

借助 HTML 的 ul 元素来实现。

  • 第一项
  • 第二项
    • 第二项第一个子项目
    • 第二项第二个子项目
      • 第二项第二分项第一分项
      • 第二项第二分项第二分项
      • 第二项第二分项第三分项
    • 第二项第三个子项目
      1. 第二项第三分项第一分项
      2. 第二项第三分项第二分项
      3. 第二项第三分项第三分项
  • 第三项

6.3.4. 自定义列表

通过 HTML 的 dl 元素还支持自定义列表（表格列表）。

Hugo 目录结构
assets
config.toml
content
data
theme
static
Hugo 模板
基础模板
列表模板
单页模板

6.4. 块引用

blockquote 元素表示从另一个源引用的内容，可以选择引用必须在 footer 或 cite 元素中，也可以选择使用注释和缩写等行内更改。

引用文本 这一行也是同样的引用 同样你也在 blockquote 中使用 Markdown 语法书写

带有引文的 Blockquote 元素效果。

我的目标不是赚大钱,是为了制造好的电脑。当我意识到我可以永远当工程师时，我才创办了这家公司。

— 史蒂夫·沃兹尼亚克

根据 Mozilla 的网站记录，Firefox 1.0 于 2004 年发布，并取得了巨大成功。

6.5. 表格

表格并不算是 Markdown 的核心要素，但 Hugo 同样支持它。

ID创建者模型年份
1HondaAccord2009
2ToyotaCamry2012
3HyundaiElantra2010

可以使用 : （英文格式冒号）来对表格内容进行对齐。

表格可以是很酷
左对齐居中右对齐
左对齐居中右对齐
左对齐居中右对齐

同样也可以在表格中使用 Markdown 语法。

表格中使用Markdown 语法
斜体粗体中划线代码块

6.6. Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

6.7. 其它元素： abbr、sub、sup、kbd等等

GIF 是位图图像格式。

H2O

C6H12O6

Xn + Yn = Zn

按X获胜。或按CTRL+ALT+F显示 FPS 计数器。

比特作为信息论中的信息单位，也被称为 shannon ，以信息论领域的创始人 Claude shannon 的名字命名。

参考：

Hugo 通过 Chroma 提供非常快速的语法高亮显示，现 Hugo 中使用 Chroma 作为代码块高亮支持，它内置在 Go 语言当中，速度是真的非常、非常快，而且最为重要的是它也兼容之前我们使用的 Pygments 方式。

以下通过 Hugo 内置短代码 highlight 和 Markdown 代码块方式分别验证不同语言的代码块渲染效果并能正确高亮显示，有关优化语法突出显示的更多信息，请参阅 Hugo 文档 。

7. 高亮

7.1. 编程语言

7.1.1. GO

199
200
201
202
203
204
205
206
207
208

func GetTitleFunc(style string) func(s string) string {
  switch strings.ToLower(style) {
  case "go":
    return strings.Title
  case "chicago":
    return transform.NewTitleConverter(transform.ChicagoStyle)
  default:
    return transform.NewTitleConverter(transform.APStyle)
  }
}

7.1.2. Java

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import javax.swing.JFrame;  //Importing class JFrame
import javax.swing.JLabel;  //Importing class JLabel
public class HelloWorld {
    public static void main(String[] args) {
        JFrame frame = new JFrame();           //Creating frame
        frame.setTitle("Hi!");                 //Setting title frame
        frame.add(new JLabel("Hello, world!"));//Adding text to frame
        frame.pack();                          //Setting size to smallest
        frame.setLocationRelativeTo(null);     //Centering frame
        frame.setVisible(true);                //Showing frame
    }
}

7.1.3. Python

1

print "Hello, world!"

7.1.4. Git 对比

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

*** /path/to/original ''timestamp''
--- /path/to/new  ''timestamp''
***************
*** 1 ****
! This is a line.
--- 1 ---
! This is a replacement line.
It is important to spell
-removed line
+new line

*** /path/to/original ''timestamp''
--- /path/to/new  ''timestamp''
***************
*** 1 ****
! This is a line.
--- 1 ---
! This is a replacement line.
It is important to spell
-removed line
+new line

7.2. 文件

7.2.1. Make 文件

CC=gcc
CFLAGS=-I.

hellomake: hellomake.o hellofunc.o
     $(CC) -o hellomake hellomake.o hellofunc.o -I.

7.2.2. Markdown 文档

1
2
3

**bold**
*italics*
[link](www.example.com)

7.3. 数据内容

7.3.1. JSON 数据

1
2
3

{"employees":[
    {"firstName":"John", "lastName":"Doe"},
]}

7.3.2. XML 内容

1
2
3
4
5

<employees>
    <employee>
        <firstName>John</firstName> <lastName>Doe</lastName>
    </employee>
</employees>

7.3.3. SQL 查询

1
2
3
4

SELECT column_name,column_name
FROM
  Table
WHERE column_name = "condition"

除以上列举的代码高亮显示外，还支持诸如：C 语言、C++、HTML、CSS、Shell脚本等各主流的代码语言高亮显示，可自行测试效果。

8. 参考

HUGO Docs

Hugo NexT