介绍
- VBlog 是一个纯前端, 无须服务器 实现动态发布的博客
- 这个帖子主要介绍一下 VBlog 的原理, 使用的组件和代码结构
- 这是之前发了一个如何快速部署 VBlog 的帖子 t/454125#reply6
项目地址
https://github.com/GitHub-Laziji/vblog
演示地址
https://github-laziji.github.io (也是我的博客, 里面有博客的更新记录)
原理
VBlog 是一个纯前端的项目, 利用 gist 来存储博客的数据, gist 是 github 上一个分享代码片段的功能, 利用 github-api 来操作 gist, 实现在网页上动态发布博客的功能
查询博客的例子
/users/${githubUsername}/gists?page=${query.page}&per_page=${query.pageSize} github-api 文档
https://developer.github.com/v3/
使用的组件
- 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.........项目配置文件 
Select Language