建站技术 | 使博客更好地接入 Waline
2024年7月19日 17:57
前言
近期为我的网站进行了一次整体的升级，修复了个人主页和云盘的诸多 bug，新增了更多功能。其中包括优化 Waline 的使用，在这里记录下来以供他人参考。
这里我使用的是 Hugo 以及 stack 主题，使用其他方式的可以更多的参考 waline 的官方文档。
迁移到最新版本 Waline
客户端
由于 stack 模板中所接入的 waline 版本为 V2，或者像我一样从更远古的版本就开始魔改的话引入的是 V1，因此这里我们先来迁移到 V3 版本。
直接按照官方文档中的引入方式修改代码即可，这里贴上我将 stack 模板修改后的代码。
layouts\partials\comments\provider\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) -}}...剩余内容已隐藏
查看完整文章以阅读更多
建站技术 | 使博客更好地接入 Waline
2024年7月19日 17:57
前言
近期为我的网站进行了一次整体的升级，修复了个人主页和云盘的诸多 bug，新增了更多功能。其中包括优化 Waline 的使用，在这里记录下来以供他人参考。
这里我使用的是 Hugo 以及 stack 主题，使用其他方式的可以更多的参考 waline 的官方文档。
迁移到最新版本 Waline
客户端
由于 stack 模板中所接入的 waline 版本为 V2，或者像我一样从更远古的版本就开始魔改的话引入的是 V1，因此这里我们先来迁移到 V3 版本。
直接按照官方文档中的引入方式修改代码即可，这里贴上我将 stack 模板修改后的代码。
layouts\partials\comments\provider\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) -}}...剩余内容已隐藏
查看完整文章以阅读更多