category
tags
type
status
slug
date
summary
icon
password
以下是旧文章
NotionNext支持多种评论插件,其中体验比较好的我个人觉得是Twikoo,您可以参考以下教程进行配置安装:
您也可以选择Valine/Waline,关于Valine/Waline的部署可以访问此篇文章:
比较简单的部署方案
上面的Twikoo和Valine都需要用到第三方的数据存储,部署的步骤要复杂些。幸运的是,NotionNext还支持以下几种较为简便的评论插件。
- Cusdis
一个非常轻量实用的免费开源评论插件,数据存储在cusdis服务器
- Utterance 、 Giscus 、Gitalk
这三种都是github的扩展应用,其评论数据存放在Github的仓库中。此类插件用户需要先登录github账号进行评论,不支持匿名评论。
其中部署最便捷的当属 Cusdis 和 Utterance这两个插件。您可以任选一个部署,当然,您也可以选择同时部署多个。
开始教程
1. Cusdis
完成效果预览
您的博文底部会有这样的评论页面。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F155450f2-fec6-4397-95d2-2bd0deaa1586%2FUntitled.png?table=block&id=8f3438c1-340d-4542-9ad9-07e57fe4525f&t=8f3438c1-340d-4542-9ad9-07e57fe4525f&width=1666&cache=v2)
开始:
注册Cusdis
访问Cusdis的官网进行登录注册
点击Start for free
,并用Github登录即可 Sign in With Github
(点击查看截图)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7b3d76f3-5acd-4571-ba2f-a31d931fc121%2FUntitled.png?table=block&id=91191dc4-33fc-476b-8c18-32ba8424e992&t=91191dc4-33fc-476b-8c18-32ba8424e992&width=480&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7d815061-7744-4c43-a9be-f70213b404ba%2FUntitled.png?table=block&id=b06f084b-9ea2-48c4-95f5-56e28fbdba2e&t=b06f084b-9ea2-48c4-95f5-56e28fbdba2e&width=480&cache=v2)
[可选] 配置邮件通知地址,以便收到新评论时邮件通知您,(点击展开截图)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8e4f39fb-8fb6-40ac-a1ce-1187638e869a%2FUntitled.png?table=block&id=751d86b3-be18-40d3-ada3-f46da13bccd1&t=751d86b3-be18-40d3-ada3-f46da13bccd1&width=480&cache=v2)
点击左上角New website
. 填写网站名字完成创建。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F4f2b5f27-bebc-40db-81e3-a991648408b1%2FUntitled.png?table=block&id=0ebca516-a422-4e8e-9e5a-cdf882d6e5f8&t=0ebca516-a422-4e8e-9e5a-cdf882d6e5f8&width=1728&cache=v2)
点击Embed Code
获取您的应用ID,即data-app-id
, 复制这串id备用。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F6961d735-5585-40f7-bb40-df90db62e841%2FUntitled.png?table=block&id=61237c42-055a-4aac-a8ab-359784155eaa&t=61237c42-055a-4aac-a8ab-359784155eaa&width=1628&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F956ad5f5-f933-47bf-9974-35ac99586472%2FUntitled.png?table=block&id=4c6977e7-06da-4dc7-b569-1204bf518cfd&t=4c6977e7-06da-4dc7-b569-1204bf518cfd&width=1502&cache=v2)
配置NotionNext
在Vercel后台添加一个环境变量 NEXT_PUBLIC_COMMENT_CUSDIS_APP_ID
,值为上面获取到的data-app-id
。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F351204a4-b93f-4418-9ea7-a30ba7d29ed9%2FUntitled.png?table=block&id=775e294a-d4c6-4ebf-8f35-9b9b5d4b69a9&t=775e294a-d4c6-4ebf-8f35-9b9b5d4b69a9&width=2602&cache=v2)
添加完环境变量记得Redploy
项目。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F91a31209-906b-4ad1-92fd-22f21d8641e8%2FUntitled.png?table=block&id=8869502f-beb4-4593-a2ee-50c79825a591&t=8869502f-beb4-4593-a2ee-50c79825a591&width=2586&cache=v2)
2. Utterance
完成预览效果
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F54570291-8a94-44c1-ba2d-b5ea22e624f9%2FUntitled.png?table=block&id=eb9ee2a1-26c7-4282-b1e4-96c84da58afb&t=eb9ee2a1-26c7-4282-b1e4-96c84da58afb&width=1706&cache=v2)
配置utterance
在您的Github中创建一个开源项目用于存放评论
在github中安装utterance插件
访问此地址安装:https://github.com/apps/utterances , 点击右上角install即可
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F530c7c7b-9a15-4ff8-a0c4-d81b2de6286d%2FUntitled.png?table=block&id=5144b7e4-40e6-4ccb-bc97-392f4352718d&t=5144b7e4-40e6-4ccb-bc97-392f4352718d&width=2070&cache=v2)
允许utterance访问所有仓库,并勾选install,可以只勾选作为评论用的仓库地址。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F5d8210b2-7766-4204-941b-1fbebbfe3ac4%2FUntitled.png?table=block&id=a62a4b79-8cc2-4471-872d-2671e9250279&t=a62a4b79-8cc2-4471-872d-2671e9250279&width=384&cache=v2)
配置NotionNext
将用作评论仓库名添加到Vercel添加环境变量
后台
settings
→ environment variables
→ 添加 → save
即可。如下图:![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd1110ca9-fc01-4237-b19a-4aebc1c8b0da%2FUntitled.png?table=block&id=a0c42f82-a130-4256-8af6-8548fec209de&t=a0c42f82-a130-4256-8af6-8548fec209de&width=2814&cache=v2)
注意,![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc258ba02-21f6-4ffb-972c-5716edfc8ced%2FUntitled.png?table=block&id=8ae84fd7-1a93-44dd-b408-fe2f243a4062&t=8ae84fd7-1a93-44dd-b408-fe2f243a4062&width=1782&cache=v2)
仓库名
的格式是 [您的用户名/您的仓库名] 如下示例![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc258ba02-21f6-4ffb-972c-5716edfc8ced%2FUntitled.png?table=block&id=8ae84fd7-1a93-44dd-b408-fe2f243a4062&t=8ae84fd7-1a93-44dd-b408-fe2f243a4062&width=1782&cache=v2)
添加后的效果
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F39546227-f09e-4a39-876b-f5cabe3deff8%2FUntitled.png?table=block&id=cc777e67-9f4d-4f5c-b584-e28d1a41bf1a&t=cc777e67-9f4d-4f5c-b584-e28d1a41bf1a&width=1930&cache=v2)
添加完环境变量记得Redploy
项目。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F91a31209-906b-4ad1-92fd-22f21d8641e8%2FUntitled.png?table=block&id=5041ec36-e38c-4957-ab05-697a3a06425b&t=5041ec36-e38c-4957-ab05-697a3a06425b&width=2586&cache=v2)
3. Gitalk
完成预览效果
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F453d75e8-41dd-4595-9d56-9312a31ee3d4%2FUntitled.png?table=block&id=e2874e67-83ad-4834-969a-85ca28534595&t=e2874e67-83ad-4834-969a-85ca28534595&width=1732&cache=v2)
配置gitalk
创建一个授权秘钥,并保存您的ClientID
与ClientSecret
Authorization callback URL
填写您网站域名填写配置的效果 ,点击
register application
即可创建。![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F1bef4fab-317d-42e3-aab7-c78e22ce53be%2FUntitled.png?table=block&id=be512e8f-4bc6-484d-85d0-8112d674a7f0&t=be512e8f-4bc6-484d-85d0-8112d674a7f0&width=1918&cache=v2)
点击
Generate a new client secret
生成您的密码![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F22e03a93-0912-4299-b206-f0843bbb68ea%2FUntitled.png?table=block&id=3ab19e27-b16b-4338-b24b-f2d3982d978f&t=3ab19e27-b16b-4338-b24b-f2d3982d978f&width=2110&cache=v2)
复制
Client ID
和刚生成的 Client secret
(对应图中2和3)备用。配置 NotionNext
在Vercel后台配置环境变量
gitalk参数和vercel环境变量的映射关系
gitalk参数名 | vercel变量名 |
ClientID | NEXT_PUBLIC_COMMENT_GITALK_CLIENT_ID |
ClientSecret | NEXT_PUBLIC_COMMENT_GITALK_CLIENT_SECRET |
vercel后台需要添加5个变量
变量名 | 变量 说明 |
NEXT_PUBLIC_COMMENT_GITALK_CLIENT_ID | 填写 ClientID 的值 |
NEXT_PUBLIC_COMMENT_GITALK_CLIENT_SECRET | 填写 ClientSecret 的值 |
NEXT_PUBLIC_COMMENT_GITALK_CLIENT_ADMIN | 填写您的github用户名 |
NEXT_PUBLIC_COMMENT_GITALK_CLIENT_OWNER | 填写您的github用户名 |
NEXT_PUBLIC_COMMENT_GITALK_CLIENT_REPO | 填写您的仓库名 |
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd8aee052-5418-4f23-bb93-16e70a4cc118%2FUntitled.png?table=block&id=de899e22-a252-4dc4-8b66-303916bdda5a&t=de899e22-a252-4dc4-8b66-303916bdda5a&width=1910&cache=v2)
添加完环境变量记得Redploy
项目。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F91a31209-906b-4ad1-92fd-22f21d8641e8%2FUntitled.png?table=block&id=56fb9888-4826-4af8-8d83-ffcbab5e6aaa&t=56fb9888-4826-4af8-8d83-ffcbab5e6aaa&width=2586&cache=v2)
4.Giscus
项目会在您的Github项目讨论区创建评论数据,便于维护管理 ,
完成效果 预览
支持表情包评论
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8adba253-3493-4f9c-a27e-144aac8f190a%2FUntitled.png?table=block&id=f6e947b4-e977-4ef1-b3fb-4ecb9b68d5c5&t=f6e947b4-e977-4ef1-b3fb-4ecb9b68d5c5&width=2060&cache=v2)
您可以在Github的Discusstion讨论区随时管理评论。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd8b5513e-3937-4e55-92a7-c715b2c6cb59%2FUntitled.png?table=block&id=03fcab64-0799-4297-a83e-e780c86dcb83&t=03fcab64-0799-4297-a83e-e780c86dcb83&width=2622&cache=v2)
配置Giscus:
在项目Setting中开启discussion功能
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F64cdb0bf-1f46-4c0b-a6aa-26968a38e86d%2FUntitled.png?table=block&id=5bdd2692-54e4-45d3-8339-fc2ac64a3626&t=5bdd2692-54e4-45d3-8339-fc2ac64a3626&width=2484&cache=v2)
滚动到下方,找到Discussions并开启它
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F70e32f25-1255-4bf5-9705-6c95f5d04034%2FUntitled.png?table=block&id=7465718a-e1fe-4c44-b65e-c848fbe767a8&t=7465718a-e1fe-4c44-b65e-c848fbe767a8&width=1922&cache=v2)
在Github中安装giscus应用
点击右上方的Install即可,并确认 允许访问仓库数据权限:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb5db1cde-846b-47ff-a994-f2b37edae20a%2FUntitled.png?table=block&id=4e00d400-a81a-4cbd-8b04-62d52876c22a&t=4e00d400-a81a-4cbd-8b04-62d52876c22a&width=2046&cache=v2)
默认勾选All repositories即可。也可以只勾选用作评论的仓库,(后续还可以再回来配置)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb39b65b6-9fc5-4f06-8b65-0f997df2490b%2FUntitled.png?table=block&id=eddcea3b-9caa-411f-87d4-6bb583f75fa2&t=eddcea3b-9caa-411f-87d4-6bb583f75fa2&width=1330&cache=v2)
访问Giscus填写并获取您的Giscus配置参数
访问 以下giscus地址:
主要配置输入您的仓库名,并选择
Discussion
分类为 Announcements
.![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fcda69522-88fa-4bba-a597-f84a3c27bc4c%2FUntitled.png?table=block&id=67c1f295-161d-407a-b2b5-50d600d9331f&t=67c1f295-161d-407a-b2b5-50d600d9331f&width=480&cache=v2)
填写完成在页面下方可以 看到配置最重要的是
data-repo,data-repo-id
data-category-id
这三项。![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F4af2fdc8-65ea-452e-87f0-154b1d850c40%2FUntitled.png?table=block&id=8350ba9e-67f3-4753-b963-864a88ca8867&t=8350ba9e-67f3-4753-b963-864a88ca8867&width=1564&cache=v2)
配置NotionNext
在Vercel后台将上面获取的Giscus配置参数
添加到环境变量。
giscus的三项配置参数:
data-repo,data-repo-id
data-category-id
添加到Vercel后台环境变量的名字关系:giscus参数名 | vercel变量名 |
data-repo | NEXT_PUBLIC_COMMENT_GISCUS_REPO |
data-repo-id | NEXT_PUBLIC_COMMENT_GISCUS_REPO_ID |
data-category-id | NEXT_PUBLIC_COMMENT_GISCUS_CATEGORY_ID |
添加效果如下
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F310a69dc-8395-4698-b76f-ea1a5884e374%2FUntitled.png?table=block&id=90435c4e-4122-4afc-93ad-fcb8da4b7da9&t=90435c4e-4122-4afc-93ad-fcb8da4b7da9&width=1886&cache=v2)
添加完环境变量记得Redploy
项目。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F91a31209-906b-4ad1-92fd-22f21d8641e8%2FUntitled.png?table=block&id=eead1574-2875-4ecb-878d-c3aae09c965a&t=eead1574-2875-4ecb-878d-c3aae09c965a&width=2586&cache=v2)
- 作者:Tangly
- 链接:https://blog.tangly1024.com/article/notion-next-comment-plugin
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。