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

效果预览

Demo

查看如何配置bb

Hexo的Butterfly适配个人动态(哔哔 for 腾讯云),在博客上发朋友圈

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

前期准备

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

总的来说:

  • 自动部署
    一键部署 -> 配置权限
  • 手动部署
    配置权限 -> 新建函数bber -> index.js -> package.json -> 新建数据库talks并配置权限 -> 配置HTTP访问服务

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

主题配置

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
h1.page-title(style='display: inline;')= page.title

#bber
.js-pjax
script(type='text/javascript', src='https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js', data-pjax='')
script(src='https://cdn.bootcss.com/vue/2.6.11/vue.min.js')
script(type='text/javascript', src='https://cdn.jsdelivr.net/gh/TencentCloudBase/tcb-js-sdk@master/tcbjs/1.10.10/tcb.js', data-pjax='')

script(src='https://cdn.jsdelivr.net/gh/buddys/qq-wechat-emotion-parser@master/dist/qq-wechat-emotion-parser.min.js', data-pjax='')

script.
const app = tcb.init({
env: 'zhheo-00000000', //这里是你的环境id
//region: "ap-guangzhou"
})
script(async='',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发送哔哔

打开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样式

附上我用的样式,可供参考

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/* bb哔哔 */
/* bb样式 */

.timeline ul li{
position: relative;
padding-left: 2.5rem;
}

/* 标题 */
.bb-info{
display: inline;
float: right;
line-height: 3.7rem;
color: var(--heo-secondtext);
}

/* 每条动态 */
#bber > section > ul > div > li > div{
display: flex;
flex-direction: initial;
flex-wrap: wrap;
background: var(--heo-post-blockquote-bg);
box-shadow: var(--heo-shadow-lightblack);
border-radius: 12px;
padding: 8px 16px;
margin-top: 12px;
}

#bber p{
margin: 0;
}

#bber .datafrom i{
margin-right: 4px;
}

/* 时间 */
#bber > section > ul > div > li > div .datatime{
order: 1;
color: var(--heo-secondtext);
font-size: 0.6rem;
}

/* 内容 */
#bber > section > ul > div > li > div .datacont{
order: 0;
font-size: 1rem;
font-weight: bold;
color: var(--heo-lighttext);
width: 100%;
line-height: 1.38;
margin: 8px 0;
}

/* 设备 */
#bber > section > ul > div > li > div .datafrom{
order: 2;
color: var(--heo-secondtext);
font-size: 0.6rem!important;
margin-left: 8px;
}
#bber > section > ul > div > li > div .datafrom small{
font-size: 100%;
}

/* 时间线 */
.timeline ul li::before {
position: absolute;
top: 0.5rem;
left: 0rem;
z-index: 1;
width: 2rem;
height: 2rem;
border-radius: 8px;
background: var(--card-bg);
content: "";
background-image: url(https://cdn.jsdelivr.net/gh/zhheo/Guli@0.6/img/avatar.png);
background-size: 2rem;
}

/* 加载更多 */
.load-btn.button-load{
background: var(--heo-card-btn-bg);
color: var(--heo-fontcolor);
padding: 12px 12px;
margin: 8px 0;
width: 100%;
text-align: center;
border-radius: 12px;
transition: 0.3s;
font-weight: bold;
}

.load-btn.button-load:hover{
background: var(--heo-main);
color: var(--heo-white);
transition: 0.3s;
box-shadow: var(--heo-shadow-blue);
}

推荐参考

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