如何将VitePress与Twikoo评论无缝集成？
摘要：Twikoo 是一个简洁、安全、免费的静态网站评论系统。 主要特点：免费搭建，部署简单，功能很完善，隐私护安全，通知发邮件，管理有内嵌，总之免费又方便 关于后端部署，大家可以看官网，或者这篇 VitePress 资源汇总 - 使用 Twik
Twikoo 是一个简洁、安全、免费的静态网站评论系统。
主要特点：免费搭建，部署简单，功能很完善，隐私护安全，通知发邮件，管理有内嵌，总之免费又方便
关于后端部署，大家可以看官网，或者这篇 VitePress 资源汇总 - 使用 Twikoo 评论系统。
推荐使用 Vercel 部署 (免费，需配置域名加速访问) 或者 Netlify 部署（免费）。
这篇主要讲 Vitepress 前端如何集成。
预览
集成步骤
1. 安装 twikoo
pnpm install twikoo
2. 初始化 twikoo 组件
<template>
<div id="twikoo"></div>
</template>
<script setup lang="ts">
import { onMounted, watch } from 'vue'
import { useRoute } from 'vitepress'
const route = useRoute()
const initTwikoo = async () => {
// 判断是否在浏览器环境中
if (typeof window !== 'undefined') {
const twikoo = await import('twikoo')
twikoo.init({
envId: 'https://twikoo.xxx.com/', // 换成你自己配置的域名
el: '#twikoo'
})
}
}
// 监听路由刷新评论
watch(route, () => {
initTwikoo()
})
onMounted(() => {
initTwikoo()
})
</script>
3. 组件插入 Layout 插槽
<script setup lang="ts">
import DefaultTheme from 'vitepress/theme'
import Twikoo from './Twikoo' //评论组件
</script>
<template>
<DefaultTheme.Layout>
<template #doc-after>
<Twikoo />
</template>
</DefaultTheme.Layout>
</template>
美化样式
1. 配置 twikoo
twikoo 配置面板里的插件页签，选择代码高亮主题 coy，代码复制插件 copyButton。
2. 自定义 css
以下代码中使用的部分变量，可利用开发者工具在本站查找或自己配置。