更换博客评论系统：Waline

958 字

5 分钟

更换博客评论系统：Waline

2024-10-07

博客建设

技术

/

Hugo

/

Blowfish

契机#

原本Giscus + Telegram Comments的双评论系统在缝缝补补后也算高度可用，但是最近的一些事件最终促成了我再次更换评论系统。

最重要的，当然是Telegram的创始人帕维尔·杜罗夫在法国被捕，进而引发的Telegram修改隐私政策。虽说修改隐私政策大概率不影响我的使用，但是它让我对隐私有了更深入的思考，一个合格的评论系统能够完成供用户留言的功能，但是需要登录是否收集了一些无用的数据？允许匿名评论或许是我能提供的更好的方案。

其次便是在主题适配方面，即使通过监听html以改变黑暗模式，也很难阻止用户进行非常规的操作，无论我如何修改代码，总能在测试时发现无法覆盖的情况。内心的完美主义作祟，使我很难忍受这种状况外的结果。

于是乎，更换评论系统势在必行了。

启动Waline#

Waline的部署非常方便，而且官方文档¹也非常详尽，只需跟随文档的步骤，Waline很快就能部署成功。

在部署平台的选择上，我没有使用默认的Vercel，而是将其部署在Netlify上。因为Vercel的可访问性相对较差，为了保障体验往往需要绑定自定义域名；相比之下，虽然Netlify的连接也不能算一路畅通，但是基本可以使用，免去了绑定域名的步骤。

一个需要小小注意的地方，Netlify提供的域名并不是我们需要的serverURL，Functions云函数列表中的comment才是服务的所在地。

最终经过一些调整，我得到了评论区的代码：

1
<head>
2
    <link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
3
</head>
4

5
<style>
6
    :root {
7
        --waline-theme-color: rgb(96, 165, 250);
8
        --waline-active-color: rgb(37, 99, 235);
9
    }
10

11
    .dark:root {
12
        --waline-theme-color: rgb(37, 99, 235);
13
        --waline-active-color: rgb(96, 165, 250);
14
    }
15

16
    .wl-editor {
17
        box-sizing: border-box;
18
    }
19

20
    .article-pageview {
21
        display: block;
22
        text-align: end;
23
        margin-top: -2%;
24
        color: var(--waline-light-grey);
25
        font-size: var(--waline-info-font-size);
26
    }
27
</style>
28

29
<body>
30
    <div id="waline"></div>
31
    <time class="article-pageview">
32
        <span class="waline-pageview-count" data-path="{{.RelPermalink}}">0</span> 次浏览
33
    </time>
34
    <script>
35
        function loadWaline() {
36
            import('https://unpkg.com/@waline/client@v3/dist/waline.js').then(({ init }) => {
37
                init({
9 collapsed lines
38
                    el: '#waline',
39
                    serverURL: 'https://xeonzilla-waline.netlify.app/.netlify/functions/comment',
40
                    emoji: false,
41
                    dark: 'html[class="scroll-smooth dark"]',
42
                    requiredMeta: ['nick'],
43
                    search: false,
44
                    pageview: true,
45
                    locale: {
46
                        placeholder: '填写昵称即可匿名评论\n亦可使用第三方账号登录'
47
                    }
48
                });
49
            });
50
        }
51

52
        document.addEventListener('DOMContentLoaded', function () {
53
            if ('IntersectionObserver' in window) {
54
                let observer = new IntersectionObserver(loadComments, {
55
                    root: null,
56
                    rootMargin: '0px',
57
                    threshold: 0.1
58
                });
59

60
                let walineElement = document.getElementById('waline');
61
                observer.observe(walineElement);
62
            } else {
63
                loadWaline();
64
            }
65
        });
66

67
        function loadComments(entries, observer) {
68
            entries.forEach(entry => {
69
                if (entry.isIntersecting) {
70
                    loadWaline();
71
                    observer.unobserve(entry.target);
72
                }
73
            });
74
        }
75
    </script>
76
</body>

当评论区正常工作，可以无需登录评论的时候，感觉这种完全隐匿的感觉好极了。如果所有网站都可以匿名评论，会有多美好！

适配与调整#

不知道是Waline还是Blowfish的问题，默认情况下，评论区的文本框会溢出，为了解决这个问题，需要改变文本框计算宽度时的范围：

16
.wl-editor {
17
    box-sizing: border-box;
18
}

在单独启动Waline测试的时候，Waline占据页面的全部宽度，此时文本框的位置正常。可能是Waline或Blowfish对宽度的设置和判断出现了问题。

文本框溢出

Waline提供了浏览数统计功能，于是我们也可以跟随官方文档在代码中启用，为了让它能够和评论区融为一体，我们直接使用Waline预设的样式：

20
.article-pageview {
21
    display: block;
22
    text-align: end;
23
    margin-top: -2%;
24
    color: var(--waline-light-grey);
25
    font-size: var(--waline-info-font-size);
26
}