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

@guole  |   2021-06-19T13:06:56+08:00  |  10 分钟阅读   |  更新于 2021-06-19T13:06:56+08:00

木木大佬的 bber 食用踩坑记录 + 皮肤更换 + Android 捷径 + Chrome + Edge 多种方式直发说说,随时记录你的闪念!

写在开始

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

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

Info

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

bber部署

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

Warning!

我遇到的问题:

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

Tips

解决方法:

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

bber的 Json 转存

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

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

Tips

json转存

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

Json下载链接

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

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。其他类似说说,应该方法类似。

Tips

数据迁移

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
  {
    "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更换皮肤

Hexo Butterfly

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

实际很简单,自己创建一个 BB 页面,在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
35
36
37
38
39
40
41
42
43
44
45
46
---
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://cdn.jsdelivr.net/npm/nanshen/js/blog/bb/ispeak-bber.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> -->
<!-- 不使用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://cdn.jsdelivr.net/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 主题需要自己改动):

  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
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
{{ define "title" }}{{ .Title }}{{ end }}
{{ define "css" }}
{{ if .Site.Params.highlightjs }}
{{ if .Site.Params.highlightjsTheme }}
<link rel="stylesheet" data-highlight href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/{{ .Site.Params.highlightjsTheme }}.min.css" />
{{ else }}
<link rel="stylesheet" data-highlight href="https://cdn.jsdelivr.net/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://cdn.jsdelivr.net/npm/nanshen/js/blog/bb/ispeak-bber.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: '夜的第八章 🦄', // 显示的昵称
          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://cdn.jsdelivr.net/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://cdn.jsdelivr.net/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://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js" }}{{ end}}"></script>

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

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

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

由于 Hugo 我个人魔改了很多,你直接 Copy 可能会有报错,可以自行修改,或哪儿报错,删掉哪部分,页面先跑起来。折腾的这个过程,本身就很有趣,你说呢?

补充说明

以上内容中,我微调了原作者的样式,更换了 js 链接,解决了以下问题:

Note

  1. bber中出现图片时,移动端或PC端尺寸过小的问题
  2. 插入图片后,bb页面图片上边距太宽
你可以直接使用我的那个 js 链接,同样是腾讯云 CDN 的。不满意,也可以自行下载原作者 js 文件调整。

Chrome + Edge发布说说

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

但是,一来,大佬写死了from🌈Chrome,二来,emjio和文字中间还没有空格,强迫症如我,加上平时Chrome用的更多,于是干脆提取出扩展文件,自己添加到本地浏览器中使用。

    ⊙ 浏览器发布说说

Tips

提取扩展文件后,做了如下修改:

  1. 区分 Chrome 和 Edge,设置不同的 from来源
  2. 保存为两个独立的文件夹,请保存在可靠路径,分别添加后使用(文件移动或丢失后,浏览器扩展失效,因为不是云端的)
  3. 想要自定义或修改默认的from来源,可在html/popup.html文件中修改
    点此下载我提取并修改的浏览器插件包

Chrome安装本地插件

访问Chrome——更多工具——扩展程序——左上角“加载已解压的扩展程序”,选择我提供的附件,解压缩后的文件夹1.0.0_0_Chrome,然后回到 Chrome,按下图方式固定插件。然后开始享用吧~~

    ⊙ 固定插件

Edge安装本地插件

同样的,在新版 Edge 浏览器中,选择Edge——扩展——左下角勾选“开发人员模式”——加载解压缩的扩展,选择我提供的附件,解压缩后的文件夹1.0.0_0_Edge

    ⊙ edge插件

至此,Chrome + Edge 发布说说搞定!本来考虑打包发布到插件商店,又觉得对原作者不尊重,所以就这样离线使用吧。

可以在这里,给插件作者点个赞!《iSpeak-bber时光机》

Android 捷径发布

使用 Android 设备的朋友,也不用眼馋别人通过 iOS 捷径发布说说了。因为咱们也有!

从 Github 下载安装这款“HTTP 快捷方式”apk,安装后继续下文操作。 Github 下载 HTTP 快捷方式.apk
访问 Github 慢的同学,直接使用我提供的链接吧:点此下载 HTTP 快捷方式.apk

打开HTTP 快捷方式App,选择新建快捷方式,自定义名称、描述,在“基本设置”中,设置方法为“POST”或“GET”,URL为

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

至于key、from,我们设置为常量,text则设置为变量content,每次发布的时候填写说说内容。

点击URL右侧的{},选择添加变量。常量key为你云函数里的key,如果没有特别设置就是bber。from我们设置一个好玩的如📱 Android 11。添加一个变量content

接着回到URL页面,补充完刚才添加的常量和变量,如以下格式:

1
https://你后台显示的.ap-shanghai.app.tcloudbase.com/bber?key={key}&from={from}&text={content}

右上角,保存这个快捷方式,然后长按发送到桌面,搞定!

    ⊙ Android捷径

现在点击这个快捷方式,写下此刻感受,点确定试试!妙~

Note

小结:

  1. bber是可以同时配置到其他模块并存的云环境的,不用再买一个。比如,我就和 Twikoo 放到一起了
  2. 出现错误,请细看原作者教程及上文
  3. Android 捷径若发布错误,看看是不是参数之间忘了加&
  4. 欢迎留言一起交流

参考内容

「哔哔点啥」微信公众号 2.0
《熟悉的味道,不一样配方》
《给 bber 换个皮肤》
ispeak-bber 源代码

评论区

avatar
关于我

Guo Le 的博客 ❤️❤️

你来到了一片知识的荒芜区 🏜🌵🏜🌵

心血来潮有此页面

  • 感谢 g1eny0ung 前人栽树
  • 一个喜欢瞎折腾的互联网打工人
  • 当前行业:人工智能 🤖🤖

免责声明 📢📢

  • 本站页面的部分内容,包括但不限于图片、音频、视频,来源于网络。由于无法深究其原作者,因此未曾署名。若您是部分内容原作者,且不希望本站使用,可联系本人删除。
其他

持续分享一些好玩的东西,或是美好的短文,又或者一段优美的文案。

欢迎与我交流,右边邮箱可联系到我。

斗胆放上乞讨码。😂😂
最好附加一下信息或者留言,十分感谢 💖💖

捐赠列表 💖💖

再次感谢以下朋友:

WeChat

  1. 2021.05.13 收到来自 浅浅 的 ¥8.88
  2. 2021.05.13 收到来自 宁哥 的 ¥8.88
  3. 2021.06.21 收到来自 浅浅 的 ¥1.88
  4. 2021.07.12 收到来自 。旧念 的 ¥8.88

留言板