Artitalk Pro

点击查看更新记录

更新记录

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

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

2021-12-20:插件版1.0.5

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

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

1. 权限设置注意事项

2021-07-05:插件版1.0.3

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

2021-07-02:插件版1.0.1

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

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

1. 更新v3.7.0适配方案

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

1. 更新v3.6.0适配方案

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

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

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

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

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

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

点击查看参考教程

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

预览效果

写在最前

本项目是对冰卡诺老师写的教程：基于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 也设置为跟它们一样的权限。此时需要注意，为了让其他人能够看到，或者说为了让前端能够读取说说内容，需要将find和get的权限设置为所有用户。
6. 然后新建一个名为atComment的class，权限什么的使用默认的即可。
7. 点击 class 下的_User->数据->添加列，添加一个新的列，列名称为img，默认值填上你这个账号想要用的发布说说的头像url，这一项不进行配置，说说头像会显示为默认头像 —— Artitalk 的 logo。
8. 在最菜单栏中找到设置-> 应用Keys，记下来AppID 和 AppKey 备用。
9. 最后将 _User 中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据以达到强制发布说说。

前端配置

最新版插件方案（推荐）

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

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

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

   # 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'}

3. 参数释义

参数	备选值/类型	释义
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无法生效。
若您发现自己的说说版块一直显示下雨，请按照以下步骤排查：

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

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

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

下载资源文件

1. 新建[Blogroot]\themes\butterfly\layout\includes\widget\card_shuo.pug,输入内容：

   .card-widget.card-shuo
     .card-content(style='height:auto;min-height:280px;')
       .item-headline
          i.fas.fa-comments
          span= _p('aside.card_shuo')
          a#shuovisualchange(style='cursor:pointer;float:right', onclick='shuovisualchange()') 编辑
       #artitalk_main(style='width:100%;height:100%;padding:1px')
   script(defer src=url_for(theme.CDN.artitalk))
   script(defer src=url_for(theme.CDN.card_artitalk))
   script(defer data-pjax src=url_for(theme.CDN.artitalkkey))

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

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

   • butterfly_3.1.0-3.2.0添加写法
   • butterfly_3.3.0添加写法
   • butterfly_3.4.0-3.5.1添加写法
   • butterfly_3.6.0添加写法

       #aside_content.aside_content
         if theme.aside.card_author.enable
           include ./card_author.pug
         .sticky_layout
   +       if theme.aside.card_shuo.enable
   +         include ./card_shuo.pug
           if theme.aside.card_announcement.enable
             include ./card_announcement.pug
           if theme.aside.card_recent_post.enable
             include ./card_recent_post.pug
           if theme.newest_comments.enable
             include ./card_newest_comment.pug
           if theme.ad && theme.ad.aside

   此处写法是在站点页和文章页都添加了card_shuo，只需要文章页有的就只写上面这个。只需要站点页有的就只写下面这个。

   
   

       #aside_content.aside_content
         if theme.aside.card_author.enable
           !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
         if theme.aside.card_announcement.enable
           !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
         .sticky_layout
           if is_post()
             if showToc
               include ./card_post_toc.pug
   +         if theme.aside.card_shuo.enable
   +           !=partial('includes/widget/card_shuo', {}, {cache:theme.fragment_cache})
             if theme.aside.card_recent_post.enable
               !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
             if theme.ad && theme.ad.aside
               !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
           else
   +         if theme.aside.card_shuo.enable
   +           !=partial('includes/widget/card_shuo', {}, {cache:theme.fragment_cache})
             if theme.aside.card_recent_post.enable
               !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
             if theme.ad && theme.ad.aside
               !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
             if theme.newest_comments.enable
               !=partial('includes/widget/card_newest_comment', {}, {cache:theme.fragment_cache})
             if theme.aside.card_categories.enable
               !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache})
             if theme.aside.card_tags.enable
               !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
             if theme.aside.card_archives.enable
               !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
             if theme.aside.card_webinfo.enable
               !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})

   此处写法是在站点页和文章页都添加了card_shuo，只需要文章页有的就只写上面这个。只需要站点页有的就只写下面这个。

   
   

       #aside_content.aside_content
       //- post
       if is_post()
         if showToc && theme.toc.style_simple
           .sticky_layout
             include ./card_post_toc.pug
         else
           !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
           !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
           .sticky_layout
             if showToc
               include ./card_post_toc.pug
   +         if theme.aside.card_shuo.enable
   +           !=partial('includes/widget/card_shuo', {}, {cache:theme.fragment_cache})
             !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
             !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
       else
         //- page
         !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
         !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
         .sticky_layout
   +       if theme.aside.card_shuo.enable
   +         !=partial('includes/widget/card_shuo', {}, {cache:theme.fragment_cache})
           !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
           !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
           !=partial('includes/widget/card_newest_comment', {}, {cache:theme.fragment_cache})
           !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache})
           !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
           !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
           !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})  

   此处写法是在站点页和文章页都添加了card_shuo，只需要文章页有的就只写上面这个。只需要站点页有的就只写下面这个。

   
   

       #aside_content.aside_content
       //- post
       if is_post()
         if showToc && theme.toc.style_simple
           .sticky_layout
             include ./card_post_toc.pug
         else
           !=partial('includes/widget/card_author', {}, {cache: true})
           !=partial('includes/widget/card_announcement', {}, {cache: true})
           .sticky_layout
             if showToc
               include ./card_post_toc.pug
   +         if theme.aside.card_shuo.enable
   +           !=partial('includes/widget/card_shuo', {}, {cache: true})
             !=partial('includes/widget/card_recent_post', {}, {cache: true})
             !=partial('includes/widget/card_ad', {}, {cache: true})
       else
         //- page
         !=partial('includes/widget/card_author', {}, {cache: true})
         !=partial('includes/widget/card_announcement', {}, {cache: true})
         .sticky_layout
   +       if theme.aside.card_shuo.enable
   +         !=partial('includes/widget/card_shuo', {}, {cache: true})
           !=partial('includes/widget/card_recent_post', {}, {cache: true})
           !=partial('includes/widget/card_ad', {}, {cache: true})
           !=partial('includes/widget/card_newest_comment', {}, {cache: true})
           !=partial('includes/widget/card_categories', {}, {cache: true})
           !=partial('includes/widget/card_tags', {}, {cache: true})
           !=partial('includes/widget/card_archives', {}, {cache: true})
           !=partial('includes/widget/card_webinfo', {}, {cache: true})  

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

   function shuovisualchange() {
     let obt = document.getElementById("shuovisualchange");
     let odiv = $(".power").css("display");
   
   
     if (odiv == "none") {
       $(".power").css({"display": "inline"});
       $(".shuoshuo_author_img").css({"display": "inline"});
       obt.innerHTML = "隐藏";
     } else {
       $(".power").css({"display": "none"});
       $(".shuoshuo_author_img").css({"display": "none"});
       obt.innerHTML = "编辑";
     }
   }

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

   new Artitalk({
       appId: 'Hg****Nqlisn3Uce****nctL-Md***MMI',  //替换为你的appId
       appKey: 'NTR******T2pr****XVbDMyt', //替换为你的appKey
     	pageSize: 1,
     	color1: "#49b1f5",
     	color2: "#00c4b6",
       serverURL: "https://Hg****Nq.api.lncldglobal.com",
       //Hg****Nq替换为你的appId前八位
   });
   $(".power").css("padding","10px");
   $(".power").css("text-align","left");
   $("#switchUser").css("padding-right","10px");
   $("#pubShuo").css("padding-right","10px");
   $("#pubComment").css("padding-right","10px");
   $("#uploadSource").css("padding-right","10px");

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

   if hexo-config('aside.card_shuo.enable')
     .cbp_tmlabel
       &:after
         border-right-color transparent !important
   
     #artitalk_main
       .cbp_tmtimeline
         & > li
           .cbp_tmlabel
             display inline-block!important
             margin 0 0 30px 0px !important
             &:after
               border-right-color transparent !important
   
     .artitalk_avatar
       width 40px
       height 40px
   
     span
       &.shuoshuo_author_img
         display none
   
     .power
       display none

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

       aside:
         articles: 文章
         tags: 标签
         categories: 分类
         Link: 友人帐
         About: 关于
         card_announcement: 告示牌
   +     card_shuo: 碎碎念

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

   • 新增侧栏开关配置项

         aside:
           enable: true
           hide: false
           button: true
           mobile: true # display on mobile
           position: right # left or right
           card_author:
             enable: true
             description:
             button:
               icon:
               text:
               link:
     +     card_shuo:
     +       enable: true #侧栏说说

   • 新增js引入CDN配置项

       CDN:
         # main
         main_css: /css/index.css
         jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js
     +   card_artitalk: /js/card_artitalk.js # 侧栏说说
     +   artitalkkey: /js/artitalkkey.js

   • 如果是Butterfly_v3.4.0及以上版本，需要再添加jquery引入项。

     inject:
       head:
       bottom:
         - <script src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script>
         # 注意不要添加defer或async等任意异步加载标签

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

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

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

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

下载2.1版本资源文件

1. 新建[Blogroot]\themes\butterfly\layout\includes\widget\card_shuo.pug,输入内容：

   .card-widget.card-shuo
     .card-content(style='height:auto;min-height:280px;')
       .item-headline
          i.fas.fa-comments
          span= _p('aside.card_shuo')
          a#shuovisualchange(style='cursor:pointer;float:right', onclick='shuovisualchange()') 编辑
       #artitalk_main(style='width:100%;height:100%;padding:1px')
   
   script(async).
     function shuovisualchange() {
     let btninner = document.getElementById("shuovisualchange");
     let powervis = document.getElementsByClassName('power')[0].style.display;
     if (powervis == "none") {
       document.getElementsByClassName('power')[0].style.display = 'inline';
       var authorlist = document.getElementsByClassName("shuoshuo_author_img");
       if (authorlist) {
         for (var i = 0; i < authorlist.length; i++) {
           var authorimg = authorlist[i];
           authorimg.style.display = "inline";
         }
       }
       btninner.innerHTML = "隐藏";
     } else {
       document.getElementsByClassName('power')[0].style.display = 'none';
       var authorlist = document.getElementsByClassName("shuoshuo_author_img");
       if (authorlist) {
         for (var i = 0; i < authorlist.length; i++) {
           var authorimg = authorlist[i];
           authorimg.style.display = "none";
         }
       }
       btninner.innerHTML = "编辑";
     }
     }
   
   
   - let option = theme.artitalk.option ? JSON.stringify(theme.artitalk.option) : false
   .pjax-reload
     script.
       (()=>{
         let setting = {
           appId: '!{theme.artitalk.appId}',
           appKey: '!{theme.artitalk.appKey}',
         }
   
         if (!{Boolean(option)}) {
           const otherSetting = !{option}
           setting = Object.assign({}, setting, otherSetting)
         }
   
         const init = () => {
           new Artitalk(setting)
         }
   
         if (typeof Artitalk === 'function') {
           init()
         } else {
           getScript('!{theme.CDN.artitalk}').then(init)
         }
       })()

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

   • butterfly_3.1.0-3.2.0添加写法
   • butterfly_3.3.0添加写法
   • butterfly_3.4.0添加写法

       #aside_content.aside_content
         if theme.aside.card_author.enable
           include ./card_author.pug
         .sticky_layout
   +       if theme.aside.card_shuo.enable
   +         include ./card_shuo.pug
           if theme.aside.card_announcement.enable
             include ./card_announcement.pug
           if theme.aside.card_recent_post.enable
             include ./card_recent_post.pug
           if theme.newest_comments.enable
             include ./card_newest_comment.pug
           if theme.ad && theme.ad.aside

   此处写法是在站点页和文章页都添加了card_shuo，只需要文章页有的就只写上面这个。只需要站点页有的就只写下面这个。

   
   

       #aside_content.aside_content
         if theme.aside.card_author.enable
           !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
         if theme.aside.card_announcement.enable
           !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
         .sticky_layout
           if is_post()
             if showToc
               include ./card_post_toc.pug
   +         if theme.aside.card_shuo.enable
   +           !=partial('includes/widget/card_shuo', {}, {cache:theme.fragment_cache})
             if theme.aside.card_recent_post.enable
               !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
             if theme.ad && theme.ad.aside
               !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
           else
   +         if theme.aside.card_shuo.enable
   +           !=partial('includes/widget/card_shuo', {}, {cache:theme.fragment_cache})
             if theme.aside.card_recent_post.enable
               !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
             if theme.ad && theme.ad.aside
               !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
             if theme.newest_comments.enable
               !=partial('includes/widget/card_newest_comment', {}, {cache:theme.fragment_cache})
             if theme.aside.card_categories.enable
               !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache})
             if theme.aside.card_tags.enable
               !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
             if theme.aside.card_archives.enable
               !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
             if theme.aside.card_webinfo.enable
               !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})

   此处写法是在站点页和文章页都添加了card_shuo，只需要文章页有的就只写上面这个。只需要站点页有的就只写下面这个。

   
   

       #aside_content.aside_content
       //- post
       if is_post()
         if showToc && theme.toc.style_simple
           .sticky_layout
             include ./card_post_toc.pug
         else
           !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
           !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
           .sticky_layout
             if showToc
               include ./card_post_toc.pug
   +         if theme.aside.card_shuo.enable
   +           !=partial('includes/widget/card_shuo', {}, {cache:theme.fragment_cache})
             !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
             !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
       else
         //- page
         !=partial('includes/widget/card_author', {}, {cache:theme.fragment_cache})
         !=partial('includes/widget/card_announcement', {}, {cache:theme.fragment_cache})
         .sticky_layout
   +       if theme.aside.card_shuo.enable
   +         !=partial('includes/widget/card_shuo', {}, {cache:theme.fragment_cache})
           !=partial('includes/widget/card_recent_post', {}, {cache:theme.fragment_cache})
           !=partial('includes/widget/card_ad', {}, {cache:theme.fragment_cache})
           !=partial('includes/widget/card_newest_comment', {}, {cache:theme.fragment_cache})
           !=partial('includes/widget/card_categories', {}, {cache:theme.fragment_cache})
           !=partial('includes/widget/card_tags', {}, {cache:theme.fragment_cache})
           !=partial('includes/widget/card_archives', {}, {cache:theme.fragment_cache})
           !=partial('includes/widget/card_webinfo', {}, {cache:theme.fragment_cache})  

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

   if hexo-config('aside.card_shuo.enable')
     .cbp_tmlabel
       &:after
         border-right-color transparent !important
   
     #artitalk_main
       .cbp_tmtimeline
         & > li
           .cbp_tmlabel
             display inline-block!important
             margin 0 0 30px 0px !important
             &:after
               border-right-color transparent !important
   
     .artitalk_avatar
       width 40px
       height 40px
   
     span
       &.shuoshuo_author_img
         display none
   
     .power
       display none
       padding 10px!important
       text-align left!important
   
     #switchUser,
     #pubShuo,
     #pubComment,
     #uploadSource
       padding-right 10px!important
     #uploadSource
       .icon
         width 1.2em!important
         height 1.2em!important
         vertical-align 0!important

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

       aside:
         articles: 文章
         tags: 标签
         categories: 分类
         Link: 友人帐
         About: 关于
         card_announcement: 告示牌
   +     card_shuo: 碎碎念

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

   • Butterfly_v3.0.0-3.3.0
   • Butterfly_v3.4.0

   原则上不推荐再用低于v3.4.0的版本，新版方案已经实现去jquery化，而此处的pjax适配仍然是需要jquery的。

   
   

   -   $('script[data-pjax]').each(function () {
   +   $('script[data-pjax], .pjax-reload script').each(function () {
         $(this).parent().append($(this).remove())
       })

   -   document.querySelectorAll('script[data-pjax]').forEach(item => {
   +   document.querySelectorAll('script[data-pjax], .pjax-reload script').forEach(item => {
         const newScript = document.createElement('script')
         const content = item.text || item.textContent || item.innerHTML || ""
         Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
         newScript.appendChild(document.createTextNode(content))
         item.parentNode.replaceChild(newScript, item)
       })

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

   • 新增card_shuo开关配置项

         aside:
           enable: true
           hide: false
           button: true
           mobile: true # display on mobile
           position: right # left or right
           card_author:
             enable: true
             description:
             button:
               icon:
               text:
               link:
     +     card_shuo:
     +       enable: true #侧栏说说

   • 配置Artitalk配置项（更多参数请参阅Artitalk官方文档）:

     # Artitalk
     # see https://artitalk.js.org/
     artitalk:
       appId: ********lisn3Uc****YnctL-MdYXbMMI
       appKey: NT****eLT2pr****XV**Myt
       option:
         serverURL: https://********.api.lncldglobal.com  #********替换为你的appid前八位
         lang: zh
         pageSize: 1
         color1: '#49b1f5' #注意要用单引号包起来
         color2: '#00c4b6' #注意要用单引号包起来
         atEmoji: {
           'baiyan':'https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/baiyan.png',
           'bishi':'https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/bishi.png',
           'bizui':'https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/bizui.png',} #自定义表情包配置示例

     Butterfly_v3.7.0移除了Artitalk配置项,转为插件版。但是根据插件版的配置文档来看，appId、appKey、option及option内的内容可以共用。
     

     # Artitalk
     # see https://artitalk.js.org/
     artitalk:
       enable: true
       appId:
       appKey:
       path:
       js:
       option:
       front_matter:

   • 因为Butterfly_v3.7.0移除了Artitalk配置项，需要自己重新添加Artitalk CDN配置项

     CDN:
       # main
       main_css: /css/index.css
       jquery: https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js
       main: /js/main.js
       utils: /js/utils.js
       ## 仅`Butterfly_v3.7.0+`需要自己重新添加
       artitalk: https://npm.elemecdn.com/artitalk

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

TO DO

冰老师原版教程迁移

添加pjax适配

对Artitalk_v3.2.1的适配

对Butterfly_v3.4.0的适配

去jquery化

侧栏说说插件化