上干货，在 src/components 组件目录新建一个 Comment.astro 组件，内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| ---
const initTwikoo = `
twikoo.init({
envId: '你的Twikoo环境ID',
el: '#tcomment',
});
`;
---
<style is:global>
.tk-avatar {
align-items: center;
display: flex;
}
</style>
<div class="prose max-w-3xl mx-auto px-4">
<div id="tcomment" class="comment-container"></div>
</div>
<script define:vars={{ initTwikoo }}>
document.addEventListener('astro:page-load', () => {
function loadTwikoo() {
const commentsContainer = document.getElementById('tcomment');
if (commentsContainer) {
const script = document.createElement('script');
script.src = 'https://cdn.staticfile.org/twikoo/1.6.32/twikoo.all.min.js';
script.async = true;
script.onload = () => {
const initScript = document.createElement('script');
initScript.innerHTML = initTwikoo;
document.body.appendChild(initScript);
};
document.body.appendChild(script);
}
}
loadTwikoo();
});
</script>
|
接下来在需要添加评论的页面添加组件即可。
比如在 src/pages/posts/[slug]/index.astro 页面中添加：
1
2
3
4
5
6
| ---
import Comment from '~/components/Comment.astro';
---
<!-- 引入评论组件 -->
<Comment />
|
