抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

嘿嘿,在 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>

查看效果

页面中已经出现评啦!

image

评论