Android “捷径” · 木木bber踩坑记录+电脑or手机4种方式直发说说

写在开始

此前，研究过木木的 bber，可惜一直部署不成功，直到昨天在木木的指点下，终于实现了！之前使用的黑石BB也完美迁移数据到bber！Json转存也实现了！Blog首页轮播样式调用，十分舒服。

正所谓分享就是为了延续被帮助的感动！所以，记录下踩坑过程，希望对你有帮助。通过本文，你将获得：

一个好用，支持微信、Chrome、Edge、Android “捷径”随时发布闪念的说说功能
获得一个好看的bber样式预览本站效果
获得 Butterfly 主题中，首页轮播图展示哔哔功能

bber部署

木木大佬的教程已经很详尽了，这里不在赘述。只谈几个坑，补充说明。《木木的原版教程》

我遇到的问题：

微信绑定成功，但发消息提示“哔哔短路中：404”，其他绑定，命令都正常
浏览器直接访问http服务，发起新消息的请求，提示云函数内部错误

解决方法：

确保按大佬教程，全程成功配置bber云函数《「哔哔点啥」微信公众号 2.0》
去“数据库”——“talks”——点进去，这个时候应该是空白的，一条内容没有
手动添加一条哔哔内容， “字段”：“content”；“值”：“测试一下” 数据类型默认string
现在回去看，已经正常了！
去微信公众号“哔哔点啥”，发送一条文字说说，再回到刚才的位置，删掉手动添加的数据（没有加date，担心后续有其他bug）

bber的 Json 转存

接下来，完善 Json 转存。同样的，先按木木原教程创建好转存的云函数，并删掉原bber函数里的异步转存注释。《熟悉的味道，不一样配方》

你发现，没有找到木木说的“Json下载链接”？别急，再去发一条哔哔，回到这里就有了。设置好 Json 的缓存。

json转存

配置json转存后，删掉bber云函数里异步转存代码前的注释
去发一条新的哔哔
然后云存储里就有json文件了

Json下载链接

处理完上述步骤，在腾讯云——云存储——json——选择下载，等待创建下载任务后，去复制得到下载链接如下：

1	https://626c-blogpkly-13278c-1258453354.tcb.qcloud.la/json/bber.json?sign=d71dfc60e67f23f55f3efa3c6038bf4d&t=1624029212&response-content-disposition=attawchment

其中，前半部分的https://626c-blogpkly-13278c-1258453354.tcb.qcloud.la/json/bber.json就是我们要的 Json 链接，试试浏览器访问，能不能正常展示，若可以则继续下文操作。

黑石BB数据迁移

以下方法，实测迁移了黑石BB的数据到 bber。其他类似说说，应该方法类似。

数据迁移

去 leancloud 将原来的说说数据下载，格式为 Json
推荐一个编辑器 Sublime Text ，打开下载的 Json
选中其中一个字段，然后 Alt + F3 ，会自动选中所有相同字符的内容，更改为 bber 里定义的字段名称
其中时间 date 字段，需要特别注意，得改为："date":{"$date":"2021-06-12T04:48:41.820Z"},格式
注意，每两组数据之间的那个逗号，需要删除
其他字段及完成后的数据格式，参考下面：

{
  "content": "整挺好。",
  "date":{"$date":"2021-06-05T10:48:47.982Z"},
  "_id": "60bb568f9952573e4f96122a",
  "from":"Android 11"
}
{
  "content": "嘀！第二针接种已完成。感谢医护人员，感谢现场志愿者。",
  "date":{"$date":"2021-06-12T04:48:41.820Z"},
  "_id": "60c43ca9fbd3a161302a8aa4",
  "from":"Android 11"
}

数据迁移

在腾讯云，数据库中，选择导入内容，导入方式为 Insert。搞定！

bber更换皮肤

木木大佬原版的bber比较简洁，我本人喜欢一些花里胡哨的东西，所以这里采用另外大佬的方法：《给 bber 换个皮肤》 ispeak-bber 源代码

Hexo Butterfly

实际很简单，自己创建一个 BB 页面，在index.md里，写下以下内容即可。可参考我的：

---
title: 自言自语
date: 2021-06-07 17:29:43
type: "bb"
top_img:
---
<script>window.TWIKOO_MAGIC_PATH="自言自语"</script>

{% note success %}
说说内容来自 @夜的第八章 的自言自语。🤪🤪
{% endnote %}

<!--  自言自语  -->
<style>
    #article-container img {
    margin: 0 auto 0 !important;
    }
</style>
<div id='speak'></speak>
<!-- 使用markdown渲染 -->
<!-- <script type="text/javascript" src="https://jsd.guole.fun/npm/nanshen/js/blog/bb/ispeak-bber.min.js" charset="utf-8" ></script> -->
<!-- 不使用markdown渲染 -->
<!-- <script type="text/javascript" src="https://jsd.guole.fun/npm/ispeak-bber/ispeak-bber.min.js" charset="utf-8" ></script> -->
<!-- 不使用markdown渲染，调整css样式后的js -->
<script type="text/javascript" src="https://cdn.guole.fun/js/ispeak-bber%401.4.2.1.min.js" charset="utf-8" ></script>
<!-- 解析微信表情（参考：https://github.com/buddys/qq-wechat-emotion-parser） -->
<!-- <script src="https://jsd.guole.fun/gh/buddys/qq-wechat-emotion-parser@master/dist/qq-wechat-emotion-parser.min.js"></script> -->
<script>
ispeakBber
    .init({
        el: '#speak', // 容器选择器
        name: '夜的第八章 🦄', // 显示的昵称
        envId: 'xxxxxx', // 环境id
        region: 'ap-shanghai', // 腾讯云地址，默认为上海
        limit: 7, // 每次加载的条数，默认为5
        avatar: 'https://cdn.guole.fun/img/gl.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>
</div>

Hugo Dream

Hugo 同样可以。在blog/layouts/_default路径下，创建一个模板文件如bb.html，内容可以参考我的（其他 Hugo 主题需要自己改动）：

{{ define "title" }}{{ .Title }}{{ end }}
{{ define "css" }}
{{ if .Site.Params.highlightjs }}
{{ if .Site.Params.highlightjsTheme }}
<link rel="stylesheet" data-highlight href="https://jsd.guole.fun/gh/highlightjs/cdn-release/build/styles/{{ .Site.Params.highlightjsTheme }}.min.css" />
{{ else }}
<link rel="stylesheet" data-highlight href="https://jsd.guole.fun/gh/highlightjs/cdn-release/build/styles/default.min.css" />
{{ end }}
{{ end }}
{{ if .Site.Params.valine }}
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
{{ end }}
{{ end }}
{{ define "main" }}
<div class="ui relaxed centered grid dream-grid dream-grid-single"{{ if .Site.Params.reversePostAndAside }}style="flex-direction: row-reverse;"{{ end }}>
  <!-- len <nav id="TableOfContents"></nav> == 32 -->
  {{ $showTOC := ge (len .TableOfContents) 33 }}
  {{ $shareInAside := .Site.Params.shareInAside }}
  {{ $showAside := or $showTOC $shareInAside }}

  <div class="sixteen wide mobile sixteen wide tablet ten wide computer column markdown-body dream-single" id="dream-save-post-as-img">
  <article class="ui segment post-disqus-area" data-html2canvas-ignore>

    <!--  自言自语标题  -->  
    <h2 class="post-title">{{.Title}}</h2>
    <p>说说内容来自 @夜的第八章 微信发送。🤪🤪</p>

    <article class="main">
      {{ if and .Params.cover .Site.Params.showSummaryCoverInPost }}
      <img class="images" src="{{ .Params.Img }}" />
      {{ end }}

      {{ .Content | emojify }}
    </article>

  <!--  自言自语  -->
  <div id='speak'></speak>
    <!-- 使用markdown渲染 -->
   <!--     <script type="text/javascript" src="https://jsd.guole.fun/npm/nanshen/js/blog/bb/ispeak-bber.min.js" charset="utf-8" ></script> -->
    <!-- 不使用markdown渲染 -->
    <script type="text/javascript" src="https://jsd.guole.fun/npm/ispeak-bber/ispeak-bber.min.js" charset="utf-8" ></script>
    <!-- 解析微信表情（参考：https://github.com/buddys/qq-wechat-emotion-parser） -->
    <!-- <script src="https://jsd.guole.fun/gh/buddys/qq-wechat-emotion-parser@master/dist/qq-wechat-emotion-parser.min.js"></script> -->
    <script>
    ispeakBber
        .init({
          el: '#speak', // 容器选择器
          name: '夜的第八章 🦄', // 显示的昵称
          envId: 'blogpkly-13278c', // 环境id
          region: 'ap-shanghai', // 腾讯云地址，默认为上海
          limit: 7, // 每次加载的条数，默认为5
          avatar: 'https://cdn.guole.fun/img/gl.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>
</div>
</div>

<script>window.TWIKOO_MAGIC_PATH="自言自语"</script>

<!--  Twikoo 评论系统  --> 
<div class="sixteen wide mobile sixteen wide tablet ten wide computer column markdown-body dream-single">
  <article class="ui segment post-disqus-area" data-html2canvas-ignore>
    <span id="liuyan" name="liuyan"></span>
    <div class="liuyan" >
      <p>评论区</p>
      </div>
    <div id="tcomment"></div>
    <script src="https://jsd.guole.fun/npm/twikoo@1.3.1/dist/twikoo.all.min.js"></script>
    <script>
    twikoo.init({
      envId: 'blogpkly-13278c',
      el: '#tcomment',
      // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
      path: 'window.TWIKOO_MAGIC_PATH||window.location.pathname', // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
    })
  </script>
</article>
</div>

<!--   页面底部备案信息  -->
{{ if .Site.Params.valine }}
<article class="ui segment" data-html2canvas-ignore>
  <div id="vcomments"></div>
</article>
<script>
  new Valine({
    el: '#vcomments',
    appId: {{ .Site.Params.LEANCLOUD_APP_ID }},
    appKey: {{ .Site.Params.LEANCLOUD_APP_KEY }}
  })
</script>
{{ end }}
</div>

{{ end }}
{{ define "js" }}
{{ if .Site.Params.Experimental.jsDate }}
<script src="https://jsd.guole.fun/npm/luxon@1.26.0/build/global/luxon.min.js"></script>
{{ partial "luxon.html" . }}
{{ end }}

<script src="{{ "/js/scrollToTop.js" | relURL }}"></script>

{{ if .Site.Params.highlightjs }}
<script src="{{ if .Site.Params.highlightjsCDN }}{{ .Site.Params.highlightjsCDN }}{{ else }}{{ "https://jsd.guole.fun/gh/highlightjs/cdn-release/build/highlight.min.js" }}{{ end}}"></script>

{{ if .Site.Params.highlightjsExtraLanguages }}
{{ range .Site.Params.highlightjsExtraLanguages }}
<script src="https://jsd.guole.fun/gh/highlightjs/cdn-release/build/languages/{{ . }}.min.js"></script>
{{ end }}
{{ end }}

{{ partial "highlight.html" . }}
{{ end }}

<script src="https://jsd.guole.fun/npm/html2canvas@1.0.0-rc.1/dist/html2canvas.min.js"></script>
<script src="{{ "/js/post.js" | relURL }}" defer></script>
{{ end }}