GBlog-wx：微信小程序博客

我們只是搬運(yùn)工，將color-ui樣式與halo接口結(jié)合了一下。

halo作為后臺(tái)，小程序樣式采用color-ui組件。

一、展示

三、說明

本項(xiàng)目采用halo作為后臺(tái)，調(diào)用halo接口。小程序樣式使用color-ui組件組件。

四、使用

1.后臺(tái)搭建

采用halo搭建，具體可查看halo文檔：https://halo.run

2.小程序?qū)?/h4>

• 拉取代碼

  git clone git@github.com:fuzui/GBlog-wx.git

• 導(dǎo)入工具

  通過微信公眾平臺(tái)注冊小程序賬號，登錄后在開發(fā)——開發(fā)設(shè)置中查看AppID；

  下載微信開發(fā)者工具，選擇小程序——導(dǎo)入項(xiàng)目，選擇剛剛clone的文件夾并填寫自己的AppID.

  

• 配置

  將config中有個(gè)api-tmp.js文件重命名為api.js。

  修改如下配置：

  const ApiBaseUrl = '';//生產(chǎn)上
  const Config = {
   ?AccessKey: '',
   ?guestbookSheetId: 2
  }

  1.ApiBaseUrl為halo后臺(tái)地址，上線必須為域名，在開發(fā)者工具中可點(diǎn)擊右上角詳情——本地設(shè)置，將不校驗(yàn)合法域名打勾。

  2.AccessKey為halo api的AccessKey。進(jìn)入halo后臺(tái)管理系統(tǒng)，在系統(tǒng)——博客設(shè)置——高級選項(xiàng)——API設(shè)置中，將API 服務(wù)開啟，并設(shè)置Access key。將此Access key填入上述js文件中對應(yīng)位置。

  

  3.guestbookSheetId該值是留言板頁面id，默認(rèn)為關(guān)于頁的評論，可自行前往表結(jié)構(gòu)中查看。（默認(rèn)2）

?

• 配置合法域名

  在微信公眾平臺(tái)中，開發(fā)——開發(fā)設(shè)置——服務(wù)器域名中添加request、uploadFile、downloadFile合法域名。將上述ApiBaseUrl域名添加到request合法域名，例如www.geekera.com。

  

  

3.高級功能配置(非必須)

• 海報(bào)分享

  開啟文章分享海報(bào)功能

• 文章訂閱、評論通知

  開啟新文章訂閱、評論回復(fù)通知

• 自定義文章內(nèi)容樣式

  修改文章、日記、評論解析樣式

五、結(jié)構(gòu)

GBLOG-WX ? ? 
├── cloudfunctions      // 云服務(wù)
├── colorui ? ? ? ? ?   // color-ui組件庫 
├── component ? ? ? ? ? // 自定義組件
│ ? ? ? └── article-list ? ? ? ? ? ? ? ?  // 文章列表
│ ? ? ? └── canvas-share ? ? ? ? ? ? ? ?  // 海報(bào)生成
│ ? ? ? └── parser ? ? ? ? ? // parser富文本組件
├── config              // 配置文件
├── images ? ?          // 圖片
├── pages ?             // 頁面代碼
├── utils ? ?           // 公用js
?

六、功能

瀏覽頁面功能：

• 文章瀏覽、評論、點(diǎn)贊、搜索

• 文章分類、標(biāo)簽、歸檔

• 光影照片

• 日記

• 留言

• 友情鏈接

• 站點(diǎn)統(tǒng)計(jì)

• 文章分享海報(bào)

• 新文章訂閱

• 評論回復(fù)通知

管理頁面功能：

目前管理頁面不支持開啟二步驗(yàn)證登錄！

• 后臺(tái)登錄

• 站點(diǎn)信息

• 個(gè)人信息修改

• 服務(wù)器信息查看

• 博客設(shè)置瀏覽

• 友鏈管理

• 日記管理

• 文章/分類/標(biāo)簽管理

• 附件上傳、圖庫管理

• 評論審核、回復(fù)

• 主題切換、菜單編輯

七、致謝

• halo 一個(gè)優(yōu)秀的開源博客發(fā)布應(yīng)用

• ColorUI 鮮亮的高飽和色彩，專注視覺的小程序組件庫

• Parser 小程序富文本插件（html 渲染）

• Hux Blog的背景圖

八、聯(lián)系

如果您發(fā)現(xiàn)了什么bug，或者有什么界面建議或意見，

歡迎 issue，當(dāng)然也可以直接點(diǎn)小程序關(guān)于欄中的“聯(lián)系我”或“意見反饋”或“留言”。