前言
使用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
---
title: 软件
subtitle: "个人常用windows软件清单"
date: 2024-06-02
lastmod: 2024-06-02
author: ""
menu:
main:
weight: -55
params:
icon: soft #引用soft.svg图标
comments: false
---
升级waline评论
从2.15.8升级到3.6.0后,发现回复评论会@原作者两次。排查后发现问题:v2版本把@作者放在评论内容中然后在前端直接展示,而v3@作者是有逻辑处理的,所以导致升级v3后会@两次的。不确定是不是升级服务端有效,反正我也每几条评论所以直接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中从v2数据迁移v3
-- 检查是否有"[@匿名](#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建站的人越来越多,文档教程也越来越丰富。