比其他记录先来的竟是装修记录

只是来炫耀桌宠的

比其他记录先来的竟是装修记录

但其实这件事的优先级不是最高。只是我突然有这想法了。

image.png

这是我博客之前的样子。有没有觉得右下角空空荡荡的？

之前其实有想过，要是我哪天乐意折腾自己，我就放个L2d模型上去。但是我这几天真看了L2d教程之后又觉得有点太折腾了。于是乎就决定退而求其次，平面立绘足矣。

如果有人好奇L2d教程。

其二

以上是放弃的第一个原因：有点折腾了

放弃的第二个原因：L2d约稿的价格很高。当然我可以约一个立绘然后自己手搓。但我一直都不确定这个博客我会运营到什么时候（虽然已经运营了很久）。但要是真的某一天我把它搁置了，那高价+折腾装修换来的L2d模型放在这也是真的可惜了。

第三个原因：对着gpt老师一顿狂问之后得知平面立绘也可以做一些简单的动画效果上去。那么显然放平面立绘是性价比更高的选择。

于是乎进入教程部分。

步骤：

1.打开米画师约稿。

2.打开：https://chatgpt.com/，问就完事了。

（……总感觉很值得吐槽啊）（博客白痴和画画白痴也能做博客放立绘。现代社会还是太美好了）

步骤2.详细记录一下。Gpt老师给了如下方案：

1.在static文件夹下新建images文件夹

然后约好的立绘：home-corner.png放进去。

然后在layouts/partials/footer/custom.html安排代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<style>
    .home-corner-image {
        position: fixed;
        right: 30px;
        bottom: 20px;
        width: 160px;
        height: auto;
        z-index: 999;
        pointer-events: none;
    }
</style>

<img
    class="home-corner-image"
    src="/images/home-corner.png"
    alt=""
>

就ok了。

Gpt老师这次在给本代码盲扫盲的时候引入了思维导图。不得不说看的还是很舒服一目了然的。以后上课如果能用上也要勤用思维导图。

开始愉快地修改css

要求给gpt，然后复制黏贴之。

这次装修从约稿到让Gpt写代码我都是纯享甲方体验。很舒服。如果能当一辈子甲方就好了。

想要的效果：上下浮动，鼠标过去的时候放大。

代码：

 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<style> 
    .home-corner-image { 
        position: fixed; 
        right: 30px; 
        bottom: 20px; 
        width: 160px; 
        height: auto; 
        z-index: 999; 
        pointer-events: auto;

        /* 轻微上下漂浮 */
        animation: home-corner-float 3.5s ease-in-out infinite;

        /* 悬停时平滑变化 */
        transition: transform 0.25s ease;
    }

    /* 鼠标移到角色上 */
    .home-corner-image:hover {
        transform: translateY(-5px) scale(1.1);
    }

    /* 漂浮动画 */
    @keyframes home-corner-float {
        0%, 100% {
            translate: 0 0;
        }

        50% {
            translate: 0 -8px;
        }
    }

    /* 手机端 */
    @media (max-width: 768px) {
        .home-corner-image {
            width: 110px;
            right: 10px;
            bottom: 10px;
        }
    }
</style> 
 
<img 
    class="home-corner-image" 
    src="/images/home-corner.png" 
    alt="" 
>

嗯然后就是如今的效果了！现在左边栏右边栏都很充实了，满足之。

image1.png

（其实本人的博客还是比较毛胚房的，我还是不用“极简主义”这个词给自己贴金了，但是目前的效果我自己挺满意的。也就行了）

这才是真要紧事（虽然也还有半年时间吧）

甚至上面那部分写好了我才开始搞这个。

Waline评论区数据库迁移

天惹，甚至在看到爱海的博客之前我完全不知道这件事。

搬家步骤按部就班地走就行，先在waline后台导出旧的评论数据，然后按着官方给的教程创建tidb数据库。在vercel部署好新的环境变量后，删掉原来的leancloud变量让waline连接到tidb。再把数据导入回去就行。

理论上很快就好了。但实际上我因为漏看了一个地方导致最终还是花了点时间。

image2.png

这里的database一定要选到waline再去部署环境变量。我一开始直接无视这四个就去配置了导致waline疯狂读取空空荡荡的数据库。

讲点琐碎话之waline现在也是城里人了

由于我的评论区比爱海博客的评论区迟搬家很多，所以waline在这两次搬家之间做了次很大的整容手术。

旧外观

image3.png

新外观：

image4.png

fancy了好多啊！

紧急查漏补缺

博客标题和页面底部的kudos突然出现了一些问题。紧急修好之后让gpt总结了一下为啥坏了以及如何修好的，获得记录如下：

Hugo Stack + PJAX 导致 Kudo 首次进入文章无法使用

问题现象

博客使用 Hugo Stack 主题，并通过 PJAX 实现站内无刷新跳转。

一段时间后发现 Kudo 点赞组件出现异常：

  • 从博客首页直接点击进入文章时，底部可以看到 Kudo 的 ❤️ 图标；
  • 但是已有点赞数不会显示；
  • ❤️ 也无法点击互动；
  • 手动刷新（F5）文章后，点赞数正常显示，点赞功能也恢复正常；
  • 手机端最初没有明显问题；
  • 博客站内 PJAX 切换本身正常，文章内容可以正常加载。

同时发现另一个问题：PJAX 切换文章后，浏览器标签页标题仍然显示上一文章的标题。

问题原因

博客使用了 PJAX：

1
2
3
4
5

var pjax = new Pjax({
  selectors: [
    ".main-container",
  ]
})

这意味着 PJAX 只会替换 .main-container 内的内容。

后来发现浏览器标题没有随着文章切换更新，因此将配置修改为：

1
2
3
4
5
6

var pjax = new Pjax({
  selectors: [
    "title",
    ".main-container",
  ]
})

标题问题随之解决。

Kudo 的问题则来自另一个类似的原因。

原本 Kudo 的 reaction.html 中同时包含：

1
2
3

<open-heart ...></open-heart>

<script src="https://unpkg.com/open-heart-element" type="module"></script>

以及初始化脚本。

而 reaction.html 位于：

1

themes/hugo-theme-stack/layouts/partials/article/components/reaction.html

这个组件属于 .main-container 的内容，因此在 PJAX 进入文章时会一起被替换。

结果就是：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

首页
 ↓
PJAX 进入文章
 ↓
新的 <open-heart> 被插入
 ↓
open-heart-element 的加载/初始化时机出现问题
 ↓
❤️ 外观存在
 ↓
但组件没有正常初始化
 ↓
无法读取点赞数，也无法点击

而完整刷新页面时，浏览器会按照正常的脚本加载顺序重新加载整个页面，因此 Kudo 又恢复正常。

解决方法

将 Kudo 的组件本体和组件脚本/初始化代码分开。

1. reaction.html 只保留 Kudo 本体

文件：

1

themes/hugo-theme-stack/layouts/partials/article/components/reaction.html

最终内容：

1

<open-heart href="https://kudoo.1171574723.workers.dev/{{ .Permalink }}" emoji="❤️">❤️</open-heart>

不再在这里加载 open-heart-element。

2. 在不会随文章 PJAX 替换的 custom.html 中加载组件

将以下代码加入负责 PJAX 的那个 custom.html 的底部：

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

<!-- Kudo / Open Heart -->
<script src="https://unpkg.com/open-heart-element" type="module"></script>

<script>
  function initOpenHeart() {
    window.customElements.whenDefined('open-heart').then(() => {
      document.querySelectorAll('open-heart').forEach(oh => {
        if (typeof oh.getCount === 'function') {
          oh.getCount();
        }
      });
    });
  }

  // 首次完整加载
  initOpenHeart();

  // PJAX 切换文章后重新初始化
  document.addEventListener('pjax:complete', function () {
    initOpenHeart();
  });
</script>

这样 open-heart-element 在全站加载，而每次 PJAX 切换文章后，再主动对新出现的 <open-heart> 执行 getCount()。

最终结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

custom.html
│
├── Pjax
├── Waline
├── 音乐播放器
├── Stack 初始化
├── topbar
└── Open Heart
     ├── 加载 open-heart-element
     └── PJAX 完成后重新初始化
     
reaction.html
└── <open-heart>

最终效果

修复后：

  • 首页 → 文章：Kudo 正常
  • 不需要 F5
  • 已有点赞数正常显示
  • ❤️ 可以正常点击
  • 文章之间 PJAX 切换后 Kudo 仍然正常
  • 浏览器标签页标题也会随着文章切换更新
  • 桌宠无需修改

经验记录

以后给 Hugo Stack 添加第三方 Web Component 时，如果组件需要 JavaScript 初始化，不要把组件的加载脚本和初始化逻辑直接放在会被 PJAX 替换的文章内容里。

更稳妥的方式是：

组件 HTML 放在文章模板中，组件 JS 在全局加载；PJAX 完成后重新初始化组件。

天哪！上面这段是我博客里100%ai生成的内容！这都不肯自己写！真是堕落啊。（主要是没啥风波我也就没啥感想。唯一的有趣之处就是我在问ai怎么修的时候ai参考了爱海的博客…….天堂错误文件堂堂上电视！）

❤️
© 2023 - 2026 Ciri
记录希望的影像
Built with Hugo
主题 Stack 由 Jimmy 设计