本文章根据洪哥的《Hexo-Butterfly说说朋友圈适配(哔哔 for 腾讯云)自用》结合我自己的魔改心得编写而成,仅用于记录笔记和学习。

开头

闲的无聊就喜欢逛别人的博客,曾多次看到哔哔这个功能,早在2020年使用handsome主题的时候就有用过类似功能,但是因为魔改起来操作繁琐,还容易遇到各种兼容性问题就一直没有付出行动,但这次偶然之间翻阅洪哥的博客,看到了关于哔哔的教程,就浅浅的尝试了一下,虽然过程很曲折,耗时两天,但最终还是成功了。

创建哔哔页面

  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 代码复制进去保存并安装依赖。

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

获取API地址

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

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

1
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.bilicdn.tk/gh/zhheo/JS-Heo@main/bb/bber.css', type='text/css')
style(type='text/css').
.timeline ul li::before{
background-image: url(https://cdn.bilicdn.tk/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.bilicdn.tk/gh/zhheo/bber@main/heobber.js', data-pjax='')

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

我的配置备份(用于主题更新)

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
link(rel='stylesheet', href='https://cdn.bilicdn.tk/npm/bber-sianx@1.0.1/bb/bber.min.css', type='text/css')
style(type='text/css').
.timeline ul li::before{
background-image: url(https://cdn.bilicdn.tk/npm/picture-sianx@1.0.0/Blog/logo.png);
}
h1.page-title(style='display: inline;color: var(--text-highlight-color);')
| 时光机
#bber-loading
#bber-tips(style='color: var(--heo-secondtext);')
| 只展示最近30条短文
#bber
.js-pjax
script.
var bbapiurl = "https://7477-twikoo-5gcohu0q16556e91-1300732217.tcb.qcloud.la/json/bber-list.json?sign=71728b11cb190120c7093777824187d0&t=1649859066"
script(type='text/javascript', src='https://cdn.bilicdn.tk/npm/bber-sianx@1.0.1/heobber.min.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
我的配置备份(用于主题更新)

编辑themes/butterfly/layout/page.pug(注意缩进)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
block content
#page
if top_img === false
h1.page-title= page.title

case page.type
when 'tags'
include includes/page/tags.pug
when 'link'
include includes/page/flink.pug
when 'categories'
include includes/page/categories.pug
+ when 'time'
+ include includes/page/time.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.bilicdn.tk/npm/swiper/swiper-bundle.min.js',data-pjax='')
script(src='https://cdn.bilicdn.tk/gh/zhheo/JS-Heo@main/bb/showbb_in_index.js',data-pjax='',defer='')

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

我的配置备份(用于主题更新)

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

1
2
3
4
5
6
7
8
9
10
#bbTimeList.bbTimeList.container(onclick=`window.open('/time/','_self')`)
i.bber-gotobb.far.fa-comment-alt(onclick="location='/time/'",title="我的动态")
#bbtalk.swiper-container
#bber-talk.swiper-wrapper
i.bber-gotobb.fas.fa-angle-double-right(onclick="location='/time/'",title="查看全文")
.js-pjax
script.
var bbShortApiUrl = "https://7477-twikoo-5gcohu0q16556e91-1300732217.tcb.qcloud.la/json/bber.json?sign=10dd7289d2843397bc6934540ba83865&t=1649901997"
script(src='https://cdn.bilicdn.tk/npm/swiper/swiper-bundle.min.js',data-pjax='')
script(src='https://cdn.bilicdn.tk/npm/bber-sianx@1.0.1/bb/showbb_in_index.min.js',data-pjax='',defer='')

引入到主页

编辑 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.bilicdn.tk/npm/swiper/swiper-bundle.min.css">
- <link rel="stylesheet" href="https://cdn.bilicdn.tk/gh/zhheo/JS-Heo@main/bb/showbb_in_index.css">

自定义css

以上部分操作完成后理论上应该没问题了,但是我还是碰到了一些小问题,这里添加一些CSS解决一下。

1
2
3
4
5
6
7
8
9
10
11
12
/* 哔哔主页相关 */
#bbTimeList {
width: 100%; /* 框不全 */
border: 2px solid #9c9;
align-items: center; /* 图标不居中 */ /* 其它方法#bbTimeList加一个声明justify-content: space-between; */
}
#bbtalk {
width: 100%; /* 内容与图标不局中 */
}
#bber > section > ul > div > li > div .datacont{
color: #6667AB !important
}

其它

问题解决

在我搞完哔哔写这篇文章的时候发现了一个bugmkdown有序列表的序号不显示了,经过排查发现是showbb_in_index.css这个文件引起的。

解决方法

新的css文件洪哥应该已经解决bug了,洪哥说理论上可有可无所以我的办法是删除以下代码:

1
2
3
4
5
6
ul,li{
list-style:none;
display:block;
margin: 0;
padding: 0;
}

Chrome + Edge 发布说说

小康大佬,为我们带来了一款 Edge 扩展插件,可以随时 Edge 浏览器中,发布说说。《iSpeak-bber 时光机》

但是,配置稍微有点小复杂,小康没写文档,第一次根本不知道怎么配置。

配置方法
输入接口地址:
https://你后台显示的.ap-shanghai.app.tcloudbase.com/bber
输入Key:
默认bber
输入From:
Chrome