点击查看更新记录

更新记录

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适配方案

2021-07-02:插件版1.0.1

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

2021-07-05:插件版1.0.3

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

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

  1. 权限设置注意事项
点击查看参考教程
参考方向教程原贴
项目教程原帖教程:基于Butterfly主题的侧边栏说说
项目售后
Artitalk后端配置Artitalk官方文档

写在最前

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

后端配置

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

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

  1. 前往LeanCloud 国际版,注册账号。
  2. 注册完成之后根据 LeanCloud的提示绑定手机号和邮箱。
  3. 绑定完成之后点击创建应用,应用名称随意,接着在存储->结构化数据中选择创建class,命名为 shuoshuo

    务必严格按照文档要求,将新建class命名为shuoshuo,不要改成artitalk,否则会因为和artitalk.js的保留类名冲突导致bug。

  4. 在你新建的应用中找到存储->用户。点击添加用户,输入想用的用户名及密码。
  5. 回到存储->结构化数据,点击 class 下的 shuoshuo。找到权限,在 Class访问权限中将 add_fields 以及 create 权限设置为指定用户,输入你刚才输入的用户名会自动匹配。为了安全起见,将 deleteupdate 也设置为跟它们一样的权限。此时需要注意,为了让其他人能够看到,或者说为了让前端能够读取说说内容,需要将findget的权限设置为所有用户
  6. 然后新建一个名为atCommentclass,权限什么的使用默认的即可。
  7. 点击 class 下的_User->数据->添加列,添加一个新的列,列名称为img,默认值填上你这个账号想要用的发布说说的头像url,这一项不进行配置,说说头像会显示为默认头像 —— Artitalklogo
  8. 在最菜单栏中找到设置-> 应用Keys,记下来AppIDAppKey 备用。
  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://cdn.jsdelivr.net/npm/artitalk
    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.cardtrue/false【必选】侧边栏控制开关
enable.pagetrue/false【必选】页面插件控制开关
prioritynumber【可选】过滤器优先级,数值越小,执行越早,默认为10,选填
enable_pagepath/all【可选】填写想要应用的页面的相对路径(即路由地址),如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面,就填’all’,默认为all
layout.typeid/class【可选】挂载容器类型,填写id或class,不填则默认为id
layout.namestring【必选】挂载容器名称
layout.index0和正整数【可选】前提是layout.type为class,因为同一页面可能有多个class,此项用来确认究竟排在第几个顺位
pathstring【可选】Artitalk的路径名称(默认为artitalk,生成的页面为artitalk/index.html)
front_matterjson【可选】Artitalk 頁面的 front_matter 配置
appIdstring【必选】LeanCloud创建的应用中的 AppID
appKeystring【必选】LeanCloud创建的应用中的AppKEY
excludeURL【可选】若同时开启了页面版和侧栏版插件,则需要手动填写页面版的相对链接。以保证在页面版不会加载侧栏版插件。可以多个。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配,若当前路径包含任一屏蔽项,则不会挂载。
jsURL【可选】Artitalk的CDN链接,默认为https://cdn.jsdelivr.net/npm/artitalk
optionjson【可选】Artitalk需要的额外配置,详情可以参考Artitalk官方文档
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-pjaxbutterfly主题自带的一个pjax重载标记,添加该标记的js会在页面切换时重载。
  2. 修改[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})

  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://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/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的可以考虑使用旧版方案,或者研读新版方案关于具体版本的适配过程。

  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,注意对齐格式。

        #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的内容。

    原则上不推荐再用低于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配置项,转为插件版。但是根据插件版的配置文档来看,appIdappKeyoptionoption内的内容可以共用。

      # 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://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
      main: /js/main.js
      utils: /js/utils.js
      # 仅`Butterfly_v3.7.0+`需要自己重新添加
      artitalk: https://cdn.jsdelivr.net/npm/artitalk
  7. 运行hexo cl && hexo g之后即可看到侧栏说说。

TO DO

冰老师原版教程迁移

添加pjax适配

对Artitalk_v3.2.1的适配

对Butterfly_v3.4.0的适配

去jquery化

侧栏说说插件化