天天看點
傳回

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機制的資料強一緻性處理
下一篇: 數制轉換和子網路遮罩劃分一、數制的基本概念二、數制轉換三、子網路遮罩劃分