小程式+語雀API一鍵搭建個人部落格
theme: channing-cyan
本文正在參加「金石計劃」
前言
關於這個專案的搭建原因，來源於自己一直想寫一個個人部落格專案，但是苦於搭建部落格不僅僅需要地方存放靜態頁面，還需要介面服務來儲存文章資訊，一直到看到了有人利用語雀開發API來進行開發，於是乎去嘗試了一下發現是可行的，於是開始用 uni-app + 語雀 API 來開發這個個人部落格小程式。
為什麼是小程式？因為小程式提供了方便的釋出流程，以及相對於網頁來的更加容易傳播的傳播途徑（手機掃碼就可以檢視），採用 uni-app 只是因為沒有開發過小程式，但是經常聽說這個開發小程式的 vue 框架，所以決定嘗試著使用一下。
關於 語雀的API ，官方有提供文件來進行查閱，並且只需要個人token就能夠獲取一切知識庫當中的資料，相當於說，只要修改一個token，就可以把這個專案的資料來源換成任何人的，這也就是標題所說的，最簡單的情況下一鍵就可以擁有一個自己的部落格。
專案演示
首頁
首頁的最上方設計了一個歡迎頁，下面通過配置生產了不同的板塊來作為首頁的展示
歡迎頁為實現功能： - 個人資訊展示:目前就放上了個人微信，可以通過在congfig中- 配置圖片。 - 明暗交替:這個後面會考慮一套方案來實現，暫時整個專案的css並未作出抽離
可以通過配置不同的引數來實現列表展示不同的板塊：
由於每個人的語雀的引數是不同的，所以直接使用的話只有 ReposList 全部板塊是能夠正常渲染的
知識庫列表
入口為
ReposList 板塊型別的更多按鈕，能夠進入一個獲取個人所有知識庫的列表頁，頁面頂部為個人姓名以及介紹
下面渲染的模組就是首頁的 ArticleList 模組，能夠正常的瀏覽文章，進入詳情。
文章列表
入口為 ReposList 板塊型別的某一項點選，能夠進入點選的知識庫詳情，詳情展示知識庫相信資訊，並且能夠正常點選文章進入文章詳情
面渲染的模組就是首頁的 ArticleCard，通過點選進入文章詳情。
文章詳情
文章詳情展示，通過官方的 rich-text元件進行展示，並且附上了語雀的連結，不過現在語雀好像非會員是沒有辦法讓別人檢視自己的文章的。
核心模組
1. 通過 token 呼叫語雀 API，實現更換一個 token 擁有個人部落格
專案相關的配置都儲存在 config 資料夾底下，只需要修改其中對應的配置，就可以隨心修改這個專案的展示，首先是設定好自己的語雀 token，並且需要給予許可權
然後token的配置是在src下的 yuque.json 中
然後在 config/index 還存在著部分其他配置
```js import yuque from '../yuque.json';
// AuthToken export const AuthToken = yuque.AuthToken; export const CONFIG = { API: yuque.YuQueApi }
export const WELCOME_TEXT = [ 'Welcome to Yelll\'s Personal blog!🤣🤣🤣', 'Hope you have a nice day!🍭🍭🍭', ] export const TITLE = 'Yellll🍦' export const WEIXIN_IMAGE = 'https://mr-yel.github.io/assets/yel-uni-app-blog/yel.jpg' ```
WELCOME_TEXT為陣列，首頁的打字機文字TITLE為首頁頂部的title名稱WEIXIN_IMAGE為首頁微信圖示點選後展示的圖片，我這裡是我自己的微信名片
接著就是在 config/contentConfig 中配置首頁模組
js
export const contentConfig = {
data: [
{
type: 'ReposList',
},
{
type: 'ArticleList',
namespace: 'u21228658/ga5z5o',
},
{
type: 'ArticleList',
namespace: 'u21228658/lnce1z',
},
{
type: 'ArticleCard',
namespace: 'u21228658/ga5z5o',
slug: 'pt7q4fdzxupeg6gw',
},
]
}
-
ReposList板塊就是所有的知識庫板塊，這個板塊只需要 token 正確就能夠正常展示 -
ArticleList板塊就是知識庫文章列表板塊，代表的是某個知識庫底下的所有文章，下面會介紹如何去獲取一個知識庫的namespace。 -
ArticleCard 板塊就是某篇文章的詳情板塊，代表的就是某一篇文章的詳情，需要通過知識庫的
namespace以及文章的slug，下面會介紹如何獲取。
獲取知識庫 namespace
通過語雀主頁進入到某一個具體的知識庫當中，這裡以我自己的為例，上方路由當中就會包含當前知識庫的 namespace
獲取文章 slug
進入某一篇具體的文章，就能夠在路由上看到當前文章的知識庫 namespace以及文章本身的 slug
2. 首頁模組設計
首頁是通過可配置的模組來設計的，後面可以加入更多的不同的模組甚至可以將這份配置放入雲端來做到動態渲染，有點類似於低程式碼的思路，但是有一個蛋疼的地方就是，小程式是不支援 vue 的 component 動態標籤的，所有隻能 if else 會顯得程式碼比較臃腫：
3. 檢視與資料分類
如果有看程式碼會發現，首頁並不是直接渲染了檢視元件，而是包裹了一層 ComponentDataAcquirer，目的是將元件的資料渲染層和檢視展示層進行分離，在 ArticleCardAcquirer 這層會去請求資料，並且內部包裹了檢視元件，在 ArticleCard 檢視層才是實際渲染出來的元件，這樣就能夠做到資料和檢視分離，加強了 CardComponents 裡面的元件的複用性，這裡面的元件只關心資料的展示而不關心資料的來源，這樣就能夠在之後的列表頁進行復用。
4. 。。。
TODO列表
專案底下存在 TODO.md 檔案，記錄了之後準備新增的功能，以及優化的部分，當然想要為這個專案不足之處或者有更好的功能想法提出意見的，可以評論或者私信作者。
原始碼
文章的最後放上專案的 github 地址，感興趣的小夥伴可以自己執行看看，關於要如何釋出自己的小程式這點在網上已經有很多的教程了，我就不再過多的描述，大家可以自行上網搜尋，最後這個專案還不夠完善，只是剛剛到了能看的地步，希望大家多提意見，在之後有空了會進行修改。
https://github.com/Mr-Yel/yuque-personal-blog