后端
创建应用
- 注册云开发 CloudBase;
- 进入云开发控制台,新建环境,请按需配置环境;
环境名称自由填写,推荐选择计费方式包年包月。
推荐创建上海环境,因为无需额外配置地域。
- 进入环境 - 登录授权,启用“匿名登录”;
- 进入环境 - 安全配置,将博客网址添加到“WEB安全域名”;
- 进入数据库,新建数据库集合,命名 talks,权限设置为“所有用户可读,仅管理员可写”。
扫码进入公众号,输入命名绑定:
1
| /bber bber,https://你的云函数 HTTP 访问地址/bb
|
部署云函数
- 新建云函数
函数名称 bber(可自定义),进入 函数代码
编辑,复制 index.js。
-
点击“文件 - 新建文件”,复制 package.json 代码丢入 package.json,点击 保存并安装依赖
。
-
进入环境 - HTTP 访问服务,新建,路径与云函数名匹配,复制链接备用。
部署首页广播
- 新建云函数
bber-talk
。
- 编辑
index.js
,添加以下内容:
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
|
'use strict'; const tcb = require("@cloudbase/node-sdk"); const app = tcb.init({ env: tcb.SYMBOL_CURRENT_ENV }) const db = app.database() const path = require('path') const fs = require('fs')
exports.main = async (event, context) => { const talksCollection = db.collection('talks') const CreateTime = Date.now() const resCount = await talksCollection.count() let Count = resCount.total await talksCollection.where({}).orderBy("date", "desc").limit(9).get().then((res) => { console.log("总数:"+Count) let dataJson = {code: 0,count: Count,data: [],msg: `成功`} for(var i=0;i<res.data.length;i++){ var obj = { date: res.data[i].date, content: res.data[i].content, from: res.data[i].from }; dataJson.data.push(obj); } let contentJson = JSON.stringify(dataJson,null,'\t') console.log(contentJson) let ws = fs.createWriteStream('/tmp/bber'+CreateTime+'.json', { autoClose: true }); ws.write(contentJson, 'utf8') app.uploadFile({ cloudPath: 'json/bber.json', fileContent: fs.createReadStream('/tmp/bber'+CreateTime+'.json') }).then((res) => { ws.on('finish', function () { console.log('ok') }); }) }) }
|
- 新建并编辑
package.json
,添加以下内容:
1 2 3 4 5 6 7 8
| { "name": "bber-talk", "version": "1.0.0", "main": "index.js", "dependencies": { "@cloudbase/node-sdk": "^2.4.4" } }
|
点击 保存并安装依赖
。
- bber 云函数添加异步代码:
170 行左右,取消 index.js
的注释。
1 2 3 4 5 6
| try { await app.callFunction({name: 'bber-talk'}, { timeout: 300 }) } catch (e) { console.log('开始异步转存json') }
|
- 发一条哔哔。
进入云存储 - json–bber.json,详情 – 下载地址,得到类似下面格式地址:
1
| https://6262-bb-f5c0f-1252354806.tcb.qcloud.la/json/bber.json
|
问题
哔哔短路 400/404:
进入腾讯云云开发 - 数据库 - talks - 添加文档:
手动添加一条哔哔内容:
- 字段:content
- 类型:string
- 值:“test”
回到微信公众号,发送一条哔哔,就一切正常。
回到数据库,把 test 那条删掉,不然会出现 BUG。
前端
在 [root]/source/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
| --- title: 哔哔 date: 2022-6-27 ---
<div id="speak"></div> <script type="text/javascript" src="https://www.casecori.top/js/ispeak-bber-md.min.js" charset="utf-8" ></script> <script> ispeakBber .init({ el: '#speak', // 容器选择器 name: 'CasecoRI', // 显示的昵称 envId: 'bber-6gqg8l6o2909aed6', // 环境 id region: 'ap-shanghai', // 腾讯云地址,默认为上海 limit: 10, // 每次加载的条数,默认为 5 loadingImg: 'https://source.casecori.top/img/ld.gif', avatar: 'https://cdn.casecori.top/gh/cystee/om/favicon.png', fromColor:'rgb(245, 150, 170)', // 下方标签背景颜色 默认 rgb(245, 150, 170) dbName:'talks' // 数据的名称,默认 talks,避免有人的命名不是这个,所以加入此配置字段。 }) .then(function() { // 哔哔加载完成后的回调函数,你可以写你自己的功能 console.log('哔哔加载完成') }) </script>
|
在 [root]/source/_data/
目录创建 widget.yml
,添加如下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| bottom: - class_name: latestBB name: 最新哔哔 icon: fas fa-bolt html: | <div class="swiper-container swiper-container-aside"> <div class="swiper-wrapper swiper-weapper-aside"></div> </div> <span>更多哔哔详见首页顶部。</span> <script> window.kkBBConfig = { limit: 9, blog:'/bb/', api_url: 'https://6262-bber-6gqg8l6o2909aed6-1304849434.tcb.qcloud.la/json/bber.json' } </script> <script src="https://cdn.casecori.top/npm/butterfly-bber-swiper/dist/index.min.js"></script>
|
按需修改,访问你的博客,大功告成。