Astro 添加 Twikoo 评论组件

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

创建 Twikoo 评论组件

<!-- Comment.astro -->
<section class="vh-comment"></section>
<script>
	// 环境id
	const TwikooEnvId = "";
	// 评论组件 dom
	const commentDOM = ".vh-comment";
	document.addEventListener("astro:page-load", async () => {
		if (!document.querySelector(commentDOM) || !TwikooEnvId) return;
		await LoadScript("https://registry.npmmirror.com/twikoo/1.6.41/files/dist/twikoo.all.min.js");
		twikoo.init({ envId: SITE_INFO.Twikoo.envId, el: commentDOM });
	});
	// 加载外部脚本
	const LoadScript = src => {
		return new Promise((resolve, reject) => {
			const script = document.createElement("script");
			script.src = src;
			script.onload = () => resolve(script);
			script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
			document.head.appendChild(script);
		});
	};
</script>

使用 Twikoo 评论组件

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

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