嘿嘿，在 nuxt3 中使用 Twikoo 原来如此简单！

第一步 部署

参照官网部署即可

官方部署文档

第二步 CDN 引入 JS 文件

打开配置文件 nuxt.config.ts,引入 Twikoo JS 文件！

1
2
3
4
5
6
7
8
9
10
11
12
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://cdn.staticfile.org/twikoo/1.6.16/twikoo.all.min.js",
        },
      ],
    },

  },
});

第三步 进入页面初始化

进入需要进行评论功能的页面，具体配初始化如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script lang="ts">
export default defineComponent({
  mounted() {
    twikoo.init({
      envId: "xxx", // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
      el: "#tcomment", // 容器元素
      // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
      path:
        location.pathname + "?id=" + this.$router.currentRoute.value.query.id, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
      lang: "zh-CN", // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
    });
  },
});
</script>