这篇文章介绍了如何在Hexo-Butterfly主题中添加朋友圈适配，并使用腾讯云开发来获取动态数据。文章详细介绍了创建哔哔页面、云函数部署、获取API地址、主题配置、添加判断、创建网页、设置导航栏进入、创建首页滚动组件等步骤。最终你将得到一个可以展示动态的页面和发动态的工具。
此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结
投诉 之前关于哔哔的教程写的都很乱，并且因为哔哔和Twikoo可能造成的冲突问题导致很多都访问不了，经常出现缓存和无法加载的情况。最终还是用json加载的方式来做bb了。这篇教程可以作为最终版的哔哔教程了。（再也不想折腾这个东西了）
这篇教程不再采用外链形式，一篇搞定全部 。一次配置，一直使用。
开头 个人精力和能力有限，不是很想折腾cloudbase的相关函数和api，所以用了bber-talk的方式来读json获取动态。
我做了什么？ 教程根据林木木的相关教程做了Butterfly主题适配和json化。加载速度大幅度提升，但是做了数量限制。
Demo 教程完成之后你会得到：
一个首页的滚动轮播组件
一个可以展示动态的页面
和一堆发动态的工具
创建哔哔页面 前期准备 首先需要配置腾讯云开发，这个部分可以参考「哔哔点啥」微信公众号 2.0 中的配置过程。
创建应用 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 代码复制进去保存并安装依赖。
新建bb-list函数
首先新建个云函数 bber-list，打开 index.js 代码复制进去保存，新建并打开 package.json 代码复制进去保存并安装依赖。
获取API地址 如果第一次配置需要尝试发一条bb
浏览器直接访问修改好的url：
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.jsdelivr.net/npm/js-heo@1.0.11/bb/bber.css', type='text/css') style(type='text/css'). .timeline ul li::before{ background-image: url(https://cdn.jsdelivr.net/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.jsdelivr.net/gh/zhheo/bber@main/heobber.js', data-pjax='')
注意：为了减少一个js的引用，本版本不再支持qq微信表情解析，请使用emoji
其中bbapiurl更改为bb-list.json对应的地址https://cdn.jsdelivr.net/gh/zhheo/Guli@0.6/img/avatar.png更改为你的头像
添加判断 编辑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
创建网页 在/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.jsdelivr.net/npm/swiper/swiper-bundle.min.js',data-pjax='') script(src='https://cdn.jsdelivr.net/npm/js-heo@1.0.11/bb/showbb_in_index.js',data-pjax='',defer='')
其中bbShortApiUrl对应的地址更改为你自己的bber.json地址
引入到主页 编辑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.jsdelivr.net/npm/swiper/swiper-bundle.min.css"> - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/js-heo@1.0.11/bb/showbb_in_index.css">
大功告成！ 你已经成功部署一个类似朋友圈一样的哔哔啦！加载速度非常快～
附录1:使用iOS快捷指令发哔哔 安装 使用手机Safari浏览器打开立即打开 安装快捷指令，第一次运行需要授权。
配置 修改快捷指令中的参数
如果电脑没有安装nodejs的dent模块的话需要装一下（全局安装）：
打开uTools，安装快捷命令插件，将下面的代码复制后点击导入命令，从剪贴板导入，然后更改url变量的内容即可。
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 { "features" : { "code" : "key_15gw45g5gf6" , "explain" : "哔哔发射台" , "cmds" : [ "发送哔哔" ], "icon" : "logo/quickcommand.png" , "platform" : [ "win32" , "darwin" , "linux" ] }, "program" : "quickcommand" , "cmd" : "const bent = require('bent');\nconst getJSON = bent('GET', 'json');\nvar input = encodeURIComponent(`{{subinput}}`);\n\nvar url = `https://zhheo-0g8unj30bfbeb210-1302424805.ap-shanghai.app.tcloudbase.com/bber?key=zhheobbtime&from=iPhone&text=`+input\n\nconst obj = getJSON(url).then(json => {\n console.log(json.content)\n});" , "output" : "notice" , "hasSubInput" : true , "scptarg" : "" , "charset" : { "scriptCode" : "" , "outputCode" : "" }, "tags" : [] }
与dent版二选一即可
如果电脑没有安装nodejs的request模块的话需要装一下（全局安装）：
打开uTools，安装快捷命令插件，将下面的代码复制后点击导入命令，从剪贴板导入，然后更改url变量的内容即可。
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 { "features" : { "code" : "key_15gw45g5gf6" , "explain" : "哔哔发射台" , "cmds" : [ "发送哔哔" ], "icon" : "logo/quickcommand.png" , "platform" : [ "win32" , "darwin" , "linux" ] }, "program" : "quickcommand" , "cmd" : "const request = require('request');\nvar input = encodeURIComponent(`{{subinput}}`)\n\nvar url = `https://zhheo-0g8unj30bfbeb210-1302424805.ap-shanghai.app.tcloudbase.com/bber?key=zhheobbtime&from=iPhone&text=`+input\n \nrequest(url, { json: true }, (err, res, body) => {\n if (err) { return console.log(err); }\n console.log(body.content);\n});" , "output" : "notice" , "hasSubInput" : true , "scptarg" : "" , "charset" : { "scriptCode" : "" , "outputCode" : "" }, "tags" : [] }
关于旧版本教程 旧版本教程不再维护、使用cloudbase相关js、函数等问题不再探讨。
参考文档 「哔哔点啥」微信公众号 2.0
BBtalk 中文文档
