留言板信封构建,参考akilar大佬的方案进行构建:信笺样式留言板
引入组件
npm install hexo-butterfly-envelope --save
信笺配置
# 在主配置_config.yml或者主题配置_config.butterfly.yml文件中引入配置项
# envelope_comment
# see https://akilar.top/posts/58900a8/
envelope_comment:
enable: true #开关
cover: https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg #信笺封面图
message: #信笺内容,支持多行
- 有什么想问的?
- 有什么想说的?
- 有什么想吐槽的?
- 哪怕是有什么想吃的,都可以告诉我哦~
bottom: 自动书记人偶竭诚为您服务! #信笺结束语,只能单行
height: #调整信笺划出高度,默认1050px
path: #【可选】comments 的路径名称。默认为 comments,生成的页面为 comments/index.html
front_matter: #【可选】comments页面的 front_matter 配置
title: 留言板
comments: true
注册LeanCloud国际版账号,随后创建应用(针对同一个项目最好引用同一个应用,从而避免同一个页面中使用多个leancloud应用导致冲突问题)
_User
(创建自定义用户,输入用户名、密码)· 可为_User
添加列img,并为创建的用户配置头像url(如不配置则默认显示Artitalk的logo)
shuoshuo
)并为指定用户指定Class访问权限(add_fields、create、delete、update),此外需放开find、get的权限(否则后续访问会提示没有该class的权限) 在指定页面直接引用代码(可创建一个html直接引用进行测试)
<!-- 引用 artitalk -->
<script type="text/javascript" src="https://unpkg.com/artitalk"></script>
<!-- 存放说说的容器 -->
<div id="artitalk_main"></div>
<script>
new Artitalk({
appId: '', // Your LeanCloud appId
appKey: '' // Your LeanCloud appKey
})
</script>
如果数据正常配置,则出现下述页面标志配置成功
从butterfly@3.7.0开始支持npm安装方式嵌入,如果不通过官网提供自建页面的方式进行引用,则可以插件的方式进行构建。
构建步骤
<1>引入hexo-butterfly-artitalk插件
npm install hexo-butterfly-artitalk
<2>在主配置文件或者butterfly配置文件中引入配置
artitalk:
enable: true
appId:
appKey:
path:
js:
option:
front_matter:
aside: false # 关闭侧边栏
comments: false # 关闭评论
参数 | 说明 |
---|---|
appId | 【必须】LeanCloud 创建应用的 AppID |
appKey | 【必须】LeanCloud 创建应用的 AppKEY |
path | 【可选】Artitalk 的路径名称(默认为 artitalk,生成的页面为 artitalk/index.html) |
js | 【可选】更換 Artitalk 的 js CDN(默认为 https://cdn.jsdelivr.net/npm/artitalk) |
option | 【可选】Artitalk 需要的额外配置 |
front_matter | 【可选】Artitalk 页面的 front_matter 配置 |
登录后可进行说说发布,可在LeanCloud国际版中登录后发布即可,考虑数据安全性,可参考上述步骤控制class访问权限,只有满足访问权限的指定用户方可发布说说
a.添加_User用户信息
b.为shuoshuo、atComment限定用户访问权限
详细步骤可参考林木木大佬的哔哔教程,步骤实践如果可结合之前Twikoo手动部署
步骤说明
1.注册云开发CloudBase,创建应用,按需配置环境
2.项目配置
talks
,权限设置为 “所有用户可读,仅管理员可写”# 数据库预设为talks,则可自定义调整集合名称(保证index.js、数据库中的内容对应即可)
3.测试项目
# url测试说明
默认域名/bber?key=bber&from=xxx&text=xxx
key: 对应为函数的api(预设为bber,可自定义用于验证发送的权限,如果验证不通过则不予放行,提示NoSuchBucket Error)
from: 可结合自身需求自定义字段,
text: 发送的内容,对应为talks的content值
常见问题说明
下述问题是Nodejs环境问题,项目依赖的环境是Nodejs10.15,可在云函数创建的时候选择指定版本,且代码编辑完成需点击”保存并安装依赖”,让依赖正常装载。
错误码: INVOKE_FUNCTION_FAILED
错误信息: Code: 1 ScfRequestId: fed46212-9509-11ec-8491-5254008b42b8 Error: Runtime.ImportModuleError: Error: Cannot find module '@cloudbase/node-sdk' Require stack: - /var/user/index.js - /var/runtime/node12/UserFunction.js - /var/runtime/node12/Runtime.engine.js - /var/runtime/node12/bootstrap.js at Object.module.exports.load (/var/runtime/node12/UserFunction.js:34:13) at Runtime.handleOnce (/var/runtime/node12/Runtime.engine.js:99:38) at Timeout._onTimeout (/var/runtime/node12/Runtime.engine.js:56:12) at listOnTimeout (internal/timers.js:549:17) at processTimers (internal/timers.js:492:7)
错误码: INVOKE_FUNCTION_FAILED
错误信息: Code: -1 ScfRequestId: 597142b9-9516-11ec-9c2d-525400edf1a0 Error: TypeError: Cannot read property 'content' of undefined at talksCollection.where.orderBy.limit.get.then (/var/user/index.js:54:40) at process._tickCallback (internal/process/next_tick.js:68:7)
微信公众号接入bber的原理:主要是用户管理,通过绑定用户关联的bber环境,其存储的用户信息主要包括:open_id以及关联的bber环境信息(访问路径),相当于一个中转站的概念。由上述可知,bber环境构建完成之后可直接通过url或者接口测试工具直接访问。因此接入微信公众号的主要原理就是根据用户的open_id获取关联的bber环境信息,校验绑定成功之后随后接收用户发送的信息并拼接消息内容发送消息(talks存储的信息内容是关联所绑定的bber信息)
1.一键部署BBer-weixin微信公众号后端到云开发(建议直接手动部署,步骤和上述操作类似,Nodejs10.15、引入index.js、package.json)
2.公众号对接
部署完成进入该环境点击云函数bber-weixin:函数配置->【编辑】,开启【固定出口IP】(验证后会自动生成)
环境-HTTP访问服务,获取触发路径链接
(例如:默认域名/bber-weixin->https://xxx.ap-shanghai.app.tcloudbase.com/bber-weixin)
进入微信公众平台:
设置与开发->基本配置,获取AppID
和AppSecret
,进入bber-weixin云函数,填充微信公众号的appid、appsecret进行保存
// 微信公众号的服务器验证用的令牌 token(该值与)
const token = 'weixin'
//填入微信公众号appid和appsecret
var wxappid = 'xxx',
wxappsecret = 'xxx',
设置与开发->安全中心->IP白名单:修改IP白名单为上一步的公网固定IP
设置与开发->基本配置->服务器配置:URL(上述步骤获取的触发路径链接)、Token(预设为weixin)、随机生成EncodingAESKey、消息加解密方式:兼容模式
上述步骤完成配置,则提交验证,如果通过则说明配置成功,进行启用即可
回到bber-weixin云函数,注释掉验证返回的代码,使其正常执行流程
if(tmpStr == signature){
//请求来源鉴权
//成功后注释下行代码
return event.queryStringParameters.echostr //成功后注释本行代码
3.测试:关注微信公众号,发送文本内容绑定测试
绑定公众号
# 向公众号发送指令
/bber bber 域名/bber
# 等待响应,确认绑定是否成功(该指令是将当前用户绑定到步骤a中创建的bber环境,具体结合实际配置调整)
绑定成功,则可直接向公众号发送消息则为bb操作,可发送/h指令查看帮助手册,/nobber取消绑定
可能存在的问题
# 也可自定义,例如
const collection = db.collection('bber_users') // 与数据库相对应
如果单纯想要嵌入页面,则可直接参考ispeak-bber,在指定md文件中配置即可(但需注意引用的数据库命名)。如果想要自定义构建则可参考下述步骤。
思路构建说明
基于上述操作可以成功打通url访问和微信公众号接入的方式,但如果直接在前端展示的时候则需要通过函数转化响应数据进行处理,于是便可通过在发送哔哔的时候转存异步JSON的方式处理数据,将数据存储到CloudBase的云存储中。因此此处需要构建连个云函数分别用于处理数据:bber-talks-ts(bber-talks中转站:存储JSON数据)、bber-talks-list(用于列举bber-talks内容)
由于直接嵌入还有点小问题,后续调整操作主要是参考Heo大大的步骤进行完善和调整
构建步骤说明
1.基于前面的步骤,验证bbtalk是否可以正常响应
2.定义bber-talks-ts云函数,在哔哔成功之后异步调用bber-talks-ts函数转存JSON数据
# bber-talks-ts定义完成之后,随后在bber云函数中调整代码内容,在哔哔哔哔成功之后异步调用bber-talks-ts函数转存JSON数据
if(result.hasOwnProperty('id')){
content = '哔哔成功'
// 异步调用bb-talk函数,转存json数据
try {
await app.callFunction({name: 'bber-talks-ts'}, { timeout: 300 })
} catch (e) {
console.log('开始异步转存json')
}
}
3.定义bber-talks-list云函数,用于返回bber-talks数据
4.前端调整(上述两步是填充后台数据的操作,如果要把内容嵌入到前端页面则相应需要进行前端配置),嵌入bber相关代码,调用bber-talks-list函数并列出数据
步骤说明
link(rel='stylesheet', href='自定义css样式,可参考木木大大提供的css样式进行调整或者自定义', type='text/css')
style(type='text/css').
.timeline ul li::before{
background-image: url(https://背景图片设置);
}
h1.page-title(style='display: inline;')= page.title
#bber-loading
#bber-tips(style='color: var(--heo-secondtext);')
| 只展示最近30条短文
#bber
.js-pjax
script.
var bbapiurl = "对应转存的bber JSON文件的临时链接"
script(type='text/javascript', src='js定义', data-pjax='')
themes/butterfly/layout/page.pug
中引入判断(添加type类型判断),引入定义的bber.pug模板block content
#page
case page.type
when 'bber'
include includes/page/bber.pug
结果显示效果
5.扩展:引用到首页滚动,思路和上述配置类似,可参考Heo大大的文章博客主页滚动展示哔哔消息
# 构架步骤
1.引入themes/butterfly/layout/includes/bbTimeList.pug
2.配置主页themes/butterfly/layout/index.pug装载bbTimeList.pug
3.构建JS&CSS文件,并在引用中修改(注意json文件和相关css、js的引入路径、跳转的路径配置)
测试说明
1.尝试发送一条哔哔内容,随后检查在云存储相应的路径下是否有相关的bber.json数据生成(如果没有则相应检查数据是否发送成功、或者路径是否指定正常)
2.随后前端配置,引入bber数据展示