Sidebar Artitalk

点击查看更新记录

更新记录

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

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

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

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

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

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

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

1. 更新v3.6.0适配方案

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

1. 更新v3.7.0适配方案

点击查看参考教程

预览效果

写在最前

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

后端配置

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

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

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

前端配置

旧版方案（需要jquery和外挂css）

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

下载资源文件

新建,输入内容：

• defer是异步加载标签，能够减少Html阻塞。同时保证js加载顺序。
• data-pjax是butterfly主题自带的一个pjax重载标记，添加该标记的js会在页面切换时重载。

修改[Blogroot]\themes\butterfly\layout\includes\widget\index.pug，注意对齐格式。

新建[Blogroot]\themes\butterfly\source\js\card_artitalk.js用以控制头像及各类按钮显隐。

新建[Blogroot]\themes\butterfly\source\js\artitalkkey.js用来导入card_shuo初始化配置。

新建[Blogroot]\themes\butterfly\source\css\_layout\card_shuo.styl,输入内容：

找到[Blogroot]\themes\butterfly\languages\zh-CN.yml,新增说说侧栏标题内容(也可以改成任意你喜欢的侧栏标题名称)：

修改[Blogroot]\_config.butterfly.yml,新增三处配置项内容：

运行hexo cl && hexo g之后即可看到侧栏说说。

新版方案（去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,输入内容：

修改[Blogroot]\themes\butterfly\layout\includes\widget\index.pug，注意对齐格式。

新建[Blogroot]\themes\butterfly\source\css\_layout\card_shuo.styl,输入内容：

找到[Blogroot]\themes\butterfly\languages\zh-CN.yml,新增说说侧栏标题内容(也可以改成任意你喜欢的侧栏标题名称)：

修改[Blogroot]\themes\butterfly\layout\includes\third-party\pjax.pug的内容。

修改[Blogroot]\_config.butterfly.yml的配置项：

运行hexo cl && hexo g之后即可看到侧栏说说。

TO DO

冰老师原版教程迁移

添加pjax适配

对Artitalk_v3.2.1的适配

对Butterfly_v3.4.0的适配

去jquery化

侧栏说说插件化