后端
创建应用
环境名称自由填写,推荐选择计费方式包年包月。
推荐创建上海环境,因为无需额外配置地域。
- 进入环境 - 登录授权,启用“匿名登录”;
- 进入环境 - 安全配置,将博客网址添加到“WEB安全域名”;
- 进入数据库,新建数据库集合,命名 talks,权限设置为“所有用户可读,仅管理员可写”。
扫码进入公众号,输入命名绑定:
/bber bber,https://你的云函数 HTTP 访问地址/bb
部署云函数
- 新建云函数
函数名称 bber(可自定义),进入 函数代码
编辑,复制 index.js。
-
点击“文件 - 新建文件”,复制 package.json 代码丢入 package.json,点击
保存并安装依赖
。 -
进入环境 - HTTP 访问服务,新建,路径与云函数名匹配,复制链接备用。
部署首页广播
- 新建云函数
bber-talk
。 - 编辑
index.js
,添加以下内容:
/**
* 个人哔哔云存储 json
* date: 2021.01.15 23:59
**/
'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()
//获取总数 count
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
,添加以下内容:
{
"name": "bber-talk",
"version": "1.0.0",
"main": "index.js",
"dependencies": {
"@cloudbase/node-sdk": "^2.4.4"
}
}
点击 保存并安装依赖
。
- bber 云函数添加异步代码:
170 行左右,取消 index.js
的注释。
//异步转存json
try {
await app.callFunction({name: 'bber-talk'}, { timeout: 300 })
} catch (e) {
console.log('开始异步转存json')
}
- 发一条哔哔。
进入云存储 - json–bber.json,详情 – 下载地址,得到类似下面格式地址:
https://6262-bb-f5c0f-1252354806.tcb.qcloud.la/json/bber.json
问题
哔哔短路 400/404:
进入腾讯云云开发 - 数据库 - talks - 添加文档:
手动添加一条哔哔内容:
- 字段:content
- 类型:string
- 值:"test"
回到微信公众号,发送一条哔哔,就一切正常。
回到数据库,把 test 那条删掉,不然会出现 BUG。
前端
在 [root]/source/bb/
目录创建 index.md,添加如下内容:
---
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://www.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
,添加如下内容:
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>
按需修改,访问你的博客,大功告成。
发表回复