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

[laziji]

介绍

• VBlog 是一个纯前端, 无须服务器, 实现动态发布的博客
• 这个帖子主要介绍一下 VBlog 的原理, 使用的组件和代码结构
• 这是之前发了一个如何快速部署 VBlog 的帖子 https://www.v2ex.com/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.........项目配置文件

[Jhonson]

很棒呀，但是就是在发布 blog 方面看不太懂，你的意思是不是只需要把 md 文件发布到 gist 就可以自动同步到博客啦？

[laziji]

@Jhonson 不是的, 直接点博客列表里的 发表博客就行了, 直接在网页上发布, 博客数据是通过 api 存在 gist 的 , 所以需要一个 Token, 相当于密码, readme 那个文件可有可无 , 你可以看看打包好的项目, https://github.com/GitHub-Laziji/GitHub-Laziji.github.io

[mofe]

通过 markdown 预编译成 html，打开后由 react 接管的 blog 算不算纯前端博客？如果算那我加一个链接在这……😅😂🤣 https://www.mofe.me

用 gatsbyjs 写的

[Jackliu]

支持。福州？ 还有 跟 vuepress 有什么区别

[laziji]

@Jackliu 区别挺大的 vuepress 是静态页面生成器, 发布博客需要提交文件到 github 上 依赖环境, VBlog 的特点就是动态发布 , 和在 V2EX 上发文章一样 ,数据储存在 gist 上, 比 vuepress 方便些

[laziji]

@Jackliu 你说的福州是我从我的 github 上获取的信息, 名字和头像也是

[Jackliu]

@laziji 同福州人，支持，到时可能以你这个为基础，修改部分样式。

[huiyadanli]

发现一个问题，开源项目中 watch 数等于 star 数。。。
看了下原来是 github api 返回的就是这样。。。
这算是 github 的 bug 么。。。

[wspsxing]

支持 lz。

[laziji]

@huiyadanli 对对 .. 我那时候刚做的时候也感觉奇怪 返回的几个 watch 都是和 star 一样

[laziji]

@wspsxing 哈哈 谢谢 ≖‿≖✧