本站资源是站长搜集整理而成，版权均归原作者所有,若无意中侵犯到您的版权利益，请来信联系我们删除！ 本站所有资源只用于研究学习，不得作为商业用途、非法谋取暴利，否则，一切后果均由自己承担！

首页 > 教程

Astro 添加 Waline 评论组件

  • slbcun
  • 2025-04-07
  • 1339 ℃

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 />


TAG: 程序开发 程序源码

上一篇：Safari浏览器内容被地址栏、菜单栏或工具栏遮挡导致的兼容问题

下一篇：Fetch的GET、POST简单HTTP请求封装

相关内容

文章评论 （0）

    • 这篇文章还没有收到评论，赶紧来抢沙发吧~


系统推荐

阅读排行

热门标签

Top