博客维护记录：服务迁移、升级主题、增加合集功能、样式调整

博客维护记录：服务迁移、升级主题、增加合集功能、样式调整

趁假期进行了一波维护。主要包括迁移了服务商，升级了hugo和主题版本，另外还修改了一些其他外观样式。

更换服务商

原托管方案

这个博客原先托管在国内某云服务商，COS+CDN，但国内CDN服务商若只开启“境外加速”，一个反直觉（并且不看文档小字根本意识不到）的行为是会导致全球请求都走境外加速线路，包括国内流量，如果在国内访问反而会绕好多圈。

一开始想的解决方法：DNS解析时便可以分流境内外，境外继续CDN，境内直接COS。但是经常看到COS被盗刷产生天价账单的案例，COS无法直接设置根据区间流量阈值关闭访问进行防盗刷，需要配合云函数/观测平台等，太麻烦了。

迁移到CloudFlare

所以干脆直接迁移到CloudFlare，本来担心在国内的访问速度，但是查了一下发现也还可以。

迁移域名：cloudflare添加域输入域名，会给出两个DNS server,去域名注册商设置中修改，然后等一段时间cloudflare识别，cloudflare会自动扫描DNS解析记录并添加。

迁移博客：我选的是配合github私有仓库，创建cloudflare pages，选择hugo模板，默认的Hugo版本可能不是需要的版本，手动设置环境变量：HUGO_VERSION=0.148.2 （默认启用extended版本），然后按指示进行即可。

最后可以重新绑定自定义域名。

效果

原先的方案请求甚至会在境外多个国家反复横跳许多次，延迟高达3000+ms；

仅将域名DNS迁移到CloudFlare，延迟降为～1000ms；

使用CloudFlare Pages托管静态网站，延迟降为～200ms。

原先的每个月费用大约5毛，现在免费；

原先的SSL证书时效90天，需要手动重新申请或者用SDK程序自动申请，非常麻烦，现在完全由CloudFlare托管，十分省心。

原先的方案不支持hugo自动构建，需要本地手动构建后通过（写的很烂的）SDK上传到COS,再触发部署；现在只需要push，hugo构建和部署完全由CloudFlare执行。

FixIt主题升级处理

发现使用的FixIt主题已经更新出到v0.4.0a了。于是从原来v0.2.18-lts5 一步步迁移到v0.3.20，处理了很多breaking change。同时hugo版本跟随升级 (v0.122 -> v0.148)。最重要的改变是增加了合集功能，便于查看相关的文章。

增加并设置合集

现在文章页面可以查看属于同一合集的其他文章。也可查看全部合集。

base64图片显示问题

原版本中base64编码图片无法渲染，需要手动修改主题模板关闭响应式设计，现在已被FixIt Fixed in v0.3.15

首页作者头像显示问题

原版本中首页作者头像在部分文章中无法显示（显示为默认图标），升级中正常，但升级到v0.3.10、 hugo 0.132作者头像消失，（v0.3.9正常）

解决方式： 手动设置 params.author.avatar为头像路径。

菜单首页按钮失效

在某个版本中菜单行为修改,若url没有设置则点击无相应（原行为为返回根路径），导致首页按钮失效。

解决方案：手动设置菜单参数 url='/'。

文章末尾多余的“在编辑器中打开”按钮

解决方案：显式设置如下配置为false：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

[page]#FixIt
	linkToMarkdown = false
    # FixIt 0.3.0 | NEW whether to show link to view source code of the post
    linkToSource = false
    # FixIt 0.3.0 | NEW whether to show link to edit the post
    linkToEdit = false
    # FixIt 0.3.0 | NEW whether to show link to report issue for the post
    linkToReport = false
    # FixIt 0.3.20 | NEW whether to show link to view the post in VSCode
    linkToVscode = false

一级标题自动渲染h2

原来使用自定义css去除内容中的一级标题以避免冲突，fixit的某个版本启用了自动降级，将一级标题渲染为h2。

如果使用h2:first-child css临时替代，则对于没有一级标题、直接使用二级标题开始的文章会有问题。目前手动检查了一遍，所有文章都有一级标题。

FixIt作者已知悉， waiting for patch

其他样式修改

音乐播放器增加loading

FixIt使用的music shortcode内部使用meting-js,会在页面渲染为一个自定义的<meting-js> element.但是内部使用的Aplayer在加载歌单的网络延迟时间不会有占位符，只会显示空白，用户体验不佳。

解决方案： 设置一个占位元素显示loading内容，通过mutationObserver检测meting-js的childList,若Aplayer出现则删除占位元素。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<p id='meting-js-style' style='text-align:center'>
	<span><i class="fa-solid fa-music fa-fw"></i>Loading music player...</span>
</p>
<script>
const meting=document.querySelector('meting-js');
const metingStyle=document.querySelector('#meting-js-style');
console.log(meting);
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes) {
      mutation.addedNodes.forEach((node) => {
        if (node.classList.contains('aplayer')) {
          console.log('Music Player has been loaded!', node);
          metingStyle.remove();
          observer.disconnect();
        }
      });
    }
  });
});
observer.observe(meting, { childList: true});
</script>

增加图片自动居中

使用custom css,略。

加密提示多行无法显示全

使用custom css增加宽度,略。

博客时间线

使用 timeline shortcode 增加了博客时间线。

首页分割线样式

更新后首页分割线太宽太花里胡哨了，一开始以为是hr的样式，后来发现是用after伪元素+padding+background实现的。

选择器：.home.posts .summary:not(:last-of-type)::after，自定义css解决。

自定义404页面

调整了一些样式，增加了一个“搜一下”按钮