哔哔动态

本文章根据洪哥的《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.siax.cn/gh/zhheo/JS-Heo@main/bb/bber.css', type='text/css')
style(type='text/css').
  .timeline ul li::before{
  background-image: url(https://cdn.siax.cn/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.siax.cn/gh/zhheo/bber@main/heobber.js', data-pjax='')

其中bbapiurl更改为bb-list.json对应的地址
其中https://cdn.siax.cn/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.siax.cn/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.siax.cn/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.siax.cn/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.siax.cn/npm/swiper/swiper-bundle.min.js',data-pjax='')
    script(src='https://cdn.siax.cn/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.siax.cn/npm/swiper/swiper-bundle.min.js',data-pjax='')
    script(src='https://cdn.siax.cn/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.siax.cn/npm/swiper/swiper-bundle.min.css"> 
    - <link rel="stylesheet" href="https://cdn.siax.cn/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
}

其它

问题解决

在我搞完哔哔写这篇文章的时候发现了一个bug，mkdown有序列表的序号不显示了，经过排查发现是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