.𝙃𝙖𝙣

Astro 添加 Waline 评论组件

2025-03-25 下午 181字 0.9分钟 Code

Astro 在使用视图过渡路由时，在跳转路由时，会导致 JS 文件只有在第一次进入页面时生效，所以 Astro 在使用视图过渡路由下 Waline 时无法正常使用的，我是单独写了一个评论组件，对 Waline 进行动态加载，然后在需要评论的页面引入的。

创建 Waline 评论组件

# 安装依赖
npm i @waline/client

<!-- Comment.astro -->
<section class="vh-comment"></section>
<script>
	// 服务地址 URL
	const WalineServerURL = "";
	// 评论组件 dom
	const commentDOM = ".vh-comment";
	document.addEventListener("astro:page-load", async () => {
		if (!document.querySelector(commentDOM) || !WalineServerURL) return;
		import("@waline/client/waline.css");
		import("@waline/client/waline-meta.css");
		const { init } = await import("@waline/client");
		init({ el: commentDOM, serverURL: WalineServerURL });
	});
</script>

使用 Waline 评论组件

<!-- Article.astro -->
---
import Comment from '@/components/Comment.astro';
---

<!-- 引入评论组件 -->
<Comment />