点击查看更新记录
更新记录
2020-12-14:正式版v1.02
- 接手冰卡诺老师的侧栏说说售后工作。
- 适配了Pjax，恢复头像显隐，保留修改说说功能。
- 适配了Artitalk_v3.2.1版本样式适配。
2020-12-15:正式版v2.0
- 代码重构。内嵌了Butterfly主题的部分原生代码。
- 去Jquery化。
- 将原生代码修改为async异步加载。
- 支持通过主题配置文件进行配置。
- 更改了pjax配置内容。
2020-12-15:正式版v2.1
- 错误示例修正。
- 取消styl文件的应急预案。
2021-01-31:正式版v2.1.1
- 更新v3.6.0适配方案
2021-03-19:正式版v2.1.2
- 更新v3.7.0适配方案
点击查看参考教程
参考方向 | 教程原贴 |
|---|---|
项目教程原帖 | 教程：基于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也设置为跟它们一样的权限。 - 然后新建一个名为
atComment的class，权限什么的使用默认的即可。 - 点击
class下的_User->数据->添加列，添加一个新的列，列名称为img，默认值填上你这个账号想要用的发布说说的头像url，这一项不进行配置，说说头像会显示为默认头像 ——Artitalk的logo。 - 在最菜单栏中找到设置-> 应用Keys，记下来
AppID和AppKey备用。 - 最后将
_User中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据以达到强制发布说说。
前端配置
旧版方案（需要jquery和外挂css）
由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源。参照教程进行修改。
下载资源文件
新建,输入内容：
defer是异步加载标签，能够减少Html阻塞。同时保证js加载顺序。data-pjax是butterfly主题自带的一个pjax重载标记，添加该标记的js会在页面切换时重载。
修改[Blogroot]themesbutterflylayoutincludeswidgetindex.pug，注意对齐格式。
新建[Blogroot]themesbutterflysourcejscard_artitalk.js用以控制头像及各类按钮显隐。
新建[Blogroot]themesbutterflysourcejsartitalkkey.js用来导入card_shuo初始化配置。
新建[Blogroot]themesbutterflysourcecss_layoutcard_shuo.styl,输入内容：
找到[Blogroot]themesbutterflylanguageszh-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]themesbutterflylayoutincludeswidgetcard_shuo.pug,输入内容：
修改[Blogroot]themesbutterflylayoutincludeswidgetindex.pug，注意对齐格式。
新建[Blogroot]themesbutterflysourcecss_layoutcard_shuo.styl,输入内容：
找到[Blogroot]themesbutterflylanguageszh-CN.yml,新增说说侧栏标题内容(也可以改成任意你喜欢的侧栏标题名称)：
修改[Blogroot]themesbutterflylayoutincludesthird-partypjax.pug的内容。
修改[Blogroot]_config.butterfly.yml的配置项：
运行hexo cl && hexo g之后即可看到侧栏说说。
TO DO
冰老师原版教程迁移
添加pjax适配
对Artitalk_v3.2.1的适配
对Butterfly_v3.4.0的适配
去jquery化
侧栏说说插件化
