天天看点
返回

hexo-butterfly-闲聊侧hexo-butterfly-闲聊侧

hexo-butterfly-闲聊侧

​ 留言板信封构建，参考akilar大佬的方案进行构建：信笺样式留言板

1.留言板信封

构建说明

  • 组件方式引入
引入组件 
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

复制

2.引入说说

Artitalk.js

​ Artitalk.js

构建说明

<1>LeanCloud配置

​ 注册LeanCloud国际版账号，随后创建应用（针对同一个项目最好引用同一个应用，从而避免同一个页面中使用多个leancloud应用导致冲突问题）

  • 数据存储->结构化数据->

    _User

     (创建自定义用户，输入用户名、密码)

· 可为

_User

添加列img，并为创建的用户配置头像url（如不配置则默认显示Artitalk的logo）

  • 数据存储->结构化数据->创建class(

    shuoshuo

     )并为指定用户指定Class访问权限（add_fields、create、delete、update），此外需放开find、get的权限（否则后续访问会提示没有该class的权限）
hexo-butterfly-闲聊侧hexo-butterfly-闲聊侧
  • 数据存储->结构化数据->创建class(atComment：使用默认权限即可)
  • 设置->应用凭证->记录AppID、AppKey用于项目引用
  • 权限安全管理：将`_User`中的权限调整为指定用户或者数据创建者（避免用户数据被篡改或者破解）
hexo-butterfly-闲聊侧hexo-butterfly-闲聊侧
<2>说说引用
  • 方式1:页面直接引用
  • 方式2:npm插件方式引入

​ 在指定页面直接引用代码（可创建一个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>

复制

​ 如果数据正常配置，则出现下述页面标志配置成功

hexo-butterfly-闲聊侧hexo-butterfly-闲聊侧

​ 从[email protected]开始支持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 配置
<3>说说测试

​ 登录后可进行说说发布，可在LeanCloud国际版中登录后发布即可，考虑数据安全性，可参考上述步骤控制class访问权限，只有满足访问权限的指定用户方可发布说说

a.添加_User用户信息
b.为shuoshuo、atComment限定用户访问权限

复制

3.bb

a.基础配置

​ 详细步骤可参考林木木大佬的哔哔教程，步骤实践如果可结合之前Twikoo手动部署

步骤说明

1.注册云开发CloudBase，创建应用，按需配置环境

  • 环境-登录授权，开启

    匿名登录
  • 环境-安全配置，将网站域名添加到WEB安全域名

2.项目配置

  • 进入数据库，创建数据库集合，命名

    talks

     ，权限设置为 “所有用户可读，仅管理员可写” 
# 数据库预设为talks，则可自定义调整集合名称(保证index.js、数据库中的内容对应即可)

复制

  • 云函数构建：新建云函数（名称任意、Nodejs10.15）->函数代码：分别填充：index.js，package.json
  • 环境-访问服务：新建触发路径（域名：*；触发路径和关联资源设定与云函数匹配）

3.测试项目

  • 上述步骤完成，则通过域名/触发路径访问（域名为云开发资源提供的默认域名，例如https://xxx.ap-shanghai.app.tcloudbase.com/bber） 
# url测试说明
默认域名/bber?key=bber&from=xxx&text=xxx
key: 对应为函数的api(预设为bber,可自定义用于验证发送的权限,如果验证不通过则不予放行，提示NoSuchBucket Error)
from: 可结合自身需求自定义字段，
text: 发送的内容,对应为talks的content值

复制

  • 如果出现问题，则依据响应结果排查项目（官方提供错误码文档）
常见问题说明
  • INVOKE_FUNCTION_FAILED

​ 下述问题是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)

复制

  • 下述问题是由于talks数据表没有初始化数据导致（因为bber中需对重复的记录做过滤，因此要么调整验证逻辑，要么手动为talks添加一条记录：字段为content、值任意以初始化记录） 
错误码: 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)

复制

b.微信公众号接入

​ 微信公众号接入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取消绑定

复制

可能存在的问题
  • 如果发送信息无响应，需检查是否开启了服务器配置，是否注释掉了鉴权代码（鉴权直接返回相应没有执行后面的流程，所以无响应）
  • 如果提示“该公众号提供的服务出现故障”，可在对应云开发环境中的“日志管理”中查看具体的日志信息。例如一开始如果没有初始化数据集（DATABASE_COLLECTION_NOT_EXIST），而云函数需要对用户做校验，因此直接初始化一个user表即可 
# 也可自定义，例如
const collection = db.collection('bber_users') // 与数据库相对应

复制

c.JSON转存处理数据、前端嵌入

​ 如果单纯想要嵌入页面，则可直接参考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函数并列出数据

步骤说明
  • 在项目的themes/butterfly/layout/includes/page创建一个bber.pug模板 
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

复制

  • page引入：

    和categories、tags概念类似，可通过page的front-matter设定type从而指定要应用的模板，因此可以通过创建一个网页存放bb内容（可以通过指令或手动创建，随后在菜单中引用即可）

结果显示效果
hexo-butterfly-闲聊侧hexo-butterfly-闲聊侧

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数据生成（如果没有则相应检查数据是否发送成功、或者路径是否指定正常）

hexo-butterfly-闲聊侧hexo-butterfly-闲聊侧

2.随后前端配置，引入bber数据展示

  • 本地访问跨域问题可通过下载谷歌浏览器跨域插件allow-control-allow-origin
上一篇: 华为云微服务引擎CSE事务方案二：2PC机制的数据强一致性处理2PC机制的数据强一致性处理
下一篇: 数制转换和子网掩码划分一、数制的基本概念二、数制转换三、子网掩码划分