序言：效果展示

这个插件基于RollToolsApi

在使用前请先在微信搜索小程序“Roll 地盘”获取 api.id 和 api.key。

**想体验接口？ **
可获取临时 app_id 测试，获取方式：扫描下方小程序码->选择 TAB-我的->点击获取临时 app_id 即可获取临时体验接口的 app_id 和 app_secret，此 app_id 仅为测试使用，次日凌晨自动重置，重置之后之前生成的 app_id 将失效，真正使用接口请申请属于自己专属的 app_id。

**如何注册 app_id 和 app_secret 呢？ **
搜索微信小程序【Roll 地盘】，进入我的页面，绑定手机号之后即可获取你的专属 app_id 和 app_secret，使用新方式吧骚年！

捐助 api？
由于服务器端的维护以及部分接口的维护都是需要付费的，所以如果此项目对您有帮助，还希望您捐赠支持，让我能好好的一直坚持下去。金额不在于多少，一份心意就好！在此感谢捐赠列表中所有的捐赠者，你们的鼓励是我最大的动力！

本侧边栏部件通过 vuejs 进行编码。

资源包地址：https://github.com/Zfour/Butterfly-news

资源包下载

废话不多说了，开始教学。

步骤 1：修改 pug 代码

下载资源包

资源包下载

增加、替换代码

将资源包中 pug 文件夹的 card_news.pug 文件放入”\themes\butterfly\layout\includes\widget”目录下。

将资源包 pug 文件夹的 index.pug 文件放入”\themes\butterfly\layout\includes\widget”目录下替换。(适用于 3.1 版本以上)

若你的版本较低或存在侧边栏魔改，请打开”\themes\butterfly\layout\includes\widget”路径下的”index.pug”

将 card_news 代码部分添加至 card_author 代码块后。添加的代码如下：

1
2
if theme.aside.card_news.enable
  !=partial('includes/widget/card_news', {}, {cache:theme.fragment_cache})

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

搜索到”aside:”设置处

添加 news 开关代码：

1
2
3
4
5
6
7
8
aside:
  enable: true
  mobile: true # display on mobile
  position: right # left or right
  card_news:
    enable: true
  card_author:
    enable: true

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

放置资源包

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

引入 js 和 css

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

搜索到”inject:”设置处

添加以下代码：

若已有 vue 引入，请确保 vue 的版本为 2.6 以上。

keys.js 一定要放在 news.js 之前。

1
2
3
4
5
6
7
8
inject:
  head:
    - <link rel="stylesheet" href="/news/css/news.css"/>

  bottom:
    - <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    - <script src="/news/js/keys.js"></script>
    - <script src="/news/js/news.js"></script>

步骤 3：填写 key

请获取微信小程序【Roll 地盘】中的 api.id 和 api.key。

配置 key 信息

打开’source/news/js/keys.js’文件，将对应的 api.id 和 api.key 填入。

1
2
3
4
const newskey = {
  id: "********",
  key: "*******",
};

此时，”hexo g && hexo s”可发现已加载。

js 文件的加密

在确保加载成功后，需进行 js 文件的加密。

为了保障自己的 key 不被泄露及恶意引用，需要对 keys.js 进行加密处理。

前往https://www.jsjiami.com/进行 js 加密。

在点击 js 混淆加密之前，设置高级选项，进行域名限制防止恶意调用。

但这样在 localhost 时也会禁止调用且会导致浏览器卡死，请在本地调试时将 inject 的 keys.js 注释掉。

你也可以选择其他加密手段，请确保对引入 js 的访问限制及加密混淆。

总结

若有问题请与我邮件联系499984532@qq.com。