hugo博客网站优化

前言

使用hugo搭建博客有段时间了，但是有个问题：hugo + stack主题建站很多资源，包括字体、js等依赖于国外服务，加载起来非常慢，导致“水土不服”。最近看到有大佬做了优化教程，所以跟着教程给我的网站做一次优化。

正文

资源本地化(网站加速)

custom-font字体文件

下载custom-font.css样式文件，放到assets/css/custom-font.css
下载custom-font.css中使用的woff2字体文件，总共有6个放到static/fonts文件夹中
修改custom-font.css文件，将https://fonts.gstatic.com/s/lato/v25/xxxx.woff2替换为/fonts/xxxx.woff2
创建并修改layouts/partials/footer/components/custom-font.html

{{ $customFont := resources.Get "css/custom-font.css" | minify | fingerprint }}
<script>
    (function () {
        const customFont = document.createElement('link');
        customFont.href = "{{ $customFont.RelPermalink }}";

        customFont.type = "text/css";
        customFont.rel = "stylesheet";

        document.head.appendChild(customFont);
    }());
</script>

vibrant.min.js等脚本文件

下载vibrant.min.js文件，放到static/js/vibrant.min.js
创建并修改data/external.yaml

 Vibrant:
    - src: /js/vibrant.min.js
 #     integrity: sha256-awcR2jno4kI5X0zL8ex0vi2z+KMkF24hUW8WePSA9HM=
      type: script

PhotoSwipe:
    - src: https://unpkg.com/photoswipe@4.1.3/dist/photoswipe.min.js
      integrity: sha256-ePwmChbbvXbsO02lbM3HoHbSHTHFAeChekF1xKJdleo=
      type: script
      defer: true

    - src: https://unpkg.com/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js
      integrity: sha256-UKkzOn/w1mBxRmLLGrSeyB4e1xbrp4xylgAWb3M42pU=
      type: script
      defer: true

    - src: https://unpkg.com/photoswipe@4.1.3/dist/default-skin/default-skin.css
      type: style

    - src: https://unpkg.com/photoswipe@4.1.3/dist/photoswipe.css
      type: style

KaTeX:
    - src: https://unpkg.com/katex@0.16.9/dist/katex.min.css
      integrity: sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV
      type: style

    - src: https://unpkg.com/katex@0.16.9/dist/katex.min.js
      integrity: sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8
      type: script
      defer: true

    - src: https://unpkg.com/katex@0.16.9/dist/contrib/auto-render.min.js
      integrity: sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05
      type: script
      defer: true

Cactus:
    - src: https://latest.cactus.chat/cactus.js
      integrity:
      type: script
    - src: https://latest.cactus.chat/style.css
      integrity:
      type: style

菜单栏增加项目

从tabler.io网站挑选合适的svg图片，放到assets/icons/中，如：assets/icons/soft.svg
在page/目录下创建目录文件夹及index.md，如：page/soft/index.md 和 page/soft/index.zh-cn.md
修改index.md 和 index.zh-cn.md

---
title: 软件
subtitle: "个人常用windows软件清单"
date: 2024-06-02
lastmod: 2024-06-02
author: ""
menu:
    main: 
        weight: -55
        params:
            icon: soft  #引用soft.svg图标
comments: false
---

升级waline评论

waline从v2.15.8升级到v3.6.0后，发现回复评论会@两次原作者。排查后发现问题：v2.15.8版本把@原作者存放在评论内容中然后直接展示评论内容，而v3.6.0版本@原作者是有逻辑处理的，所以导致升级v3.0.6后会@两次的现象。我不确定是不是升级后端服务能解决，反正我网站也没几条评论所以直接deepseek写个update语句搞定，最后的升级方案：

在layouts/partials/comments/provider/waline.html保存失迹的博客大佬修改版本waline.html

<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css"/>
<div id="waline" class="waline-container"></div>
<style>
    .waline-container {
        background-color: var(--card-background);
        border-radius: var(--card-border-radius);
        box-shadow: var(--shadow-l1);
        padding: var(--card-padding);
        --waline-font-size: var(--article-font-size);
    }
    .waline-container .wl-count {
        color: var(--card-text-color-main);
    }
</style>

{{- $showReaction := (default true .Params.reaction) -}}
{{- with .Site.Params.comments.waline -}}
{{- $config := dict "el" "#waline" "dark" `html[data-scheme="dark"]` -}}
{{- $replaceKeys := dict "serverurl" "serverURL" "requiredmeta" "requiredMeta" "wordlimit" "wordLimit" "pagesize" "pageSize" "imageuploader" "imageUploader" "texrenderer" "texRenderer" "commentsorting" "commentSorting" "recaptchav3key" "recaptchaV3Key" "turnstilekey" "turnstileKey" -}}
{{- $replaceLocaleKeys := dict "reactiontitle" "reactionTitle" "gifsearchplaceholder" "gifSearchPlaceholder" "nickerror" "nickError" "mailerror" "mailError" "wordhint" "wordHint" "cancellike" "cancelLike" "cancelreply" "cancelReply" "uploadimage" "uploadImage" -}}

{{- range $key, $val := . -}}
    {{- if ne $val nil -}}  
        {{- $replaceKey := index $replaceKeys $key -}}
        {{- $k := default $key $replaceKey -}}

        {{- if eq $k "locale" -}}
            {{- $locale := dict -}}
            {{- range $lkey, $lval := $val -}}
                {{- if ne $lval nil -}}  
                    {{- $replaceLKey := index $replaceLocaleKeys $lkey -}}
                    {{- $lk := default $lkey $replaceLKey -}}

                    {{- $locale = merge $locale (dict $lk $lval) -}}
                {{- end -}}
            {{- end -}}
            {{- $config = merge $config (dict $k $locale) -}}
        {{- else if eq $k "reaction" -}}
            {{- $config = merge $config (dict $k (cond $showReaction $val false)) -}}
        {{- else -}}
            {{- $config = merge $config (dict $k $val) -}}
        {{- end -}}
    {{- end -}}
{{- end -}}

<script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
    init({{ $config | jsonify | safeJS }});
</script>
{{- end -}}

sqlite3数据库迁移

-- 检查是否有"[@匿名](#19):xxxx"数据
SELECT 
    comment,
    CASE 
        WHEN comment LIKE '[%]:%' THEN
            SUBSTR(comment, INSTR(comment, ']:') + 2)
        WHEN comment LIKE '[%:%' THEN
            SUBSTR(comment, INSTR(comment, ':') + 1)
        ELSE comment
    END AS new_comment
FROM wl_comment
WHERE comment LIKE '[%:%';

-- 更新数据
UPDATE wl_comment 
SET comment = CASE 
    WHEN comment LIKE '[%]:%' THEN
        SUBSTR(comment, INSTR(comment, ']:') + 2)
    WHEN comment LIKE '[%:%' THEN
        SUBSTR(comment, INSTR(comment, ':') + 1)
    ELSE comment
END
WHERE comment LIKE '[%:%';

文章末尾添加赞赏

给hugo博客添加赞赏支持功能，支持微信和支付宝作者写的非常详细，按教程无脑操作。

总结

最近发现使用hugo建站的人越来越多，文档教程也越来越丰富。

参考

使用hugo-stack搭建博客
 使博客更好地接入 Waline
给hugo博客添加赞赏支持功能，支持微信和支付宝