category
软件工具
tags
工具
NotionNext
type
Post
status
Published
slug
notion-next-comment-plugin
date
Dec 11, 2022
summary
NotionNext添加Cusdis/Giscus/Gitalk/Utterance的步骤教程
icon
password

NotionNext评论插件

NotionNext支持多种评论插件,其中体验比较好的我个人觉得是Twikoo,您可以参考以下教程进行配置安装:
NotionNext配置评论插件Twikoo | TANGLY's BLOG
一个简洁、安全、免费的静态网站评论系统,基于 腾讯云开发 。 经评论区网友推荐,我开始使用 Twikoo,一番体验,发现Twikoo真的很强大,目前我决定用它作为主要评论插件。 twikoo支持在页面上直接管理评论、配置插件,非常强大 在最新版本中 NotionNext已经 支持该评论插件,配置 方法很简单: 在Vercel后台添加一个环境变量 NEXT_PUBLIC_COMMENT_ENV_ID ; 值为您部署好的 twikoo 后台地址。以我的举例: 借助vercel,您可以非常快速地部署自己的twikoo后台,用于储存评论数据。 twikoo的后台数据存储是基于MongoDB数据库的,我们可以先注册创建一个免费的在线MongoDB数据库。 创建MongoDB数据库 1.注册账号 创建数据库 这里下方要设置一个允许访问该数据库的IP地址,推荐设置0.0.0.0,即所有地址都允许访问,毕竟我也不知道自己会用什么ip访问这个数据库。 2.获取数据库连接地址 Vercel一键部署 点击Create将twikoo的代码拷入您的仓库 配置MongoDB数据库地址 添加一个配置 MONGODB_URI 环境变量即可,其值为上一步获得的MongoDB连接地址,注意将链接中MONGODB的密码 替换成您设置的。 上述部署完成后,您将获得一个vercel的twikoo后台页面,您可以选择像我一样映射成二级域名 将您的twikoo后台地址配置在NotionNext的后台,并redeploy即可。 到此完成~ 点击右下角的小齿轮即可配置您的管理员密码、并进行更多的功能设置。赶快体验吧~ 可以访问官方文档获取安装部署帮助,并且查看Twikoo的更多特性。 NotionNext支持多种评论插件,可访问以下文章获得帮助:
NotionNext配置评论插件Twikoo | TANGLY's BLOG
您也可以选择Valine/Waline,关于Valine/Waline的部署可以访问此篇文章:
NotionNext配置评论插件-Valine/Waline | TANGLY's BLOG
Valine和Waline都是 基于LeanCloud 的 快速、简洁的评论系统,理论上支持但不限于静态博客。 Waline 是从 Valine 衍生的带后端评论系统,可以看作是Valine的升级版,具备更多Valine不支持的功能,两者的数据结构是可以兼容的,你甚至可以同时安装Valine和Waline,两者的评论互通。 两个插件均要借助LeanCloud提供的云函数,云数据存储等功能,对于普通开发者来说免费版已经足够使用。 1.请先登录或注册 LeanCloud, 进入控制台后点击左下角创建应用: 2.进入刚刚创建的应用,选择左下角的设置>应用Key,查看你的APP ID和APP Key。 获取上述的 appId、 appKey等参数后,就可以直接在NotionNext(版本≥3.3.9)中激活valine了, 如果不想使用Valine可以直接跳到文章下一节《Waline部署》部分。 在NotionNext的Vercel环境变量中配置以下内容: NEXT_PUBLIC_VALINE_SERVER_URLS NEXT_PUBLIC_VALINE_PLACEHOLDER 环境变量配置示例: NEXT_PUBLIC_VALINE_SERVER_URLS 说明 此参数选填,在应用内部会尝试自动获取,如果发现获取失败,请手动提供配置,配置方法: 在LeanCloud刚创建的应用中,选择左下角的 设置> 应用Key,找到 Request 域名 第一行: 注意,需要手动在域名前加上 https:// 否则会无法访问valine评论。 安全域名(可选) 点击展开 leanCloud支持设置自己的 安全域名 ,设置后,仅列表中配置的域名才可以访问你的服务。例如我只在博客中用到valine服务,那么我的安全域名只需要配置为 https://tangly1024.com。 部署valine后台(可选)点击展开 valine没有自带后台,可以借助 Valine-Admin 几分钟就可以部署一个管理后台,支持行评论的查看、删除,以及邮件通知,垃圾评论过滤等功能。部署方式不在此文赘述,可以请参阅 官方文档中的"云引擎一键部署 "部分.
NotionNext配置评论插件-Valine/Waline | TANGLY's BLOG
 

更便捷的评论插件方案

NotionNext还支持以下几种评论插件
  • Cusdis
    • 一个非常轻量实用的免费开源评论插件,数据存储在cusdis服务器
  • Utterance 、 Giscus 、Gitalk
    • 这三种都是github的扩展应用,其评论数据存放在Github的仓库中。此类插件用户需要先登录github账号进行评论,不支持匿名评论。
💡
其中部署最便捷的当属 CusdisUtterance这两个插件。您可以任选一个部署,当然,您也可以选择同时部署多个。

开始教程

1. Cusdis

完成效果预览
您的博文底部会有这样的评论页面。
notion image

开始:

注册Cusdis

访问Cusdis的官网进行登录注册
点击Start for free ,并用Github登录即可 Sign in With Github (点击查看截图)
notion image
notion image
[可选] 配置邮件通知地址,以便收到新评论时邮件通知您,(点击展开截图)
notion image
点击左上角New website. 填写网站名字完成创建。
notion image
点击Embed Code获取您的应用ID,即data-app-id, 复制这串id备用。
notion image
notion image
 

配置NotionNext

在Vercel后台添加一个环境变量 NEXT_PUBLIC_COMMENT_CUSDIS_APP_ID,值为上面获取到的data-app-id
notion image
添加完环境变量记得Redploy项目。
notion image
 

2. Utterance

完成预览效果
notion image

配置utterance

在您的Github中创建一个开源项目用于存放评论
在github中安装utterance插件
访问此地址安装:https://github.com/apps/utterances , 点击右上角install即可
notion image
允许utterance访问所有仓库,并勾选install,可以只勾选作为评论用的仓库地址。
notion image

配置NotionNext

将用作评论仓库名添加到Vercel添加环境变量
后台settingsenvironment variables → 添加 → save 即可。如下图:
notion image
💡
注意,仓库名的格式是 [您的用户名/您的仓库名] 如下示例
notion image
添加后的效果
notion image
添加完环境变量记得Redploy项目。
notion image
 
 

3. Gitalk

完成预览效果
notion image

配置gitalk

在您的Github中创建一个开源项目用于存放评论
创建一个授权秘钥,并保存您的ClientIDClientSecret
Authorization callback URL 填写您网站域名
填写配置的效果 ,点击register application 即可创建。
notion image
点击 Generate a new client secret 生成您的密码
notion image
复制 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
添加完环境变量记得Redploy项目。
notion image
 
 

4.Giscus

项目会在您的Github项目讨论区创建评论数据,便于维护管理 ,
完成效果 预览
支持表情包评论
notion image
您可以在Github的Discusstion讨论区随时管理评论。
notion image

配置Giscus:

在您的Github中创建一个开源项目用于存放评论
在项目Setting中开启discussion功能
notion image
滚动到下方,找到Discussions并开启它
notion image
在Github中安装giscus应用
点此链接安装:https://github.com/apps/giscus
点击右上方的Install即可,并确认 允许访问仓库数据权限:
notion image
默认勾选All repositories即可。也可以只勾选用作评论的仓库,(后续还可以再回来配置)
notion image
访问Giscus填写并获取您的Giscus配置参数
访问 以下giscus地址:
主要配置输入您的仓库名,并选择Discussion分类为 Announcements .
notion image
填写完成在页面下方可以 看到配置最重要的是 data-repo,data-repo-iddata-category-id 这三项。
notion image

配置NotionNext

在Vercel后台将上面获取的Giscus配置参数添加到环境变量。
giscus的三项配置参数: data-repo,data-repo-iddata-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
添加完环境变量记得Redploy项目。
notion image
 

  • Utterance
  • Cusdis