Artitalk Pro

点击查看更新记录

更新记录

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]下打开终端，运行以下指令：

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

添加配置信息，以下为写法示例
在站点配置文件_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'}

参数释义

参数	备选值/类型	释义
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,输入内容：

.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会在页面切换时重载。

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

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

新建[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 = "编辑";
  }
}

新建[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");

新建[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

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

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

修改[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等任意异步加载标签

运行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,输入内容：

.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)
      }
    })()

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

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

新建[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

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

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

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

原则上不推荐再用低于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)
    })

修改[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