Astro 博客使用 Svelte 接入 Waline

各位好。

之前咱做出了一个决定，就是将评论区从 Artalk 换到 Waline，这主要还是因为 Artalk 作者已经长期不维护了。

可能是忙于工作吧，但总而言之就是不维护了，然后咱就看到了 Waline 现在仍然还在维护，而且还支持 IPv6 属地等，因此咱就决定换到 Waline。

部署 Waline#

参考独立部署。

这其实并不是本篇博客的主题，所以就不多说了，可能以后会写吧（）。

接入 Waline#

接入 Waline 和接入 Artalk 的方式差不多，咱看了一下博客主题的接入方式，发现是通过 unpkg 导入的。

说实话，我对这种方式并不是很喜欢，可能突然有一天就不让你用了！所以还是自己托管比较舒服一些。

然后呢我也参考了一些其他博客的部署方式（.astro 文件），但还是有一些奇奇怪怪的诡异问题，所以咱就打算使用 Svelte 接入。

安装 Client 包#

使用自托管的方式接入 Waline 的话是需要安装一个 npm 包的。

运行：

1
pnpm i @waline/client

Client 包是需要打包在内的，所以说不需要加 -D 。

Svelte 实现#

Svelte 是原生支持生命周期的，因此还可以添加一个销毁事件，下面是我的实现：

1
<script lang="ts">
2
    import { commentConfig } from "@/config";
3
    import { init } from '@waline/client';
4
    import '@waline/client/waline.css';
5
    import { onMount, onDestroy } from 'svelte';
6

7
    interface Props {
8
        path: string;
9
    }
10

11
    const {
12
        path,
13
    }: Props = $props();
14

15
    let walineInstance;
16

17
    onMount(() => {
18
        walineInstance = init({
19
            serverURL: commentConfig.waline?.serverURL as string,
20
            lang: commentConfig.waline?.lang as string,
21
            emoji: commentConfig.waline?.emoji,
22
            login: commentConfig.waline?.login,
23
            reaction: commentConfig.waline?.reaction,
24
            search: commentConfig.waline?.search,
25
            recaptchaV3Key: commentConfig.waline?.recaptchaV3Key,
26
            imageUploader: commentConfig.waline?.imageUploader,
27
            locale: commentConfig.waline?.locales,
28
            requiredMeta: ['nick', 'mail'],
29
            el: "#waline",
30
            path: path,
31
            dark: "html.dark",
32
            wordLimit: [2, 600],
33
            ...(commentConfig.waline?.visitorCount ? { pageview: true } : {}),
34
        });
35
    });
36

37
    onDestroy(() => {
38
        walineInstance?.destroy();
39
    });
40
</script>
41

42
<div id="waline"></div>
43

44
<style>
45
    :root {
46
        --waline-theme-color: var(--primary) !important;
47
        --waline-active-color: var(--primary) !important;
48
    }
49

50
    :root.dark {
51
        --waline-bg-color: rgba(0, 0, 0, 0) !important;
52
        --waline-color: var(--content-meta) !important;
53
        --waline-info-color: var(--color-neutral-500) !important;
54
    }
55

56
    :global(.wl-editor),
57
    :global(.wl-link),
58
    :global(.wl-mail),
59
    :global(.wl-nick) {
60
        background: transparent !important;
61
        border-radius: 10px !important;
62
        border: var(--waline-border) !important;
63
        border-color: transparent !important;
64
    }
65

66
    :global(.wl-editor) {
67
        padding: 0 0 0 4px !important;
68
    }
69

70
    :global(.wl-editor):focus,
71
    :global(.wl-link):focus,
72
    :global(.wl-mail):focus,
73
    :global(.wl-nick):focus {
74
        background: transparent !important;
75
        border-color: var(--primary) !important;
76
    }
77

78
    :global(.wl-preview),
79
    :global(.wl-count),
80
    :global(.wl-reaction-title) {
81
        color: var(--btn-content) !important;
82
    }
83

84
    /*:global(html.dark .wl-gif-popup input)::placeholder {*/
85
    /*  color: var(--color-neutral-100);*/
86
    /*}*/
87
</style>

请不要过多在意咱的配置合并方式，临时这么写的（）。

结束#

就写到这里吧，咱感觉没什么好写的吧。

博客因为备案暂时关闭评论

部署 Waline#

接入 Waline#

安装 Client 包#

Svelte 实现#

结束#

支持与分享

目录