Hugo
博客中的官方导航栏是头部的,之前使用的Mainroad
主题也是如此(且不太好自定义到左侧)。日常文档阅读中,侧边toc
更为方便,故对主题做了升级…
该文档基于
hugo@0.124.0
版本
一、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"
参考
- 根据Hugo PaperMod主题自定义的各种逻辑: xyming108/sulv-hugo-papermod
- Sulv hugo博客搭建 | PaperMod主题
最后, 希望大家早日实现:成为编程高手的伟大梦想!
欢迎交流~
本文版权归原作者曜灵所有!未经允许,严禁转载!对非法转载者, 原作者保留采用法律手段追究的权利!
若需转载,请联系微信公众号:连先生有猫病,可获取作者联系方式!