VitePress集成Twikoo评论

2025年07月30日 77

随记

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') {
    try {
      const twikoo = await import('twikoo')
      console.log('Twikoo loaded successfully')
      await twikoo.init({
        envId: 'https://tw.xxx.com/', // 请替换为您自己的Twikoo服务地址
        el: '#twikoo'
      })
      console.log('Twikoo initialized successfully')
    } catch (err) {
      console.error('Twikoo initialization failed:', err)
    }
  }
}

// 监听路由刷新评论
watch(route, () => {
  initTwikoo()
})

// 组件挂载时初始化
onMounted(() => {
  initTwikoo()
})
</script>

3.插入layout插槽

<script setup lang="ts">
import ThemeAsync from 'vitepress-theme-async'//这里是我用的主题，默认主题为import DefaultTheme from 'vitepress/theme'
import Twikoo from './Twikoo.vue' //评论组件

const { Layout } = ThemeAsync
</script>

<template>
  <Layout>
    <template #post-after> //同上，默认为#doc-after
      <div class="post-after">
        <Twikoo></Twikoo>
      </div>
    </template>
    <template #links-after>
      <div class="post-after">
        <Twikoo></Twikoo>
      </div>
    </template>
    
  </Layout>
</template>

4.导入布局

import ThemeAsync from 'vitepress-theme-async';
import Layout from './Layout.vue'
export default {
    ...ThemeAsync,
    Layout,
}