教程：基于Butterfly主题的侧边栏说说

当前教程已暂停维护

最新教程，请参考最新教程akilar- 基于 Butterfly 的侧边栏 Artitalk

序言：效果展示

因为想着想把说说放在主页，但又觉得放文章主区域比较碍事。
于是写了这个侧边栏的样式。
比较苦恼的是，我更新之后的 artitalk 在主页不能正常调用，于是我写的额外的 js。
至于 artitalk 的配置教程这里不过与赘述。不过如果你使用 vline 的话，
请将 artitalk 和 vline 配置在同一个应用中。
artitalk 的 leancloud 主要配置方法请参考
https://artitalk.js.org/doc.html

前往 LeanCloud 国际版，注册账号。
注册完成之后根据 LeanCloud 的提示绑定手机号和邮箱。
绑定完成之后点击创建应用，应用名称随意，接着在结构化数据中创建 class，命名为 shuoshuo。
在你新建的应用中找到结构化数据下的用户。点击添加用户，输入想用的用户名及密码。
回到结构化数据中，点击 class 下的 shuoshuo。找到权限，在 Class 访问权限中将 add_fields 以及 create 权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将 delete 和 update 也设置为跟它们一样的权限。
然后新建一个名为atComment的 class，权限什么的使用默认的即可。
点击 class 下的 _User 添加列，列名称为 img，默认值填上你这个账号想要用的发布说说的头像 url，这一项不进行配置，说说头像会显示为默认头像 —— Artitalk 的 logo。
在最菜单栏中找到设置-> 应用 keys，记下来 AppID 和 AppKey ，一会会用。
最后将 _User 中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据已达到强制发布说说。
资源包地址：https://github.com/Zfour/Butterfly-shuo

资源包下载

步骤 1：修改 pug 代码

下载资源包

资源包下载

增加、替换代码

前往”根目录\themes\butterfly\layout\includes\widget”文件夹，将资源包中的”card_shuo.pug”复制到文件夹中。

打开”\themes\butterfly\layout\includes\widget”路径下的”index.pug”

使用文件夹中的”index.pug”进行替换，如果你存在侧边栏魔改请手动修改。

将 card_shuo 代码添加至 card_author 代码块后。添加后的代码如下：

#aside_content.aside_content
  if theme.aside.card_author.enable
    include ./card_author.pug
  if theme.aside.card_shuo.enable
    include ./card_shuo.pug
  .sticky_layout
    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
      include ./card_ad.pug
    if theme.aside.card_categories.enable
      include ./card_categories.pug
    if theme.aside.card_tags.enable
      include ./card_tags.pug
    if theme.aside.card_archives.enable
      include ./card_archives.pug
    if theme.aside.card_webinfo.enable
      include ./card_webinfo.pug

打开”\themes\butterfly"路径下的”_config.yml”

搜索到”aside:”设置处

添加 card_shuo 开关代码：

aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_shuo:
    enable: true
  card_author:
    enable: true

步骤 2：添加引入 js、css 代码

放置资源包

将下载包中的 shuoshuo 文件夹放入根目录的”source”文件夹下。

引入 js 和 css

打开”\themes\butterfly"路径下的”_config.yml”

搜索到”inject:”设置处

添加以下代码：

你需要更改”artitalkkey.js”中的 ID 和 appKey 为你的 vline 相同的应用信息。

inject:
  head:
    - <link rel="stylesheet" href="/shuoshuo/css/shuo.css"/>

  bottom:
    - <script src="https://cdn.jsdelivr.net/npm/artitalk"></script>
    - <script src="/shuoshuo/js/shuo.js"></script>
    - <script src="/shuoshuo/js/artitalkkey.js"></script>