Hugo博客中的官方导航栏是头部的，之前使用的Mainroad主题也是如此（且不太好自定义到左侧）。日常文档阅读中，侧边toc更为方便，故对主题做了升级…

一、Papermod 主题配置

项目初始化：

$ cd Blogs # 进入博客项目
$ git submodule update --init # 拉取themes/hugo-PaperMod/下的子模块，里面放的是官方主题

修改config.yml核心配置:

...
theme: hugo-PaperMod  # 主题名字，和themes文件夹下的一致
...

menu:
  main:
    - identifier: search
      name: 🔍 搜索
      url: search
      weight: 1
    - identifier: home
      name: 🏠 主页
      url: /
      weight: 2
    - identifier: tags
      name: 🧩 标签
      url: tags
      weight: 15
    - identifier: archives
      name: ⏱️ 归档
      url: archives/
      weight: 3
    - identifier: about
      name: 🙋🏻‍♂️ 关于
      url: about
      weight: 50

outputs:
  home:
    - HTML
    - RSS
    - JSON

# 这里的参数会被代码以 .Site.Params 的形式读取
params:
  ...
  defaultTheme: dark  # defaultTheme: light or  dark or auto
  disableThemeToggle: false
  DateFormat: "2006-01-02"
  ...

  profileMode:
    ...
    subtitle: 🌝 带着 "偏见" 去理解技术的世界
    imageUrl: "img-common/avatar.jpeg"
    ...
    buttons:
      - name: 📕 计算机基础
        url: posts/computer-basics
      - name: 👨🏻‍💻 前端开发
        url: posts/frontend-develop
      - name: 🧱 后端开发
        url: posts/backend-develop
      - name: 🏖 其他
        url: posts/other

  socialIcons:
    - name: github
      url: "https://github.com/lianpf"
    - name: 知乎
      # url: "zhihu.svg"
      url: "https://www.zhihu.com/people/lianpf-sun/posts"
    - name: email
      url: "mailto:wanderlian@outlook.com"
    - name: RSS
      url: "index.xml"

  ...
  StartYear: 2016 # 底部开始年份
  ...

更多个人信息配置，请参考建站教程：https://www.sulvblog.cn/posts/blog/

在终端输入hugo server -D，在浏览器输入：localhost:1313 即可看到

二、注意事项

1.Papermod主题下博客不生效?

原Mainroad主题下的博客，在切换到Papermod时，突然失效。经排查，发现Papermod官方示例仓库下的post分类增加了_index.html文件，不增加则无法正常访问。

如：/Blogs/content/posts/other分类下直接写文，现在则需要增加/Blogs/content/posts/other/_index.md，示例如下:

---
title: "📚 其他"
# description: "一些无法分类的知识"
hidemeta: true # 是否隐藏文章的元信息，如发布日期、作者等
---

2.GitHub Actions中Hugo版本过低

  • PaperMod主题要求：Hugo >= v0.112.4
$ hugo version # 查看版本
$ brew update # Mac终端中更新 Homebrew
$ brew upgrade hugo # 升级 hugo

/Blogs/.github/workflows/deploy.yml配置项升级Hugo版本：

...
jobs:
  deploy:
    ...
    steps:
      ...  
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.112.4' # 升级hugo版本为0.112.4 或 latest
          extended: true
      ...

3.主页socialIcons配置问题

目前主题官方只能支持预设的一些icon，详情参考: hugo-PaperMod / Icons

用法如下：

socialIcons:
  - name: "x"
    url: "https://x.com"
  - name: "other" # 自定的icons
    url: "https://xxx.xxx"

参考

最后， 希望大家早日实现：成为编程高手的伟大梦想！
欢迎交流~

微信公众号

本文版权归原作者曜灵所有！未经允许，严禁转载！对非法转载者, 原作者保留采用法律手段追究的权利！
若需转载，请联系微信公众号：连先生有猫病，可获取作者联系方式！