为 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 站点已经初步满足了博客发布的基本需要。一些个人感觉相对高级的功能,比如评论留言、主题定制化调整等功能,留给后续犹有余力时尝试。

参考资料

Hugo PaperMod 效果展示

Hugo PaperMod 功能概览

Hugo PaperMod Wiki

Hugo PaperMod 示例站点

Hugo PaperMod 示例配置