之前关于哔哔的教程写的都很乱,并且因为哔哔和Twikoo可能造成的冲突问题导致很多都访问不了,经常出现缓存和无法加载的情况。最终还是用json加载的方式来做bb了。这篇教程可以作为最终版的哔哔教程了。(再也不想折腾这个东西了)

这篇教程不再采用外链形式,一篇搞定全部
本功能已经基本完成,不再添加新功能,除非有bug会在GitHub上热更新,教程部分基本不会再更新,保证较长的生命周期。一次配置,一直使用。

开头

个人精力和能力有限,不是很想折腾cloudbase的相关函数和api,所以用了bber-talk的方式来读json获取动态。

我做了什么?教程根据林木木的相关教程做了Butterfly主题适配和json化。加载速度大幅度提升,但是做了数量限制。

Demo

教程完成之后你会得到:

一个首页的滚动轮播组件

首页轮播

一个可以展示动态的页面

动态列表

和一堆发动态的工具

iOS快捷指令

创建哔哔页面

前期准备

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

创建应用

1.注册云开发CloudBase

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

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

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

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

云函数部署

新建bb函数

1.接着 新建云函数

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

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

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

现在点开看一下,提示 key不匹配,成功!

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

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

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

新建bb-talk函数

首先新建个云函数 bber-talk,打开 index.js 代码复制进去保存,新建并打开 package.json 代码复制进去保存并安装依赖。

新建bb-list函数

首先新建个云函数 bber-list,打开 index.js 代码复制进去保存,新建并打开 package.json 代码复制进去保存并安装依赖。

获取API地址

如果第一次配置需要尝试发一条bb

浏览器直接访问修改好的url:

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

发送一条哔哔之后在云存储的位置能够复制临时链接

主题配置

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
link(rel='stylesheet', href='https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/bb/bber.css', type='text/css')
style(type='text/css').
.timeline ul li::before{
background-image: url(https://cdn.jsdelivr.net/gh/zhheo/Guli@0.6/img/avatar.png);
}
h1.page-title(style='display: inline;')= page.title
#bber-loading
#bber-tips(style='color: var(--heo-secondtext);')
| 只展示最近30条短文
#bber
.js-pjax
script.
var bbapiurl = "https://7477-twikoo-5g4ffmgt1dfd409c-1304738523.tcb.qcloud.la/json/bber-list.json?sign=aab4420d587bbf31fbc071c870924fb7&t=1619186796"
script(type='text/javascript', src='https://cdn.jsdelivr.net/gh/zhheo/bber@main/heobber.js', data-pjax='')

注意:为了减少一个js的引用,本版本不再支持qq微信表情解析,请使用emoji

其中bbapiurl更改为bb-list.json对应的地址
其中https://cdn.jsdelivr.net/gh/zhheo/Guli@0.6/img/avatar.png更改为你的头像

添加判断

编辑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

创建首页滚动组件

创建themes/butterfly/layout/includes/bbTimeList.pug

1
2
3
4
5
6
7
8
9
10
#bbTimeList.bbTimeList.container(onclick=`window.open('/essay/','_self')`)
bblogo(onclick="location='/essay/'",title="即刻短文",style="font-size: 2rem;")
#bbtalk.swiper-container
#bber-talk.swiper-wrapper
i.bber-gotobb.fas.fa-arrow-circle-right(onclick="location='/bb/'",title="查看全文")
.js-pjax
script.
var bbShortApiUrl = "https://7a68-zhheo-0g8unj30bfbeb210-1302424805.tcb.qcloud.la/json/bber.json?sign=6162122afe14a6b7d3f837bb79b02fd9&t=1612691873"
script(src='https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js',data-pjax='')
script(src='https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/bb/showbb_in_index.js',data-pjax='',defer='')

其中bbShortApiUrl对应的地址更改为你自己的bber.json地址

引入到主页

编辑themes/butterfly/layout/index.pug

1
2
3
4
5
6
7
block content
include ./includes/mixins/post-ui.pug
#recent-posts.recent-posts
include includes/categoryList.pug
+ include includes/bbTimeList.pug
+postUI
include includes/pagination.pug

引入css

themes/butterfly/_config.yml中的inject属性的head里添加

1
2
3
4
inject:
head:
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/bb/showbb_in_index.css">

大功告成!

你已经成功部署一个类似朋友圈一样的哔哔啦!加载速度非常快~

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

安装

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

配置

修改快捷指令中的参数

附录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": []
}

关于旧版本教程

旧版本教程不再维护、使用cloudbase相关js、函数等问题不再探讨。

参考文档

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

BBtalk 中文文档