发布于 

BBer:哔哔点啥-配置记录

   配置 哔哔点啥 的记录和踩坑,前部分是哔哔发展历程,后部分是 哔哔点啥2.0 配置

1 哔哔发展历程

Artitalk.js

这个应该是比较早的 说说 了,基于 LeanCloud,很多博客都集成了这个说说功能,可以说是现在说说的开山?

a. 基本功能具备:
支持增删查改,支持对每条说说的评论,支持 Markdown、html语法,支持图片上传。

b. 配置方便灵活:
后端 leancloud 配置过程简单,前端就是一般的 html 几乎可用于任何框架。

c. 安全性一般:

由于 leancloud 的机制,应用的 Appid 以及 Appkey 均会暴漏在前端,可能会遭受到其他人的恶意攻击。 如果你在担心这个问题,你可以使用 Artitalk_SafeMode。

问题是,每次发布说说需要打开博客说说页面登录,发布一条说说和发布一个评论差不多,比较麻烦。

BBtalk

该说说,由 heson 大佬开发,最开始在其博客连载开发过程。

开发历程可见大佬博客 :黑石博客分类“哔哔”下的文章

其起源于 熊野大佬 的 哔哔点啥,换个舒服的姿势 ,基于静态存储+云函数+微信公众号开发

黑石大佬将其适配了多个主题,并开发了 Hexo-bb 插件,可以方便的在任何一个主题使用,后端依然使用 leancloud ,支持微信公众号发文。

BBer:哔哔点啥 微信公众号 2.0

这是 熊野大佬 哔哔点啥的升级版,由 林帅 开发,看博客评论都叫他木老师,事实上第一版的公众号发文也是放到了木老师的公众号上。

所以,实际上,BBtalkBBer 是同源的,都是来自 熊野大佬 的版本。

2.0 和 1.0 的主要区别在于,使用的后端平台由 LeandCLoud 变化为 腾讯 CLoudBase,公众号支持由单用户扩展为多用户。

说说可以通过微信公众号发布(看文章封面图,就是那个公众号),目前已支持用户名绑定、解绑、发文字、发图片、追加、合并、删除、替换文字,还有显示哔哔列表、哔哔搜索!
目前支持的命令如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
「哔哔秘笈」
==================
/l - 显示最近哔哔
/s 关键词 - 搜索内容
---------------
/a 文字 - 追加文字到第1条
/a数字 文字 - 追加文字到第几条,如 /a2 文字
---------------
/c - 合并前2条
/c数字 - 合并前几条,如 /c3
---------------
/d - 删除第1条
/d数字 - 删除第几条,如 /d2
---------------
/e 文字- 编辑替换第1条
/e数字 文字 - 编辑替换第几条,如 /e2 文字
---------------
/f数字 - 批量删除前几条,如 /f2
---------------
/nobber - 解除绑定

同时 2.0 提供了 BBer-weixin 微信公众号的后端配置,可以完全把所有数据掌握在自己手里【用自己的公众号】

另外,有不少大佬给 BBer 扩展了功能,主要是前端部分以及发布方式
小康大佬 提供了美化的前端页面 和 浏览器扩展插件发布说说
Guo Le 在此基础上,加入了歌曲分享支持,对浏览器插件,不同浏览器设置不同的 from
同时由于 BBer 的发布接口简洁,可以通过 ios 快捷指令发布,android 也有 apk 支持。

所以本站选择了功能丰富的 哔哔点啥 2.0

2 哔哔点啥-后端配置

这部分主要是原作者教程的搬运:BBer:哔哔点啥 微信公众号 2.0 ,但更详细了些。
原作者提供了腾讯云开发一键部署,但是其支持按量计费,不太经济。个人建议,手动部署就好了,麻烦是麻烦了点,但是有本文的帮助,相信一定不会有问题。
配置的时候最好手机在身边,需要多次扫码验证身份。

默认大家都有腾讯云的账号,我是在一开始建站的时候就用的腾讯云,没有的话先注册一个。

2.1 创建应用

2.1.1 新建环境

这里,选择空模板进入下一步,环境名称自由填写,推荐选择计费方式包年包月,实际上按小站的访问量和发说说的次数, 免费版 就够用了,不放心的话就采用基础版套餐1,先买个一个月,选择环境到期后自动降为免费版,到时候根据实际使用情况进行续费或者继续使用免费版。
唯一值得注意的是,建议创建上海环境,否则在前端页面配置时要指定 region: “ap-guangzhou”

[2.1.1 新建环境 1]
[2.1.1 新建环境 1]
[2.1.1 新建环境 2]
[2.1.1 新建环境 2]
[2.1.1 新建环境 3]
[2.1.1 新建环境 3]

2.1.2 环境-登录授权

选择 “匿名登录”

2.1.3 环境-安全配置

将你要使用哔哔页面的个人网站域名添加到 “WEB安全域名”
最好将你平时本地调试用的 localhost: 也添加进去,例如 hexo 本地发布默认 localhost:4000

[2.1.3 环境-安全配置 1]
[2.1.3 环境-安全配置 1]
[2.1.3 环境-安全配置 2]
[2.1.3 环境-安全配置 2]

2.1.4 新建数据集合

进入数据库,新建数据集合,命名为 talks
点击创建好的数据集合 talks ➡ 点击 权限设置 ➡ 权限设置为 “所有用户可读,仅管理员可写”

[2.1.4 新建数据集合 1]
[2.1.4 新建数据集合 1]
[2.1.4 新建数据集合 2]
[2.1.4 新建数据集合 2]
第一个坑来了: 点击文档列表 ➡ 点击添加文档 字段设置为 `content` 值设置 为任意文本。 这一步是为了避免数据库中没有记录导致微信发布时写入失败,前人遇到的贼大的一个坑,直接在创建的时候解决。

2.2 云函数部署

2.2.1 新建云函数

  1. 点击侧边栏 基础服务-云函数 ➡ 点击新建云函数 ➡ 运行环境选择 Nodejs 10.15 ➡ 函数名称设置 bber (可自定义)
  2. 点击下一步 ➡ 描述部分随意,函数代码部分 复制 index.js 代码到函数代码框中,点确定。
  3. 点击创建好的 bber , 点击函数代码,右键新建文件 package.json 文件
  4. 复制 package.json 代码丢入 package.json,点击 保存并安装依赖
    成功后,文件目录会出现 node_modules 文件夹
[2.2.1 新建云函数 1]
[2.2.1 新建云函数 1]
[2.2.1 新建云函数 2]
[2.2.1 新建云函数 2]
[2.2.1 新建云函数 3]
[2.2.1 新建云函数 3]
[2.2.1 新建云函数 4]
[2.2.1 新建云函数 4]

这里需要注意的是,目前云开发的运行环境 默认是 Nodejs 12.16 但作者采用的是 Nodejs 10.15
此处是否采用最新的运行环境没啥影响,但是在微信公众号配置的时候却是一个大坑,建议遵循作者的运行环境。

2.2.2 环境-访问服务

新建,路径与云函数名匹配。

大概需要3-5分钟时间创建,创建好之后,点击触发路径或在浏览器中输入

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

会出现 {"content":"key不匹配"} 则说明配置好了

原文提到

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

这里说的 apikey 在云函数 index.js 的第8行,const serverkey = 'bber',将其改为你自定义的 key 值,避免别人拿到你的信息绑定之后乱搞。

配置到这个地方,就可以绑定微信公众号发说说,可以直接使用作者的公众号【见封面,或者搜索哔哔点啥】
发送如下即可绑定成功

1
/bber key值,https://你的云函数HTTP访问地址/bber

key 值为你自定义的 const serverkey
https://你的云函数HTTP访问地址/bber 为你的触发路径
绑定成功后就可以发送哔哔了,数据都会储存在 前面创建的 talks 中。

额外的建议

这里建议自定义一个域名代替原有的 ××××××.ap-shanghai.app.tcloudbase.com 格式的默认域名,避免有的时候微信屏蔽

3 哔哔点啥-前端配置

虽然目前后端可以接收到数据,并存储数据,但是,还是需要在页面呈现
这里可以直接使用小康大佬的美化 给 bber 换个皮肤ispeak-bber

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
<div id='speak'></speak>
<!-- 使用markdown渲染 -->
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ispeak-bber/ispeak-bber-md.min.js" charset="utf-8" ></script> -->
<!-- 不使用markdown渲染 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ispeak-bber/ispeak-bber.min.js" charset="utf-8" ></script>
<!-- 解析微信表情(参考:https://github.com/buddys/qq-wechat-emotion-parser) -->
<!-- <script src="https://cdn.jsdelivr.net/gh/buddys/qq-wechat-emotion-parser@master/dist/qq-wechat-emotion-parser.min.js"></script> -->
<script>
ispeakBber
.init({
el: '#speak', // 容器选择器
name: 'DreamyTZK 🦄', // 显示的昵称
envId: '腾讯云开发环境id', // 环境id
region: 'ap-shanghai', // 腾讯云地址,默认为上海
limit: 10, // 每次加载的条数,默认为5
avatar: 'https://cdn.jsdelivr.net/npm/kang-static@latest/avatar.jpg',
fromColor:'rgb(245, 150, 170)', // 下方标签背景颜色 默认 rgb(245, 150, 170)
loadingImg: 'https://7.dusays.com/2021/03/04/d2d5e983e2961.gif', // 自定义loading的图片,示例值为默认值
dbName:'talks' // 数据的名称,默认talks,避免有人的命名不是这个,所以加入此配置字段。
})
.then(function() {
// 哔哔加载完成后的回调函数,你可以写你自己的功能
console.log('哔哔 加载完成')
})
</script>

如果需要支持歌曲分享,请看:ispeak-bber 前端美化增强版,支持歌曲分享

目前我的说说页面,说说总量的计算是没有显示的,这个问题有待研究。

具体到每个主题的配置要看每个主题的页面情况,大体都是新建 index.md 文件,将其直接复制进去就可以了。
stellar 适配:可见本文下方:前端页面的-stellar-主题适配
Butterfly 适配:Hexo-Butterfly说说朋友圈适配(哔哔 for 腾讯云)自用

4 哔哔点啥-微信公众号配置

这个配置因人而异,嫌麻烦可以直接用原作者的微信公众号,但是我希望将所有数据放在自己手里,所以用自己的公众号
这里的公众号个人的就可以,新注册的就行,没什么别的要求。

4.1 新建云函数

参考前面 哔哔点啥后端的配置过程。

创建云函数的时候一定记得修改运行环境为:Nodejs 10.15
如果使用默认的 Nodejs 12.16 需要将 package.json 中的 "type": "module", 删掉
原因在于作者发布的教程的这段时间里,ES Module 的版本迭代,一开始不再支持 require 而采用 import,除非在 package.json 中加入 "type": "module",。而最新版的 js 好像又解决了这个问题,不需要加入 "type": "module",,加入了反而会报错。

云函数命名为 bber-weixin
index.jspackage.json 来自于 https://github.com/lmm214/bber-weixin/tree/main/bber-weixin

4.2 获取公网 Ip

点击 bber-weixin 云函数,右上角 【编辑】,开启 【固定IP】,留存 公网固定IP

[4.2 获取公网 Ip 1]
[4.2 获取公网 Ip 1]
[4.2 获取公网 Ip 2]
[4.2 获取公网 Ip 2]

保存成功后,固定 IP 那里会出现一个 IP 地址,留存这个地址备用。

4.3 新建数据集合

进入数据库,新建数据集合,命名为 users
点击创建好的数据集合 users ➡ 点击 权限设置 ➡ 权限设置为 仅创建者及管理员可读写
该数据集合用于存储公众号的绑定的哔哔用户。

4.4 获取触发路径链接

进入 环境-访问服务 ,新建 /bber-weixin 触发路径
获取这个触发路径链接并留存,如以下格式:

1
2
3
https://××××××.ap-shanghai.app.tcloudbase.com/bber-weixin
或者
https://自定义域名/bber-weixin

4.5 微信公众平台配置

打开 微信公众平台,进入开发-基本配置,获取 AppIDAppSecret 留存,修改IP白名单为上一步的 公网固定IP
继续服务器配置:

URL4.4 留存的触发链接;
Token 可以自定义,原始代码中预设为 weixin
此时先不点提交,还要回到 云函数 配置。

4.6 回 bber-weixin 云函数

bber-weixin 云函数,填入微信公众号 AppIDAppSecret 保存。

1
2
3
4
const token = 'weixin' // 微信公众号的服务器验证用的令牌 token,我自定义为了 ceshi123,这里就填 ceshi23
//填入自己的微信公众号appid和appsecret
var wxappid = '微信公众号appid',
wxappsecret = '微信公众号appsecret',

4.6 回 微信公众平台

点击提交,显示提交成功,之后启用服务器配置,很快就会生效。

4.7 回 bber-weixin 云函数

注释第44行代码,保存:

1
2
3
4
5
if(tmpStr == signature){
//请求来源鉴权
//成功后注释下行代码
//return event.queryStringParameters.echostr //成功后注释本行代码
//成功后注释上行代码

到此,公众号配置完成,可以绑定自己的公众愉快的发布哔哔了。

我是自己手动部署,在这里踩得坑主要是运行环境不匹配和未建立 users 数据集,如果直接使用作者的一键部署可以避免这个问题,但是按量计费属实划不来

5 前端页面的 stellar 主题适配

stellar 主题没有给出太多自定义的空间,可以看到我的说说页面在顶部的 归档旁边

实际上的配置并不复杂

5.1 在根目录 source 新建 bbtalk 文件夹

文件夹建好后,新建一个 index.md 文件,这个文件用于存放前端代码 ,也就是哔哔页面

查看代码
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
---
menu_id: more
sidebar: [welcome, recent]
seo_title: 闲话
comments: false
breadcrumb: false
header: false
---

<div id='speak'></speak>
<!-- 使用markdown渲染 -->
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ispeak-bber/ispeak-bber-md.min.js" charset="utf-8" ></script> -->
<!-- 不使用markdown渲染 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ispeak-bber/ispeak-bber.min.js" charset="utf-8" ></script>
<!-- 解析微信表情(参考:https://github.com/buddys/qq-wechat-emotion-parser) -->
<!-- <script src="https://cdn.jsdelivr.net/gh/buddys/qq-wechat-emotion-parser@master/dist/qq-wechat-emotion-parser.min.js"></script> -->
<script>
ispeakBber
.init({
el: '#speak', // 容器选择器
name: 'DreamyTZK 🦄', // 显示的昵称
envId: '腾讯云开发环境id', // 环境id
region: 'ap-shanghai', // 腾讯云地址,默认为上海
limit: 10, // 每次加载的条数,默认为5
avatar: 'https://cdn.jsdelivr.net/npm/kang-static@latest/avatar.jpg',
fromColor:'rgb(245, 150, 170)', // 下方标签背景颜色 默认 rgb(245, 150, 170)
loadingImg: 'https://7.dusays.com/2021/03/04/d2d5e983e2961.gif', // 自定义loading的图片,示例值为默认值
dbName:'talks' // 数据的名称,默认talks,避免有人的命名不是这个,所以加入此配置字段。
})
.then(function() {
// 哔哔加载完成后的回调函数,你可以写你自己的功能
console.log('哔哔 加载完成')
})
</script>

5.2 配置到首页

事实上,此时在发布网站后,已经可以直接通过 https://hermitlsr.top/bbtalk/ 访问到页面
一开始我是把这个页面放在 about 页的导航栏里的 直接写相对路径就行。
后来我突发奇想,把这个放到首页去,大概需要这几步:

  1. 修改主题文件 languages
  2. 修改主题文件 \themes\stellar\layout\_partial\main\navbar\list_post.ejs
  3. 修改网站设置 _config.yml

5.2.1 修改主题文件 languages

这一步是进行语言配置,在 btn 部分添加 bbtalk

1
2
3
4
5
6
7
# zh-CN.yml
btn:
bbtalk: 闲话

# zh-TW.yml
btn:
bbtalk: 閒話

没设置英语,实在不知道咋翻译合适。

5.2.2 修改主题文件 \themes\stellar\layout\_partial\main\navbar\list_post.ejs

找到 \themes\stellar\layout\_partial\main\navbar\list_post.ejs 在其第 32 行后 添加如下代码:

1
2
3
<% if (config.bbtalk) { %>
<a href='/bbtalk/'><%- __('btn.bbtalk') %></a>
<% } %>

意思是,如果站点根设置中 bbtalk 的值为 true 则显示相对链接为 /bbtalk/ 的页面。
当然,你要乐意,改成 theme.bbtalk 放到主题设置里也行,不过没必要。

5.2.3 修改网站设置 _config.yml

在设置的最下面添加:

1
bbtalk: true

重新发布网站就可以看到了。

6 踩坑点汇总

  1. 运行环境问题,最好使用作者原始运行环境:Nodejs 10.15
  2. 记得新建数据集 users
  3. 记得在 talks 数据集中提前创建数据。