介紹
- VBlog 是一個純前端, 無須服務器, 實現動態發佈的博客
- 這個帖子主要介紹一下 VBlog 的原理, 使用的組件和代碼結構
- 這是以前發的一個如何快速部署 VBlog 的帖子 https://www.v2ex.com/t/454125#reply6
項目地址
https://github.com/GitHub-Laziji/vbloghtml
演示地址
https://github-laziji.github.io (也是個人博客, 裏面有博客的更新記錄)前端
原理
VBlog 是一個純前端的項目, 利用 gist 來存儲博客的數據, gist 是 github 上一個分享代碼片斷的功能, 利用 github-api 來操做 gist, 實如今網頁上動態發佈博客的功能vue
查詢博客的例子
/users/${githubUsername}/gists?page=${query.page}&per_page=${query.pageSize}
github-api 文檔
https://developer.github.com/v3/ios
使用的組件
- Element-UI (電腦端主要的組件)
- mavon-editor (markdown 語法的富文本編輯器)
- vant (移動端的組件)
代碼結構
VBlog-master..................... ├─ index.html.................... ├─ package.json..................依賴 ├─ README.md..................... ├─ src...........................源碼文件夾 │ ├─ api........................調用 github-api │ │ ├─ gist.js................. │ │ ├─ project.js.............. │ │ └─ user.js................. │ ├─ App.vue.................... │ ├─ assets.....................資源文件夾, 暫時沒東西 │ │ └─ logo.png................ │ ├─ main.js....................入口文件 │ ├─ mobile_views...............移動端視圖 │ │ ├─ blog....................博客頁面 │ │ │ ├─ Details.vue.......... │ │ │ └─ Main.vue............. │ │ ├─ layout..................移動端佈局 │ │ │ ├─ components........... │ │ │ │ ├─ AppMain.vue....... │ │ │ │ └─ Bottombar.vue..... │ │ │ └─ Layout.vue........... │ │ ├─ project.................項目頁面 │ │ │ ├─ Details.vue.......... │ │ │ └─ Main.vue............. │ │ └─ self....................我的中心頁面 │ │ └─ Main.vue............. │ ├─ router.....................路由 │ │ └─ index.js................ │ ├─ store......................全局狀態管理 │ │ ├─ getters.js.............. │ │ ├─ index.js................ │ │ └─ modules................. │ │ ├─ configuration.js.....項目配置 │ │ ├─ token.js.............Token │ │ └─ user.js..............用戶信息 │ ├─ utils......................工具文件夾 │ │ ├─ cookie.js...............操做 cookie │ │ ├─ request.js..............axios 請求 │ │ └─ util.js.................經常使用方法 │ └─ views......................電腦端視圖 │ ├─ blog....................博客頁面 │ │ ├─ Add.vue.............. │ │ ├─ Details.vue.......... │ │ ├─ Edit.vue............. │ │ └─ Main.vue............. │ ├─ common..................公共視圖 │ │ └─ TokenDialog.vue...... │ ├─ configure...............配置頁面 │ │ └─ Main.vue............. │ ├─ error...................錯誤狀態頁面 │ │ └─ Error404.vue......... │ ├─ layout..................電腦端佈局 │ │ ├─ components........... │ │ │ ├─ AppMain.vue....... │ │ │ ├─ Foot.vue.......... │ │ │ └─ Sidebar.vue....... │ │ └─ Layout.vue........... │ ├─ License.vue............. │ ├─ new.....................最新動態頁面 │ │ └─ Main.vue............. │ ├─ project.................開源項目頁面 │ │ ├─ Details.vue.......... │ │ └─ Main.vue............. │ └─ readme..................README 頁面 │ └─ Main.vue............. └─ static........................ ├─ .gitkeep................... └─ configuration.json.........項目配置文件