VBlog的代码结构,使用vue-element,vue-vant组件开发的纯前端博客

简介

博客基于 GitHub Pages 与 Github API 实现无后台，可动态发布博客的系统博客数据储存于gist 通过Github API 进行增删改查喜欢的话留下你的星星╭(●｀??●)╯╰(●’?’●)╮

特点

[x] 基于 GitHub Pages 无需服务器
[x] 改进传统 GitHub Pages 不能动态发布的缺陷
[x] 包含电脑端和移动端
[x] 单页面应用

演示地址

https://github-laziji.github.io

项目源码

https://github.com/GitHub-Laziji/vblog

2018.5.11 更新

移动端增加博客, 项目, 个人中心, 移动端和PC端共用API, 页面独立
修复文章样式奇怪的BUG

2018.5.8 更新

增加配置选项
改善富文本编辑器

2018.5.6 更新

状态栏增加音乐播放器

2018.5.5 更新

增加了系统配置, 可以动态修改标题, 描述, 背景等配置

2018.5.2 更新

增加博客和项目列表的分页
增加分享链接
改进Token绑定验证
修改代码结构

2018.4.30 更新

添加了从github获取个人开源项目的功能,显示信息更加全面,显示开源项目列表
Readme 从github动态获取

2018.4.29 更新

增加个人信息的状态栏
修复发图片博文的BUG

快速使用

搭建博客只需2步

点击github头像旁边的 “+” 号选择 “Import repository” 克隆地址填”https://github.com/GitHub-Laziji/GitHub-Laziji.github.io” 项目名填 “${你的用户名}.github.io”
克隆完成后修改文件 /static/configuration.json 中的 “github-username” 为自己的github用户名

类似演示地址其中 GitHub-Laziji 为我的用户名

现在 ${你的用户名}.github.io 就是你的个人博客了,例如https://github-laziji.github.io

获取Token

在 github settings Developer settings Personal access tokens 勾选 gist 和 repo 权限获取Token

使用的组件

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.........项目配置文件