Artitalk Pro

It has been 98 days since the last update, the content of the article may be outdated.

点击查看更新记录

更新记录

2021-12-23: 新增常见排错思路及解决方案

新增四步排错步骤。
感谢 @talib 的反馈

2021-12-20: 插件版 1.0.5

将 cdn 转为 zhimg.unpkg.com。
外露 cdn 链接，支持本地覆盖配置。

2021-08-24: 教程说明更新

权限设置注意事项

2021-07-05: 插件版 1.0.3

屏蔽项功能升级。
支持添加多个屏蔽项。
支持屏蔽多页内容。

2021-07-02: 插件版 1.0.1

发布插件版
同时兼容侧栏和页面
直接使用 npm 安装

2021-03-19: 正式版 v2.1.2

更新 v3.7.0 适配方案

2021-01-31: 正式版 v2.1.1

更新 v3.6.0 适配方案

2020-12-15: 正式版 v2.1

错误示例修正。
取消 styl 文件的应急预案。

2020-12-15: 正式版 v2.0

代码重构。内嵌了 Butterfly 主题的部分原生代码。
去 Jquery 化。
将原生代码修改为 async 异步加载。
支持通过主题配置文件进行配置。
更改了 pjax 配置内容。

2020-12-14: 正式版 v1.02

接手冰卡诺老师的侧栏说说售后工作。
适配了 Pjax，恢复头像显隐，保留修改说说功能。
适配了 Artitalk_v3.2.1 版本样式适配。

点击查看参考教程

参考方向	教程原贴
项目教程原帖	教程：基于 Butterfly 主题的侧边栏说说
项目售后
Artitalk 后端配置	Artitalk 官方文档

写在最前

本项目是对冰卡诺老师写的教程：基于 Butterfly 主题的侧边栏说说进行重构，新增 pjax适配和 artitalk_v3.2.1 及以上版本的适配。后续也会继续在本帖基础上继续开发。

后端配置

artitalk 的后端是基于 leancloud，主要配置方法请参考 Artitalk 官方文档

如果读者还在同时使用 valine 的话，请将 artitalk 和 valine 配置在同一个应用中。而不是另外新建一个应用。另外新建应用反而会导致 artitalk 说说内容和 valine 评论内容彼此数据污染。

前往 LeanCloud 国际版，注册账号。
注册完成之后根据 LeanCloud 的提示绑定手机号和邮箱。
绑定完成之后点击创建应用，应用名称随意，接着在存储 -> 结构化数据中选择创建 class，命名为 shuoshuo。务必严格按照文档要求，将新建 class 命名为 shuoshuo，不要改成 artitalk，否则会因为和 artitalk.js 的保留类名冲突导致 bug。
在你新建的应用中找到存储 -> 用户。点击添加用户，输入想用的用户名及密码。
回到存储 -> 结构化数据，点击 class 下的 shuoshuo。找到权限，在 Class访问权限中将 add_fields 以及 create 权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将 delete 和 update 也设置为跟它们一样的权限。此时需要注意，为了让其他人能够看到，或者说为了让前端能够读取说说内容，需要将 find 和 get 的权限设置为所有用户。
然后新建一个名为 atComment 的 class，权限什么的使用默认的即可。
点击 class 下的_User-> 数据 -> 添加列，添加一个新的列，列名称为 img，默认值填上你这个账号想要用的发布说说的头像 url，这一项不进行配置，说说头像会显示为默认头像 —— Artitalk 的 logo。
在最菜单栏中找到设置 -> 应用 Keys，记下来 AppID 和 AppKey 备用。
最后将 _User 中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据以达到强制发布说说。

前端配置

最新版插件方案（推荐）

安装插件，在博客根目录 [Blogroot] 下打开终端，运行以下指令： bash

npm uninstall hexo-butterfly-artitalk --save
npm install hexo-butterfly-artitalk-pro --save

添加配置信息，以下为写法示例
在站点配置文件_config.yml 或者主题配置文件_config.butterfly.yml 中添加 yaml

# artitalk see https://artitalk.js.org/
# hexo-butterfly-artitalk-pro
# see https://akilar.top/posts/f1004b1d/
artitalk:
 enable:
 card: true # 侧边栏开关
 page: true #页面开关
 # 侧栏相关配置项
 priority: 5 #过滤器优先权
 enable_page: all # 应用页面
 layout: # 挂载容器类型
 type: class
 name: sticky_layout
 index: 0
 # 页面相关配置项
 path: artitalk
 front_matter:
 title: 碎碎念
 # 公共配置项
 appId: ***************************
 appKey: ****************************
 exclude:
 - /artitalk/
 - /posts/ #需要abbrlink插件支持
 js: https://npm.elemecdn.com/artitalk
 card_css: https://npm.elemecdn.com/hexo-butterfly-artitalk-pro/lib/card.css
 card_visual_js: https://npm.elemecdn.com/hexo-butterfly-artitalk-pro/lib/card_visual.js
 option:
 serverURL: https://********.api.lncldglobal.com #将此处的********替换为你的appId前八位
 lang: zh
 pageSize: 1
 color1: '#49b1f5'
 color2: '#00c4b6'
 atEmoji: {
 'Mafumafu1':'https://cdn.jsdelivr.net/gh/GamerNoTitle/ValineCDN@master/Mafumafu/199749454.png',
 'Mafumafu2':'https://cdn.jsdelivr.net/gh/GamerNoTitle/ValineCDN@master/Mafumafu/199749455.png'}

参数释义

参数	备选值 / 类型	释义
enable.card	true/false	【必选】侧边栏控制开关
enable.page	true/false	【必选】页面插件控制开关
priority	number	【可选】过滤器优先级，数值越小，执行越早，默认为 10，选填
enable_page	path/all	【可选】填写想要应用的页面的相对路径（即路由地址）, 如根目录就填’/‘, 分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为 all
layout.type	id/class	【可选】挂载容器类型，填写 id 或 class，不填则默认为 id
layout.name	string	【必选】挂载容器名称
layout.index	0 和正整数	【可选】前提是 layout.type 为 class，因为同一页面可能有多个 class，此项用来确认究竟排在第几个顺位
path	string	【可选】Artitalk 的路径名称（默认为 artitalk，生成的页面为 artitalk/index.html）
front_matter	json	【可选】Artitalk 頁面的 front_matter 配置
appId	string	【必选】LeanCloud 创建的应用中的 AppID
appKey	string	【必选】LeanCloud 创建的应用中的 AppKEY
exclude	URL	【可选】若同时开启了页面版和侧栏版插件，则需要手动填写页面版的相对链接。以保证在页面版不会加载侧栏版插件。可以多个。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。
js	URL	【可选】Artitalk 的 CDN 链接，默认为 `https://npm.elemecdn.com/artitalk`
card_css	URL	【可选】卡片样式的 CDN 链接，默认为 `https://npm.elemecdn.com/hexo-butterfly-artitalk-pro/lib/card.css`
card_visual_js	URL	【可选】卡片样式控制版块显隐的 CDN 链接，默认为 `https://npm.elemecdn.com/hexo-butterfly-artitalk-pro/lib/card_visual.js`
option	json	【可选】Artitalk 需要的额外配置，详情可以参考 Artitalk 官方文档

感谢 @talib 的反馈，国际版还需要填写 serverUrl，写法见上文示例，此处需要注意 appid 前八位填写时区分大小写，大小写不一致则 api 无法生效。
若您发现自己的说说版块一直显示下雨，请按照以下步骤排查：

查看自己使用的是 leancloud 国际版还是国内版，artitalk 的各类权限配置均针对国际版。国内版会遇到各种阻碍。
查看自己的权限配置是否正确，可查看上文 5~9 步。
查看自己的 serverUrl 是否填写正确，包括大小写和 appid 前八位是否一致。
若以上情况均排查无误，查看别人的站点的 artitalk 版块是否也在下雨，若是，大概率为本地网络 DNS 解析问题。可以尝试将本地 DNS 解析服务器改为 114.114.114.114 和 8.8.8.8。关于 DNS 解析服务器可自行使用搜索引擎查找相关教程。

1.0 上古方案（需要 jquery 和外挂 css）

由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源。参照教程进行修改。

下载资源文件

新建 [Blogroot]\themes\butterfly\layout\includes\widget\card_shuo.pug, 输入内容： html
- defer 是异步加载标签，能够减少 Html 阻塞。同时保证 js 加载顺序。
- data-pjax 是 butterfly 主题自带的一个 pjax 重载标记，添加该标记的 js 会在页面切换时重载。
修改 [Blogroot]\themes\butterfly\layout\includes\widget\index.pug，注意对齐格式。 diff
新建 [Blogroot]\themes\butterfly\source\js\card_artitalk.js 用以控制头像及各类按钮显隐。 js
新建 [Blogroot]\themes\butterfly\source\js\artitalkkey.js 用来导入 card_shuo 初始化配置。 js
新建 [Blogroot]\themes\butterfly\source\css\_layout\card_shuo.styl, 输入内容： stylus
找到 [Blogroot]\themes\butterfly\languages\zh-CN.yml, 新增说说侧栏标题内容 (也可以改成任意你喜欢的侧栏标题名称)： diff
修改 [Blogroot]\_config.butterfly.yml, 新增三处配置项内容：
- 新增侧栏开关配置项 diff
- 新增 js 引入 CDN 配置项 diff
- 如果是 Butterfly_v3.4.0 及以上版本，需要再添加 jquery 引入项。 diff
运行 hexo cl && hexo g 之后即可看到侧栏说说。

2.0 旧版方案（去 jquery 化，支持通过主题配置文件配置）

新版方案是基于 Butterfly_v3.4.0+ 版本进行适配，实现了去 jquery 化，低于 v3.4.0 的可以考虑使用旧版方案，或者研读新版方案关于具体版本的适配过程。

由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源。参照教程进行修改。最新方案只提供 Butterfly_v3.4.0 版本的静态资源，低于 v3.4.0 的可以考虑使用旧版方案，或者研读新版方案关于具体版本的适配过程。

下载 2.1 版本资源文件

新建 [Blogroot]\themes\butterfly\layout\includes\widget\card_shuo.pug, 输入内容： html
修改 [Blogroot]\themes\butterfly\layout\includes\widget\index.pug，注意对齐格式。此处写法是在站点页和文章页都添加了 card_shuo，只需要文章页有的就只写上面这个。只需要站点页有的就只写下面这个。 diff
新建 [Blogroot]\themes\butterfly\source\css\_layout\card_shuo.styl, 输入内容： stylus
找到 [Blogroot]\themes\butterfly\languages\zh-CN.yml, 新增说说侧栏标题内容 (也可以改成任意你喜欢的侧栏标题名称)： diff
修改 [Blogroot]\themes\butterfly\layout\includes\third-party\pjax.pug 的内容。 diff
修改 [Blogroot]\_config.butterfly.yml 的配置项：
- 新增 card_shuo 开关配置项 diff
- 配置 Artitalk 配置项（更多参数请参阅 Artitalk 官方文档）: yml Butterfly_v3.7.0 移除了 Artitalk 配置项，转为插件版。但是根据插件版的配置文档来看，appId、appKey、option 及 option 内的内容可以共用。 yml
- 因为 Butterfly_v3.7.0 移除了 Artitalk 配置项，需要自己重新添加 Artitalk CDN 配置项 diff
运行 hexo cl && hexo g 之后即可看到侧栏说说。

TO DO

冰老师原版教程迁移

添加 pjax 适配

对 Artitalk_v3.2.1 的适配

对 Butterfly_v3.4.0 的适配

去 jquery 化

侧栏说说插件化

Artitalk Pro

https://akilar.top/posts/f1004b1d/

作者

Akilar

发布于

2020-12-14

更新于

2021-12-22

许可协议

CC BY-NC-SA 4.0

📁Hexo 🦋Butterfly 🧊Ice-🍬Candy

Invitation

Akilar

674527148

created:03/09/2020

Welcome to Candyhome

sitelink

加入群聊【🧊Akilar の糖果屋🍭】

Use this card to join the candyhome and participate in a pleasant discussion together .

Welcome to Akilar’s candyhome,wish you a nice day .

昵称

邮箱

网址

5 条评论

花裱 2022-01-10

店长，我发现如果在说说写代码块的话，长度超了就直接溢出了。还有就是插件版能调侧边栏名字吗

Windows 10

Chrome 96.0.4664.110

Akilar 店长 2022-01-10

回复 @花裱 :

长度超了溢出应该可以靠定义 max-width 或者 breakword 解决。插件版没法调侧边栏名字。

Android 11

Chrome 90.0.4430.82

花裱 2022-01-10

回复 @Akilar :谢谢店长，解决了。breakword 对 pre 代码块没用好像，我给它加了个滚轮，评论区分享一下

/* 字符串强制换行，防止溢出 */
#artitalk_main #shuoshuo_content{
  padding:10px !important;
  word-break: break-all;
}
/* 给  pre 代码块加滚动条，防止溢出 */
#artitalk_main span.cbp_tmlabel{
  max-width: 100%;
}
#artitalk_main span.cbp_tmlabel pre {
  overflow-x: auto; /** 超出 max-width 时加滚轮 **/
}

Windows 10

Chrome 96.0.4664.110

Akilar 店长 2022-01-11

回复 @花裱 :```css
/* 字符串强制换行，防止溢出 */
#artitalk_main #shuoshuo_content{
padding:10px !important;
word-break: break-all;
word-wrap:break-word;
}

```

Windows 10

Microsoft Edge 97.0.1072.55

展开

一只不喝可乐的猪 2021-09-25

可以了，抱歉，之前是用的国内版，所以导致一直加载，麻烦你了

Windows 10

Microsoft Edge 93.0.961.52

一只不喝可乐的猪 2021-09-25

博主，我按照教程添加完，为什么一直显示加载中，并且加载图案还不在中间，

Windows 10

Microsoft Edge 93.0.961.52

呆狐仙 2021-08-24

博主，我添加完侧边栏，为啥点编辑按钮没反应啊， :Menhera-chan-1: 说说可以在哪里写？

Windows 10

Microsoft Edge 92.0.902.78

Akilar 店长 2021-08-24

回复 @呆狐仙 :

Windows 10

Microsoft Edge 92.0.902.78

呆狐仙 2021-08-24

回复 @Akilar :

我的一直显示这个 :bilibili2233-5:

Windows 10

Microsoft Edge 92.0.902.78

Akilar 店长 2021-08-24

回复 @呆狐仙 :

我觉得你首先得要配置成功再谈编辑。

Windows 10

Microsoft Edge 92.0.902.78

呆狐仙 2021-08-24

回复 @Akilar :

我是按照教程来的啊，还少一些配置吗？ :bilibili2233-3:

Windows 10

Microsoft Edge 92.0.902.78

Akilar 店长 2021-08-24

回复 @呆狐仙 :

有很多细节要注意，比如 leancloud 是否是国际版，数据库的读写权限，国际版还要自行添加 serverUrl 等等。如果还是没有成功的话，可以考虑加群，让群友远程协助。加群按钮在作者卡片那里，悬停下半边会翻转显示按钮的。

Windows 10

Microsoft Edge 92.0.902.78

呆狐仙 2021-08-24

回复 @Akilar :

已经解决了，谢谢店长 :bilibili2233-1:

Windows 10

Microsoft Edge 92.0.902.78

展开

昕某人 2020-12-21

博主博主，我这个添加完之后编辑按钮点击无反应，原因是找不到对应的函数。
我在 CDN 的 main 中添加如下东西的时候，会导致第二个 js 文件无法加载（浏览器控制台看确实没有加载出来）

但是当我把他改成一个 script 标签之后就可以了，这是什么原因啊？

Windows 10

Microsoft Edge 87.0.664.66

akilar 店长 2020-12-21

回复 @昕某人 :

看你的描述你用的是旧版方案，那么需要重点排查是否引入了 jquery。如果是 butterfly_v3.4.0 以上的话，是需要自己引入 jqiery 的。其次是排查 card_shuo 和 card_artitalk 这两个关键词，这个确实是我的疏忽，一开始是想着把 card_shuo 都改成 card_artitalk 的，但是改到一半就来灵感了，写完新版方案就忘记旧版方案，匆匆打包了一下 demo 的静态资源就上传了。

macOS High Sierra

Chrome 83.0.4103.61

展开

Attributes

avatar