这篇文章介绍了如何在Hexo博客中使用Butterfly主题适配个人动态(哔哔 for 腾讯云),并在博客上发朋友圈。作者介绍了前期准备工作,包括在腾讯云上创建应用、配置云函数、创建网页等。然后作者演示了如何使用iOS快捷指令和uTools发送哔哔,并提供了CSS样式供参考。最后,作者推荐了一些相关参考资料。
此内容根据文章生成,并经过人工审核,仅用于文章内容的解释与总结
投诉
本项目已经停止维护,但仍能正常使用,不再进行答疑。新版本项目入口
本项目来自林木木 发的「哔哔点啥」微信公众号 2.0 做的Butterfly适配。可以通过动态发一些一句话几句话的动态而不是写一篇博客,减少水文,提升整站文章质量。类似朋友圈。
效果预览 Demo
关于首页滚动哔哔可以参考本文
关于首页滚动的扩展阅读 Hexo的Butterfly主页适配哔哔动态,博客主页展示滚动消息
前期准备 首先需要配置腾讯云开发,这个部分可以参考「哔哔点啥」微信公众号 2.0 中的配置过程。
教程部分摘录: 这个部分摘录「哔哔点啥」微信公众号 2.0 详细图文教程请看原文章,这里指摘录文字部分。
创建应用 1.注册云开发CloudBase
2.进入云开发控制台 ,新建环境,请按需配置环境。
3.进入环境-登录授权 ,启用“匿名登录”
4.进入环境-安全配置 ,将网站域名添加到“WEB安全域名”
5.进入数据库 ,新建数据库集合,命名 talks,权限设置为 “所有用户可读,仅管理员可写”。
云函数部署 1.接着 新建云函数
函数名称 bber
(可自定义),进入 函数代码
编辑,复制 index.js 代码丢入 index.js
,然后确定。
2.点击“文件 - 新建文件”,复制 package.json 代码丢入 package.json
,点击 保存并安装依赖
。
3.进入环境-HTTP访问服务 ,新建,路径与云函数名匹配。
现在点开看一下,提示 key不匹配,成功!
1 https://你后台显示的.ap-shanghai.app.tcloudbase.com/bber
!!!注意:第一时间修改云函数中 bber
这个预设的「自定义apikey」!!!
详细操作步骤可以根据原文来进行,出现错误可以检查本文的哪些步骤没有完成。
主题配置 在themes/butterfly/layout/includes/page
新建文件bb.pug
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 h1.page-title(style='display: inline;')= page.title #bber-loading #bber .js-pjax script(type='text/javascript', src='https://imgcache.qq.com/qcloud/cloudbase-js-sdk/1.4.0/cloudbase.full.js', data-pjax='') script(type='text/javascript', src='https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js', data-pjax='') script(type='text/javascript', src='https://cdn.jsdelivr.net/gh/buddys/qq-wechat-emotion-parser@master/dist/qq-wechat-emotion-parser.min.js', data-pjax='') script. const app = cloudbase.init({ env: 'zhheo-00000000', //这里是你的环境id //region: "ap-guangzhou" }) script(type='text/javascript', src='https://cdn.jsdelivr.net/gh/zhheo/bber@main/bber.js', data-pjax='')
添加判断 编辑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
大功告成! 现在你就可以玩动态啦!通过「哔哔点啥」微信公众号 2.0 可以了解到发送哔哔的方式。调整一点点样式就可以实装了!
附录1:使用iOS快捷指令发哔哔 安装 使用手机Safari浏览器打开立即打开 安装快捷指令,第一次运行需要授权。
配置 第一个文本块中输入的是例子:
1 https://你后台显示的.ap-shanghai.app.tcloudbase.com/bber?key=云函数里设置的默认为bber&from=这条哔哔的来源&text=
点击运行即可,运行样式:
如果电脑没有安装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" : [] }
附录3:css样式 附上我用的样式,可供参考。可以在配置文件中引用,也可以在bb.pug
文件中插入。
以下二选一即可。
配置文件中插入 1 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/js-heo@1.0.11/bb/bber.css" type="text/css" >
bb.pug中插入 1 link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/js-heo@1.0.11/bb/bber.css', type='text/css')
推荐参考 「哔哔点啥」微信公众号 2.0 哔哔官网