BBer：哔哔点啥-配置记录

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

red

bbtalk 已死，使用 bbtalk 需要云开发的触发事件功能，而这一功能仅支持按量计费，一月二十，腾讯云抢钱了。

1 哔哔发展历程

Artitalk.js

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

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

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

c. 安全性一般：

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

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

BBtalk

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

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

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

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

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

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

所以，实际上，BBtalk 和 BBer 是同源的，都是来自 熊野大佬 的版本。

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

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

「哔哔秘笈」
==================
/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 新建环境 2]

[2.1.1 新建环境 3]

2.1.3 环境-安全配置

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

[2.1.3 环境-安全配置 1]

[2.1.3 环境-安全配置 2]

2.1.4 新建数据集合

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

[2.1.4 新建数据集合 1]

[2.1.4 新建数据集合 2]

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

2.2 云函数部署

2.2.1 新建云函数

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

[2.2.1 新建云函数 1]

[2.2.1 新建云函数 2]

[2.2.1 新建云函数 3]

[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 ：

<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 哔哔点啥-微信公众号配置

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

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

云函数命名为 bber-weixin
index.js 和 package.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 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 微信公众平台配置

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

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

4.6 回 bber-weixin 云函数

回 bber-weixin 云函数，填入微信公众号 AppID 和 AppSecret 保存。

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

4.6 回微信公众平台

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

4.7 回 bber-weixin 云函数

注释第44行代码，保存:

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

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

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

5 前端页面的 stellar 主题适配

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

实际上的配置并不复杂

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

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

查看代码

---
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 页的导航栏里的直接写相对路径就行。
后来我突发奇想，把这个放到首页去，大概需要这几步：

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

5.2.1 修改主题文件 `languages`

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

# 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 踩坑点汇总

运行环境问题，最好使用作者原始运行环境：Nodejs 10.15；
记得新建数据集 users；
记得在 talks 数据集中提前创建数据。

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。

BBer：哔哔点啥-配置记录

1 哔哔发展历程

Artitalk.js

BBtalk

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

2 哔哔点啥-后端配置

2.1 创建应用

2.1.1 新建环境

2.1.2 环境-登录授权

2.1.3 环境-安全配置

2.1.4 新建数据集合

2.2 云函数部署

2.2.1 新建云函数

2.2.2 环境-访问服务

3 哔哔点啥-前端配置

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

4.1 新建云函数

4.2 获取公网 Ip

4.3 新建数据集合

4.4 获取触发路径链接

4.5 微信公众平台配置

4.6 回 bber-weixin 云函数

4.6 回微信公众平台

4.7 回 bber-weixin 云函数

5 前端页面的 stellar 主题适配

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

5.2 配置到首页

5.2.1 修改主题文件 `languages`

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

5.2.3 修改网站设置 `_config.yml`

6 踩坑点汇总

BBer：哔哔点啥-配置记录

1 哔哔发展历程

Artitalk.js

BBtalk

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

2 哔哔点啥-后端配置

2.1 创建应用

2.1.1 新建环境

2.1.2 环境-登录授权

2.1.3 环境-安全配置

2.1.4 新建数据集合

2.2 云函数部署

2.2.1 新建云函数

2.2.2 环境-访问服务

3 哔哔点啥-前端配置

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

4.1 新建云函数

4.2 获取公网 Ip

4.3 新建数据集合

4.4 获取触发路径链接

4.5 微信公众平台配置

4.6 回 bber-weixin 云函数

4.6 回 微信公众平台

4.7 回 bber-weixin 云函数

5 前端页面的 stellar 主题适配

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

5.2 配置到首页

5.2.1 修改主题文件 languages

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

5.2.3 修改网站设置 _config.yml

6 踩坑点汇总

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

4.6 回微信公众平台

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

5.2.1 修改主题文件 `languages`

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

5.2.3 修改网站设置 `_config.yml`