VitePress 集成 twikoo 参考解决方案

[ChaiByte]

我尝试将 twikoo 集成到我的 VitePress 项目，踩了一些坑，目前的可行方案如下：

1. 引入 twikoo

我的初衷是所有的 JS/CSS 文件都不使用 CDN（假定 CDN 会暴毙），所以想了想用包管理工具作为依赖安装的方式，这样对于我的部署在 Cloudflare Pages 的项目来说会更加稳定。（我用的 pnpm 包管理，其它人看情况跑命令，如指定版本等）

pnpm install twikoo

2. 写一个 Twikoo.vue 评论组件：

👍 也可参考 Twikoo 文档的组件：https://github.com/twikoojs/twikoo/issues/715#issuecomment-2164261358 （这个实现是通过 CDN 引入的，主要参考如何初始化 js）

<script setup lang="ts">
import { onMounted, nextTick } from 'vue';

onMounted(async () => {
  await nextTick();

  // 为什么这里需要判断 window 是否存在？
  // twikoo 库在运行时尝试访问 navigator 对象
  // vitepress 会在 ssr 时运行 twikoo 代码，导致 navigator 未定义
  // 所以需要在浏览器环境下才加载 twikoo, 避免 ssr 时报错
  if (typeof window !== 'undefined') {
    const twikoo = await import('twikoo');
    twikoo.init({
      envId: 'https://{替换成你的 worker 地址}.workers.dev',
      el: '#tcomment',
    });
  }
});
</script>

<template>
  <div id="tcomment"></div>
</template>

3. 把组件插入到你想要放的位置，以注册全局组件为例：

我的 index.ts 仅供参考，我自己拓展了默认主题：

import Twikoo from './components/Twikoo.vue';

export default {
  Layout: DefaultLayout,
  enhanceApp({ app, router, siteData }) {
    app.component("Twikoo", Twikoo);
  },
} satisfies Theme;

我的 PostLayout.vue 仅供参考：

<script setup lang="ts">
import PostHeader from './PostHeader.vue';
</script>

<template>
    <div class="post">
        <PostHeader />
        <slot />
    </div>

    <div class="comments">
        <Twikoo />
    </div>
</template>