小程序+語雀API一鍵搭建個人博客_實習生小黃

theme: channing-cyan

前言

關於這個項目的搭建原因，來源於自己一直想寫一個個人博客項目，但是苦於搭建博客不僅僅需要地方存放靜態頁面，還需要接口服務來保存文章信息，一直到看到了有人利用語雀開發API來進行開發，於是乎去嘗試了一下發現是可行的，於是開始用 uni-app + 語雀 API 來開發這個個人博客小程序。

為什麼是小程序？因為小程序提供了方便的發佈流程，以及相對於網頁來的更加容易傳播的傳播途徑（手機掃碼就可以查看），採用 uni-app 只是因為沒有開發過小程序，但是經常聽説這個開發小程序的 vue 框架，所以決定嘗試着使用一下。

關於語雀的API ，官方有提供文檔來進行查閲，並且只需要個人token就能夠獲取一切知識庫當中的數據，相當於説，只要修改一個token，就可以把這個項目的數據來源換成任何人的，這也就是標題所説的，最簡單的情況下一鍵就可以擁有一個自己的博客。

項目演示

首頁

首頁的最上方設計了一個歡迎頁，下面通過配置生產了不同的板塊來作為首頁的展示

動畫1.gif

歡迎頁為實現功能： - 個人信息展示:目前就放上了個人微信，可以通過在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 = 'http://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 地址，感興趣的小夥伴可以自己運行看看，關於要如何發佈自己的小程序這點在網上已經有很多的教程了，我就不再過多的描述，大家可以自行上網搜索，最後這個項目還不夠完善，只是剛剛到了能看的地步，希望大家多提意見，在之後有空了會進行修改。

http://github.com/Mr-Yel/yuque-personal-blog

小程序+語雀API一鍵搭建個人博客