为 hugo 站点设置默认主题后,需要在配置文件中对主题进行配置,以定制 hugo 站点显示内容。hugo 配置文件位于站点根目录下,可以是 hugo.toml, hugo.yaml, config.yaml 其中之一。hugo 可选的主题比较丰富,可以在 https://themes.gohugo.io/ 选择自己喜欢的主题。不同的 hugo 主题,对 content 目录下文章组织有不同的要求,并且配置选项也各不相同,配置时还需要参考主题各自的文档。
我的博客配置了 PaperMod 主题,这篇文章主要对该主题的初始配置做一个记录。
1. PaperMod 初始配置
为 hugo 站点下载 PaperMod 主题:
# 将 PaperMod 项目设置为 git 仓库的子模块,并下载 PaperMod 主题
git submodule add --depth=1 \
https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
PaperMod 下载到 theme 目录后,将站点默认主题配置为 PaperMod,此时 hugo 配置文件如下:
baseURL: "https://examplesite.com/"
title: ExampleSite
languageCode: 'us-en'
theme: PaperMod
这样,hugo 站点已经具备了 PaperMod 主题的雏形,但是站点处于“毛坯”阶段,需要进行一定的“装修”。
注意:hugo 支持本地预览,主题配置过程中可以通过下面的命令实时查看站点“装修”效果:
# -D include content marked as draft
# --disableFastRender enables full re-renders on changes
# --gc enable to run some cleanup tasks (remove unused cache files) after the build
hugo server -D --disableFastRender --gc
2. PaperMod 进阶配置
2.1 一些简便的配置
参考 PaperMod 示例站点配置,以下是 hugo 配置文件中一些便利性的配置:
buildDrafts: false
buildFuture: false
buildExpired: false
# 支持 emoji 表情
enableEmoji: true
# --minify 选项配置
minify:
disableXML: true
params:
# to enable google analytics, opengraph, twitter-cards and schema.
env: production
# Add keywords for Home page
keywords: [Blog, Portfolio, PaperMod]
# 为博客设置默认作者,每个博客还可以单独
author: ['Carl Cui']
# 在博客底部显示向不同平台分享的按钮
ShowShareButtons: true
# 为博客显示预估的阅读时间
ShowReadingTime: true
# 在博客顶部显示博客章节
ShowToc: true
# 默认展开顶部显示的博客章节
TocOpen: true
# 在博客标题上方显示博客所处的层级
ShowBreadCrumbs: true
# 在博客下方显示上一个/下一个博客跳转链接
ShowPostNavLinks: true
# 为代码段显示复制按钮
ShowCodeCopyButtons: true
2.2 为站点增加 Archives 导航
在 content 目录下创建名为 archives.md 的文档:
.
├── hugo.yaml
├── content/
│ ├── archives.md <--- Create archive.md here
│ └── posts/
├── static/
└── themes/
└── PaperMod/
archives.md 内容如下:
---
title: "Archive"
layout: "archives"
url: "/archives/"
summary: archives
---
然后更新 hugo 配置文件:
# Add menu to site
menu:
main:
- identifier: archives
name: Archives
url: /archives/
weight: 20
params:
# 配置 archive menu
ShowAllPagesInArchive: true
2.3 为站点增加 Tags 导航
更新 hugo 配置文件:
menu:
main:
- identifier: tags
name: Tags
url: /tags/
weight: 20
2.4 设置 Home-Info 模式
更新 hugo 配置文件:
params:
homeInfoParams:
Title: 👋 欢迎来到楠楠老爹的博客!
Content: >
🌟 记录、分享个人在计算机技术方面的收获与体会 🌟
socialIcons: # optional
- name: "github"
url: "<personal github link>"
- name: "KoFI"
url: "<personal KoFI link>"
2.5 为站点设置搜索功能
更新 hugo 配置文件:
outputs:
home:
- HTML
- JSON # necessary for search
# Add menu to site
menu:
main:
- identifier: search
name: Search
url: /search/
weight: 20
在 content 目录下创建 search.md 文档,内容如下:
---
title: "Search"
placeholder: Search demo site with full text fuzzy search ...
layout: "search"
---
文档中配置 searchHidden 可以将特定文档排除在搜索范围外
---
searchHidden: true
---
3. PaperMod 高级配置
经过前面简单地“装修”,hugo 站点已经初步满足了博客发布的基本需要。一些个人感觉相对高级的功能,比如评论留言、主题定制化调整等功能,留给后续犹有余力时尝试。