hugo升级与hugo-theme-stack主题修改与最后修改时间问题

前言

自从上次的博客迁移-从hexo到hugo 发布以来，我本地的环境就再没更新过 hugo 和主题 hugo-theme-stack 了，但配置的 Github Action 却是一直使用最新版本，竟然一直没出问题，运气较好。🤭

刚好最近申请了一个免费域名，也给博客配置上了（github pages 绑定域名的教程太多，就不单独分享了），正好顺便升级一下本地环境。

升级

hugo

参考官网教程：安装hugo，下载对应平台的二进制包即可

注意：本主题一定要使用 extended 版本

问题

更新到最新的 0.133.0 版本后，启动果然报错了

ERROR deprecated: config: languages.zh-cn.description: custom params on the language top level was deprecated in Hugo v0.112.0 and will be removed in Hugo 0.134.0. Put the value below [languages.zh-cn.params]. See https://gohugo.io/content-management/multilingual/#changes-in-hugo-01120

从 0.134.0 版本开始废弃，刚好赶在出问题前一个版本升级😄
简单的配置问题，按文档的说明调整一下 config.yaml 里的 languages 参数即可

为了避免版本升级导致问题，建议 Github Action 里也配置与本地相同的 hugo 版本，修改 .github/workflows/deploy.yml 文件里的 hugo-version 为本地使用的版本

hugo-theme-stack

因为是子模块方式引入的，直接进子目录更新即可

查看最新版本号： hugo-theme-stack/releases

1
2
3
4
5
6
7
cd themes/hugo-theme-stack
git fetch
git checkout v3.26.0 # 切换到指定tag，但不创建分支
cd -

git add themes
git commit -m "[mod] update themes/hugo-theme-stack to v3.26.0"

主题修改

UI美化

彩虹背景
文章加载进度条

新建 layouts/partials/footer/custom.html 文件，添加以下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!-- 彩虹背景 -->
<script
    src="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/js/ribbon.min.js"
    integrity="sha384-UEK8ZiP3VgFNP8KnKMKDmd4pAUAOJ59Y2Jo3ED2Z5qKQf6HLHovMxq7Beb9CLPUe"
    crossorigin="anonymous"
    size="300"
    alpha="0.6"
    zindex="-1"
    defer
></script>

<!-- 加载进度条 -->
<script
    src="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/js/nprogress.min.js"
    integrity="sha384-bHDlAEUFxsRI7JfULv3DTpL2IXbbgn4JHQJibgo5iiXSK6Iu8muwqHANhun74Cqg"
    crossorigin="anonymous"
></script>
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/zhixuan2333/gh-blog@v0.1.0/css/nprogress.css"
    integrity="sha384-KJyhr2syt5+4M9Pz5dipCvTrtvOmLk/olWVdfhAp858UCa64Ia5GFpTN7+G4BWpE"
    crossorigin="anonymous"
/>
<script>
    NProgress.start();
    document.addEventListener("readystatechange", () => {
        if (document.readyState === "interactive") NProgress.inc(0.8);
        if (document.readyState === "complete") NProgress.done();
    });
</script>

前端资源 CDN 镜像

hugo-theme-stack 主题前端资源大量使用了 jsdelivr，但是因为众所周知的原因，国内访问它不顺畅，最好更换为国内的镜像。

1
2
3
mkdir data
cp themes/hugo-theme-stack/data/external.yaml data/
sed -i 's/jsdelivr.net/jsdmirror.com/g' data/external.yaml

文章最后修改时间问题

更换 hugo 使用之后一切都很顺利，除了，文章最后修改时间的问题：

本来 hugo 是支持自动更新文章的修改时间的，这个逻辑在本地没什么问题，但是通过 Github Action 部署的话会重新拉取文件，导致所有文章的修改时间都变成最新日期。
因此之前我是给文章设置 lastmod 字段，自己手动指定更新时间，但这一来费劲，二来容易忘。

索性这次一并解决了吧。方法参考自：Hugo Stack 主题配置与使用-自动更新文章最后修改时间

思路

利用 git 记录的文件修改时间作为真实更新时间。

config.yaml 配置

添加 lastmod 设置:

1
2
3
4
enableGitInfo: true # use git commit log to generate lastmod record

frontmatter:
    lastmod: [':git', 'lastmod', 'date', 'publishDate']

参数说明：
- :git： git 记录的文件提交修改时间
- lastmod：文章里 lastmod 字段
- :fileModTime：文件修改时间，会受自动部署的影响
- :defalut：默认时间

Github Action 配置

修改 .github/workflows/deploy.yml：
1. 设置时区环境变量，与本地一致，避免时区问题导致更新时间异常
2. checkout 步骤中需要设置 fetch-depth: 0，保证拉取所有历史
3. 需要禁用 quotePath，不关闭的话，当文件名中包含中文的时候，git 会使用双引号把文件名括起来，这会导致 action 中无法读取 :GitInfo 变量，所以需要关闭

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
jobs:
    deploy:
        runs-on: ubuntu-latest
        env:
          TZ: Asia/Shanghai # 添加正确的时区

        steps:
            - name: Checkout
              uses: actions/checkout@v2
              with:
                  submodules: true # clone submodules
                  fetch-depth: 0 # 克隆所有历史信息

            - name: Disable quotePath
              run: git config --global core.quotePath false

            - name: Setup Hugo
              uses: peaceiris/actions-hugo@v2
              with:
                  hugo-version: "0.133.0" # Hugo 版本 latest
                  extended: true # hugo插件版 Stack主题 必须启用

后记

这次更新至少又能挺一年多了不动了吧🤔😛