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

本项目来自林木木发的「哔哔点啥」微信公众号 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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(注意缩进)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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

1
2
3
4
5
6
7
---
title: 动态(beta)
date: 2020-07-22 22:06:17
aside: false
comments: false
type: bb
---

设置导航栏进入

编辑themes/butterfly/_config.yml

1
2
3
4
5
6
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发送哔哔

如果电脑没有安装nodejsrequest模块的话需要装一下:

1
npm i request

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
"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": []
}

附录3:css样式

附上我用的样式,可供参考。可以在配置文件中引用,也可以在bb.pug文件中插入。

以下二选一即可。

配置文件中插入

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/bb/bber.css" type="text/css" >

bb.pug中插入

1
link(rel='stylesheet', href='https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/bb/bber.css', type='text/css')

推荐参考

「哔哔点啥」微信公众号 2.0
哔哔官网