记录-NotionNext博客添加Twikoo评论插件

URL

type

status

date

slug

summary

📝 部署

数据库(MongoDB)

Tips

数据库主要用于存储用户评论以及数据仓库管理员密码。

Twikoo官方文档推荐使用MongoDB数据库，这里博主也就使用该数据库了（主要也没尝试配置过其他数据库 😂😂）。

在这里，博主简单说一下创建数据库的注意事项，创建流程请查阅Twikoo官方文档。

注意事项：

1、按照官方文档一定要将以下这段语句复制下来。(一般创建完数据库用户，复制该语句时，<username>已经自动转换为数据库用户名。例如:twikoo)

Twikoo

Tips

Twikoo根据Twikoo的官方文档一键式部署。如果想绑定自定义域名，可以参考该博客。

Twikoo的一键式部署，一般不会遇到什么问题，都可以部署成功，最主要的配置内容。

个人建议：

1、如果是在Vercel上部署Twikoo，我觉得没有必要绑定自定义域名。因为，Twikoo的域名只在Vercel的环境变量中用到，完全可以使用自带的域名。

2、如果你的是自建服务器或者云部署Twikoo,为了防止暴露IP可以绑定自定义域名。

🤗 配置

Twikoo配置

1、Twikoo连接数据库

首先进入Vercel部署的Twikoo界面，接着点击Settings，再接着点击Environment Variables，然后在Key中输入MONGODB_URI，在Value输入你在MongoDB中复制的那句话,最后点击Save。

按照上诉步骤，配置完成结果如下

2、设置允许跨域

Tips

因为博主Vercel部署的博客绑定了自定义域名，所以需要设置Twikoo允许跨域连接。

配置方式和上述相同。在Key中添加TWIKOO_CORS_ALLOW_ORIGIN，在Value中添加自定义域名(eg:https://www.yourname.com)。

3、重新部署

点击带有Current标记。

博客配置(前提:NotionNext博客)

1、配置Twikoo的环境ID

配置方法依然和上述的相同，在Key中填入NEXT_PUBLIC_COMMENT_ENV_ID，在Value中填入Twikoo的自带域名。

Twikoo的自带域名查询如下，使用Domains下带有.vercel.app尾缀的域名。注意：在复制粘贴的时候，请检查url前是否有https://。如果没有可能重新部署NotionNext后，显示没有配置Twikoo的环境ID。

2、重新部署

和上诉重新部署方法相同，不做重复记录。

🤗 测试

1、Twikoo是否部署成功

有以下内容显示，便是部署成功。

2、点开网站，显示评论框，但无法评论总是报错

windows系统的浏览器点击F12，开启开发者工具，查看具体错误。

1）错误一

Access to XMLHttpRequest... has been blocked by CORS policy Twikoo: 评论失败 0 Uncaught (in promise) 0

该错误说明在Twikoo配置中，没有成功配置跨域连接。

1）解决方法

module.exports = async function (req, res) {
// 设置允许跨域访问
res.setHeader('Access-Control-Allow-Origin', '自定义网站域名') // 推荐开发时用 *，生产可改为你的网站域名
res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS')
res.setHeader('Access-Control-Allow-Headers', 'Content-Type')// 处理 OPTIONS 预检请求（CORS 规范需要）
if (req.method === 'OPTIONS') {
   res.status(200).end()
   return
}// 调用 Twikoo 原始处理函数
return handler(req, res)
}

将上诉代码复制到GitHub的index.js中。位置api/index.js。