Hexo的Butterfly适配个人动态（哔哔 for 腾讯云），在博客上发朋友圈

本项目已经停止维护，但仍能正常使用，不再进行答疑。新版本项目入口

本项目来自林木木发的「哔哔点啥」微信公众号 2.0做的Butterfly适配。可以通过动态发一些一句话几句话的动态而不是写一篇博客，减少水文，提升整站文章质量。类似朋友圈。

效果预览

Demo

关于首页滚动哔哔可以参考本文

关于首页滚动的扩展阅读

Hexo的Butterfly主页适配哔哔动态，博客主页展示滚动消息

前期准备

首先需要配置腾讯云开发，这个部分可以参考「哔哔点啥」微信公众号 2.0中的配置过程。

教程部分摘录:

这个部分摘录「哔哔点啥」微信公众号 2.0详细图文教程请看原文章，这里指摘录文字部分。

创建应用

1.注册云开发CloudBase

2.进入云开发控制台，新建环境，请按需配置环境。

3.进入环境-登录授权，启用“匿名登录”

4.进入环境-安全配置，将网站域名添加到“WEB安全域名”

5.进入数据库，新建数据库集合，命名 talks，权限设置为 “所有用户可读，仅管理员可写”。

云函数部署

1.接着新建云函数

函数名称 bber （可自定义），进入 函数代码 编辑，复制 index.js 代码丢入 index.js，然后确定。

2.点击“文件 - 新建文件”，复制 package.json 代码丢入 package.json，点击 保存并安装依赖。

3.进入环境-HTTP访问服务，新建，路径与云函数名匹配。

现在点开看一下，提示 key不匹配，成功！

1	https://你后台显示的.ap-shanghai.app.tcloudbase.com/bber

！！！注意：第一时间修改云函数中 bber 这个预设的「自定义apikey」！！！

详细操作步骤可以根据原文来进行，出现错误可以检查本文的哪些步骤没有完成。

主题配置

在themes/butterfly/layout/includes/page新建文件bb.pug

h1.page-title(style='display: inline;')= page.title

#bber-loading
#bber
  .js-pjax
    script(type='text/javascript', src='https://imgcache.qq.com/qcloud/cloudbase-js-sdk/1.4.0/cloudbase.full.js', data-pjax='')
    script(type='text/javascript', src='https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js', data-pjax='')
    script(type='text/javascript', src='https://cdn.jsdelivr.net/gh/buddys/qq-wechat-emotion-parser@master/dist/qq-wechat-emotion-parser.min.js', data-pjax='')

    script.
      const app = cloudbase.init({
      env: 'zhheo-00000000', //这里是你的环境id
      //region: "ap-guangzhou"
      })
    script(type='text/javascript', src='https://cdn.jsdelivr.net/gh/zhheo/bber@main/bber.js', data-pjax='')

添加判断

编辑themes/butterfly/layout/page.pug（注意缩进）

block content
  #page
    case page.type
      when 'tags'
        include includes/page/tags.pug
      when 'link'
        include includes/page/flink.pug
      when 'tlink'
        include includes/page/tlink.pug
      when 'nflink'
        include includes/page/nflink.pug
      when 'categories'
        include includes/page/categories.pug
      when 'artitalk'
        include includes/page/artitalk.pug
+      when 'bb'
+        include includes/page/bb.pug
      default
        include includes/page/default-page.pug

创建网页

在/source/新建文件夹/bb/，在这个文件夹中创建文件index.md

---
title: 动态(beta)
date: 2020-07-22 22:06:17
aside: false
comments: false
type: bb
---

设置导航栏进入

编辑themes/butterfly/_config.yml

menu:
  #首页: / || fas fa-concierge-bell
  文库 || fas fa-book:
    - 文章列表 || /archives/ || fas fa-book-open
    - 全部标签 || /tags/ || fas fa-tags
+    - 我的动态 || /bb/ || fas fa-bomb

大功告成！

现在你就可以玩动态啦！通过「哔哔点啥」微信公众号 2.0可以了解到发送哔哔的方式。调整一点点样式就可以实装了！

附录1:使用iOS快捷指令发哔哔

安装

使用手机Safari浏览器打开立即打开安装快捷指令，第一次运行需要授权。

配置

第一个文本块中输入的是例子：

1	https://你后台显示的.ap-shanghai.app.tcloudbase.com/bber?key=云函数里设置的默认为bber&from=这条哔哔的来源&text=

点击运行即可，运行样式：

附录2:使用uTools发送哔哔

如果电脑没有安装nodejs的request模块的话需要装一下：

1	npm i request

打开uTools，安装快捷命令插件，将下面的代码复制后点击导入命令，从剪贴板导入，然后更改url变量的内容即可。

{
    "features": {
        "code": "key_15gw45g5gf6",
        "explain": "哔哔发射台",
        "cmds": [
            "发送哔哔"
        ],
        "icon": "logo/quickcommand.png",
        "platform": [
            "win32",
            "darwin",
            "linux"
        ]
    },
    "program": "quickcommand",
    "cmd": "const request = require('request');\nvar input = encodeURIComponent(`{{subinput}}`)\n\nvar url = `https://zhheo-0g8unj30bfbeb210-1302424805.ap-shanghai.app.tcloudbase.com/bber?key=zhheobbtime&from=iPhone&text=`+input\n \nrequest(url, { json: true }, (err, res, body) => {\n  if (err) { return console.log(err); }\n  console.log(body.content);\n});",
    "output": "notice",
    "hasSubInput": true,
    "scptarg": "",
    "charset": {
        "scriptCode": "",
        "outputCode": ""
    },
    "tags": []
}