早在4年前刚开始搭建本博客时，我曾写过一篇简短的文章，介绍了我建站时使用的一些工具。如今，那篇文章中提到的很多工具都已过时。加之本次博客整体迁移，又使用了全新的 PaperMod 主题，很多功能的配置方式都发生了变化。于是我决定重新写一篇文章，记录一下我在折腾这个新主题过程中的一些技术细节。
配置文件语法
Hugo 同时支持3钟配置文件语法，分别为 YAML、TOML和JSON。它们都是常用的数据序列化和配置文件格式，且各有特点和适用场景。
YAML (YAML Ain’t Markup Language)
YAML是一种人类可读的数据序列化格式，常用于配置文件和数据交换，它的语法格式为：
name: John Doe
age: 30
city: New York
hobbies:
- reading
- traveling
它的特点为：
-
语法简洁，易于阅读和编写
-
支持注释、多行字符串和复杂的数据结构
-
使用缩进表示层级关系
TOML (Tom’s Obvious, Minimal Language)
TOML是一种旨在成为最小配置文件格式的语言，设计目标是易于阅读和编写，它的语法格式为：
[person]
name = "John Doe"
age = 30
city = "New York"
[person.hobbies]
favorite = "reading"
others = ["traveling", "photography"]
它的特点为：
-
语法直观，易于理解
-
支持注释
-
支持多种数据类型，包括日期时间
-
允许创建嵌套的数据结构
JSON (JavaScript Object Notation)
JSON是一种轻量级的数据交换格式，最初源于JavaScript，但现在已广泛应用于各种编程语言，它的语法格式为：
{
"name": "John Doe",
"age": 30,
"city": "New York"
}
它的特点为：
-
简洁易读
-
解析速度快
-
与JavaScript高度兼容
-
支持基本数据类型：字符串、数字、布尔值、null、对象和数组
综合考虑易读性及与当前主题的兼容性，我选择的配置文件语法为YAML，以下所有配置命令，都将以YAML格式呈现。值得注意的是，YAML对缩进非常敏感，在利用 Hugo 进行渲染时，哪怕某一行少了一个空格，都会渲染失败，所以要特别注意。
添加文章时间轴页面（Archives）
在/Content/目录下新建archieves.md，写入以下内容：
---
title: "Archive"
layout: "archives"
url: "/archives/"
summary: archives
---
添加搜索页面（Search）
第1步：在配置文件config.yml中添加以下内容：
outputs:
home:
- HTML
- RSS
- JSON # 搜索页所必需
第2步：在/Content/目录下新建archieves.md，写入以下内容：
---
title: "Search" # 以你想要的任何语言
layout: "search" # 搜索页所必需
# url: "/archive"
# description: "Description for Search"
summary: "search"
placeholder: "在此输入搜索关键词"
---
添加菜单
在配置文件config.yml中添加以下内容：
menu:
main:
- name: 文章
url: archives
weight: 5
- name: 搜索
url: search/
weight: 10
- name: 标签
url: tags/
weight: 10
- name: 关于
url: about/
weight: 10
启用 Emoji ✅
Hugo 原生支持 Emoji 渲染，只要在配置文件config.yml中添加以下内容：
enableEmoji: true
这样，只要在.md文件中输入符合 Markdown 语法的:emojiname:（两个半角冒号中间写上 Emoji 名称），即可输入一个 Emoji。你可以在这个列表中查询 Markdown 语法中的 Emoji 名称。
添加 Favicon 图标
可以参考我的这篇文章，访问这个网站，将你喜欢的站点图标图片转换成Favicon专用格式，将生成的所有文件放入/static/目录下。
可选：如果想将图标文件放入/static/的子目录下，例如/static/favicon/，则还需在配置文件config.yml中添加以下内容：
params:
assets:
favicon: "/favicon/favicon.ico"
favicon16x16: "/favicon/favicon-16x16.png"
favicon32x32: "/favicon/favicon-32x32.png"
apple_touch_icon: "/favicon/apple-touch-icon.png"
safari_pinned_tab: "/favicon/safari-pinned-tab.svg"
启用代码复制按钮
在配置文件config.yml中添加以下内容：
params:
ShowCodeCopyButtons: true
翻页按钮显示页数
在配置文件config.yml中添加以下内容：
params:
ShowPageNums: true
文章列表页面添加RSS订阅按钮
在配置文件config.yml中添加以下内容：
params:
ShowRssButtonInSectionTermList: true
RSS Feed 输出全文
在配置文件config.yml中添加以下内容：
params:
ShowFullTextinRss: true
以新标签页打开站外链接
在/themes/主题名/layouts/_default/_markup/目录下新建render-link.html，写入以下内容：
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
自定义超链接样式
PaperMod 主题支持自定义CSS，我们可以通过自定义CSS改变网站默认的超链接样式，如颜色、下划线，以及鼠标悬停时的变化等。
在/themes/主题名/assets/css/extended/目录下新建custom.css，写入以下内容：
.post-content a {
color: #0969da;
box-shadow: none;
text-decoration: none;
}
.post-content a:hover {
text-decoration: underline;
}
这段代码会将文章内容中的超链接颜色设置为蓝色(#0969da)，并在鼠标悬停时添加下划线。
SEO 优化相关
SEO (Search Engine Optimization) 是一种通过优化网站内容和结构来提高网站在搜索引擎结果页面中自然排名的方法。SEO的目标是增加网站的有机流量，提升网站的可见度，吸引更多目标受众。要为 Hugo 站点做 SEO 优化，我们需要做好以下工作：
配置文件优化
在配置文件config.yml中添加网站描述：
params:
description: "您的网站描述"
同样，我们也可以为每篇文章设置标题、关键词和描述，在.md文件的头部添加以下内容，来定义文章的基本信息：
---
title: "文章标题"
keywords:
- 关键词1
- 关键词2
description: "文章描述"
---
创建 sitemap 站点地图
站点地图是一个重要的网站文件，它为搜索引擎和用户提供了网站结构的概览。要为 Hugo 站点创建站点地图，在配置文件config.yml中添加以下内容：
sitemap:
changefreq: weekly
filename: sitemap.xml
priority: 0.5
其中，changefreq表示更新频率，filename表示生成的站点地图文件名，priority表示页面的默认优先级。这样，Hugo 会在网站根目录下生成一个sitemap.xml文件，以便搜索引擎了解网站结构。
创建 robots.txt 爬虫索引
Robots.txt是一个位于网站根目录的纯文本文件，用于将站点地图提交给搜索引擎，指导搜索引擎如何访问和索引网站内容。要为 Hugo 站点创建robots.txt，在配置文件config.yml中添加以下内容：
enableRobotsTXT: true
这样，Hugo 会自动在网站根目录下生成Robots.txt文件。
参考链接
Home · adityatelange/hugo-PaperMod Wiki