type
status
date
slug
summary
tags
category
icon
password
在上一期里,我们搭建起了基于Notion的博客站点
默认的话,是不支持文章评论的
那么这一期将介绍如何开启评论插件
我这里和原作者一样,使用的是Twikoo
Twikoo支持支持即时通知反垃圾插件、隐私设置等功能,无需另外登录后台
twikoo
twikoojs • Updated Dec 4, 2023
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F34d56ac2-399a-4818-9bb0-ba8cf778caf4%2FUntitled.png?table=block&id=0eeb9c32-0bb0-4839-a7ec-ce492700a0f4&t=0eeb9c32-0bb0-4839-a7ec-ce492700a0f4&width=896&cache=v2)
在网页上既可进行管理后台
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F347de522-477a-44d4-824f-0afc45eebdea%2FUntitled.png?table=block&id=16df49cf-7161-4abd-b48b-d055d772550d&t=16df49cf-7161-4abd-b48b-d055d772550d&width=877&cache=v2)
如果需要其他评论插件介绍,可前往下面链接查看:
下面我们继续在Vercel上部署Twikoo
1.创建MongoDB数据库
这是Twikoo要用到的数据库,我们可以使用免费的在线MongoDB数据库
1.1 注册账号:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb607be77-0d96-4dd0-9a25-38143fba2d6c%2FUntitled.png?table=block&id=b8886458-505d-4813-b561-30fbd80ad767&t=b8886458-505d-4813-b561-30fbd80ad767&width=1888&cache=v2)
这里选择免费计划以及选择你喜欢的的数据库提供商和地域
我这里选的是 AWS的香港机房数据库
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F487cd63e-b011-4765-81c7-b86e7cc03471%2FUntitled.png?table=block&id=70728b5c-9c5a-49e8-998b-8ad08a590d8f&t=70728b5c-9c5a-49e8-998b-8ad08a590d8f&width=1301&cache=v2)
创建好数据库后,下一步这里一定需要牢记你的
Username
和 Password
,后面忘记了的话,会很麻烦![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9dfc34fd-efae-4fb3-9360-9ced93b417d6%2FUntitled.png?table=block&id=c4d428c7-cefe-4a68-a059-d3ba2ee0cd1a&t=c4d428c7-cefe-4a68-a059-d3ba2ee0cd1a&width=1475&cache=v2)
1.2 获取数据库链接地址
首先要设置允许和数据库建立连接的ip地址
这里设置允许所有ip都能访问:0.0.0.0/0
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa940d16c-f306-4144-b9e5-90963a34d1df%2FUntitled.png?table=block&id=f67085d6-1837-4043-8bae-464465015b50&t=f67085d6-1837-4043-8bae-464465015b50&width=1333&cache=v2)
选择Connect找到连接配置:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F1c8e6ef3-5a85-4301-8d6f-232fe1076bbc%2FUntitled.png?table=block&id=c1ba4899-4806-4904-8c6c-0c3f10f53d64&t=c1ba4899-4806-4904-8c6c-0c3f10f53d64&width=1914&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F38baa02a-ab8b-4c68-b21c-6fe7830111a9%2FUntitled.png?table=block&id=1ec269e9-b7af-4613-8b9a-14ebac109ce1&t=1ec269e9-b7af-4613-8b9a-14ebac109ce1&width=1385&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F17d8cdd1-5b2f-49cb-8d80-3098199b3f85%2FUntitled.png?table=block&id=4573a95c-0779-4c91-838b-8cd4a1de5c90&t=4573a95c-0779-4c91-838b-8cd4a1de5c90&width=825&cache=v2)
将中间那一长串复制,并将中间的
<password>
更改为你自己的账号密码,记下来这一段后面要用2. Vercel部署Twikoo
Vercel部署的话非常方便
这里是官方的部署说明:
2.1 点击下方链接一件部署
该链接实际上就是将Twikoo从GitHub导入到Vercel进行部署
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F3981ae1f-f37c-494c-a3fb-31067a5b6c6f%2FUntitled.png?table=block&id=40e9a1f4-149f-431c-a541-2420d437e561&t=40e9a1f4-149f-431c-a541-2420d437e561&width=928&cache=v2)
直接点击
Create
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F358bff8b-f825-4d46-8e76-addf26bcaf22%2FUntitled.png?table=block&id=926d2c2b-8fcb-4b24-a6f7-c8be5d352f43&t=926d2c2b-8fcb-4b24-a6f7-c8be5d352f43&width=1433&cache=v2)
等待部署完成,你会看到如下显示的页面
这里是提示需要配置 MongoDB数据库地址
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F4fe0a3b3-912c-44c3-a588-16997ea17d60%2FUntitled.png?table=block&id=86102d8f-bb2a-411e-9500-a2638ca6aa6a&t=86102d8f-bb2a-411e-9500-a2638ca6aa6a&width=1411&cache=v2)
2.2 配置MongoDB数据库地址
这里将之前获得的数据库url填入环境变量中
MONGODB_URI
: mongodb+srv://<userName>:<password>@<host>/?retryWrites=true&w=majority
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9f5a07cc-10ff-472c-b6f5-78430b7f7eac%2FUntitled.png?table=block&id=baabe970-b305-4e56-a0d9-18ecde2796ae&t=baabe970-b305-4e56-a0d9-18ecde2796ae&width=1718&cache=v2)
最后再点击重新部署即可:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa874a051-f0ea-4ee7-bfa6-aeefe862e826%2FUntitled.png?table=block&id=6ccd04a2-bd12-45f3-b133-90bf4976b69b&t=6ccd04a2-bd12-45f3-b133-90bf4976b69b&width=1650&cache=v2)
部署成功后,回到主页面,可以看到如下的样子:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F388ec03d-377b-4705-b27f-3f635aec5387%2FUntitled.png?table=block&id=c2c95d80-95de-425d-b8ae-27ac7110434b&t=c2c95d80-95de-425d-b8ae-27ac7110434b&width=1679&cache=v2)
2.3 设置Twikoo访问的域名地址
直接用
vercel
的也可以的,但是个人觉得不是很好记所以用自己的自定义域名
和前面文章一样,我这里使用了二级域名
按照提示,在域名提供商处完成DNS解析即可
比如我这里使用的是:
CNAME : twikoo : cname-china.vercel-dns.com
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F6a09777d-b8c8-4934-9380-78810a23d008%2FUntitled.png?table=block&id=06c52754-7ae2-4c36-beef-b5e38302e808&t=06c52754-7ae2-4c36-beef-b5e38302e808&width=1759&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F50e2aee7-3d0f-4a77-bf89-71e3095481f3%2FUntitled.png?table=block&id=76940726-d555-4e66-9dfb-a0d378df508c&t=76940726-d555-4e66-9dfb-a0d378df508c&width=1808&cache=v2)
3. 配置NotionNext,打开Twikoo评论插件
在你的
NotionNext
项目下,配置你的Twikoo环境变量NEXT_PUBLIC_COMMENT_ENV_ID
: https://twikoo.lpolaris.com
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8c07dc21-2df2-4dd7-a73a-ea205e15b060%2FUntitled.png?table=block&id=521c7d07-22ec-4242-85b5-9924d3b5af82&t=521c7d07-22ec-4242-85b5-9924d3b5af82&width=1674&cache=v2)
重新构建一下项目
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F5cc4a94e-f4d5-4051-ba5d-e7356b247a7c%2FUntitled.png?table=block&id=26f4b92a-4e12-4807-b527-7a4f37b53e40&t=26f4b92a-4e12-4807-b527-7a4f37b53e40&width=1657&cache=v2)
4.配置Twikoo
此时前往你的博客网站页面,点开任意一篇文章,即可看到评论插件已经开启了
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe9f40fcc-2a85-498f-94b0-9b63fdc06a9b%2FUntitled.png?table=block&id=3f200a76-1ba1-4f05-9132-e3f1026b53ff&t=3f200a76-1ba1-4f05-9132-e3f1026b53ff&width=921&cache=v2)
请尽快进行配置你的管理员密码,以及其他功能设置
最好是设置一个隐藏面板的昵称,这样只有你在
昵称
栏输入指定关键字的时候,才会显示这个管理员入口其他的设置,可以慢慢看看说明进行填写即可
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff3dcfed4-e524-4edd-821d-d5d327d8db95%2FUntitled.png?table=block&id=e5d28aec-cba2-4ac7-a279-2ac3af1dc3cd&t=e5d28aec-cba2-4ac7-a279-2ac3af1dc3cd&width=805&cache=v2)
到这里,评论插件就配置完了
Twikoo官方文档
- 作者:PolarisAspire
- 链接:https://lpolaris.com//article/notiontwikoo
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。