Artitalk 是基于 LeanCloud(快速搭建后端云服务)的可实时发布说说的 js

前提

  1. 你需要有一个域名

  2. LeanCloud 国际版已不支持中国大陆,需要代理才能访问到说说

  3. LeanCloud 大陆版需要一个备案的域名,最好准备 SSL 证书

LeanCloud 相关准备

直接按照 Artitalk.js 官方文档完成操作即可:

  1. 前往 LeanCloud 国际版,注册账号。
  2. 注册完成之后根据 LeanCloud 的提示绑定手机号和邮箱。
  3. 绑定完成之后点击创建应用,应用名称随意,接着在结构化数据中创建 class,命名为 shuoshuo【结构化数据名字一定要为shuoshuo,后续Artitalk才能识别到!】
  4. 在你新建的应用中找到 内建账户 下的 用户管理。点击 添加用户,输入想用的用户名及密码。
  5. 回到结构化数据中,点击 class 下的 shuoshuo。找到权限,在 Class 访问权限中将 add_fields 以及 create 权限设置为指定用户,输入你刚才输入的用户名会自动匹配。为了安全起见,将 deleteupdate 也设置为跟它们一样的权限。
  6. 然后新建一个名为 atComment 的class,权限什么的使用默认的即可。【同第三点】
  7. 点击 class 下的 _User 添加列,列名称为 img,默认值填上你这个账号想要用的发布说说的头像url,这一项不进行配置,说说头像会显示为默认头像 —— Artitalk 的 logo。
  8. 在最菜单栏中找到设置-> 应用 keys,记下来 AppIDAppKey ,一会会用。
  9. 最后将 _User 中的权限全部调为指定用户,或者数据创建者,为了保证不被篡改用户数据以达到强制发布说说。

大陆版域名补充

国际版国内加载不了,如果使用的是大陆版本,需要在域名绑定中绑定一个已有域名,这个域名在后面的配置中有用:

image-20241120222700201

同时需要去服务商进行 DNS 配置,按照图片提示:

image-20241120222800480

ButterFly 主题安装插件和配置

安装插件

butterfly 主题已经整合了 Artitalk,直接使用 npm 命令安装:

1
npm install hexo-butterfly-artitalk

默认配置

官方文档采用直接在 _config.yml 文件中配置(采用这种方法就不需要手动创建页面,只需要填写配置即可完成):

1
2
3
4
5
6
7
8
9
10
# Artitalk
# see https://artitalk.js.org/
artitalk:
enable: true
appId: LeanCloud appId
appKey: LeanCloud appKey
path: Artitalk 的路径名称(默认为 artitalk,生成的有页面为artitalk/index.html)
js: 更换 Artitalk js CDN(默认 https://cdn.jsdelivr.net/npm/artitalk)
option: Artitalk 可选配置
front_matter: Artitalk front_matter 配置

需要注意:国内无法访问 jsdelivr cdn,需要更换成 https://unpkg.com/artitalk

我的配置

考虑到官方配置方法无法关闭当前页面评论(有需要的话),我采用自己建立页面的方式。

首先新建一个页面,在博客根目录文件夹打开 CMD:

1
hexo new page 页面名

填入下面内容,采用md文件编写的方法(会暴露key,官方提供 Artitalk_SafeMode 工具解决安全性):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
---
title: 动态说说
date: 2024-11-20 20:16:10
type: talking
comments: false
---

<!-- 引用 artitalk -->

<script type="text/javascript" src="https://unpkg.com/artitalk"></script>

<!-- 存放说说的容器 -->

<div id="artitalk_main"></div>
<script>
new Artitalk({
appId: '', // Your LeanCloud appId
appKey: '', // Your LeanCloud appKey
serverURL: '大陆版需要配置,国际版不需要',
pageSize: 10,
color1: 'linear-gradient(60deg, #ffd7e4 0, #c8f1ff 93%)',
color2: 'linear-gradient(60deg, #ffd7e4 0, #c8f1ff 93%)',
color3: '#4c4948'
})
</script>

效果展示

后续在访问前面建好的页面就可以看到说说啦。

image-20241120223851121