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

2018-05-14 12:36:06 +08:00
 laziji

介绍

项目地址

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/

使用的组件

代码结构

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.........项目配置文件
3559 次点击
所在节点    分享创造
11 条回复
Jhonson
2018-05-14 12:42:22 +08:00
很棒呀,但是就是在发布 blog 方面看不太懂,你的意思是不是只需要把 md 文件发布到 gist 就可以自动同步到博客啦?
laziji
2018-05-14 13:09:40 +08:00
@Jhonson 不是的, 直接点博客列表里的 发表博客就行了, 直接在网页上发布, 博客数据是通过 api 存在 gist 的 , 所以需要一个 Token, 相当于密码, readme 那个文件可有可无 , 你可以看看打包好的项目, https://github.com/GitHub-Laziji/GitHub-Laziji.github.io
mofe
2018-05-14 13:18:00 +08:00
通过 markdown 预编译成 html,打开后由 react 接管的 blog 算不算纯前端博客?如果算那我加一个链接在这……😅😂🤣 https://www.mofe.me

用 gatsbyjs 写的
Jackliu
2018-05-14 14:50:30 +08:00
支持。福州? 还有 跟 vuepress 有什么区别
laziji
2018-05-14 15:02:13 +08:00
@Jackliu 区别挺大的 vuepress 是静态页面生成器, 发布博客需要提交文件到 github 上 依赖环境, VBlog 的特点就是动态发布 , 和在 V2EX 上发文章一样 ,数据储存在 gist 上, 比 vuepress 方便些
laziji
2018-05-14 15:03:22 +08:00
@Jackliu 你说的福州是我从我的 github 上获取的信息, 名字和头像也是
Jackliu
2018-05-14 16:03:14 +08:00
@laziji 同福州人,支持,到时可能以你这个为基础,修改部分样式。
huiyadanli
2018-05-14 19:15:54 +08:00
发现一个问题,开源项目中 watch 数等于 star 数。。。
看了下原来是 github api 返回的就是这样。。。
这算是 github 的 bug 么。。。
wspsxing
2018-05-14 19:31:11 +08:00
支持 lz。
laziji
2018-05-14 19:52:50 +08:00
@huiyadanli 对对 .. 我那时候刚做的时候也感觉奇怪 返回的几个 watch 都是和 star 一样
laziji
2018-05-14 19:56:34 +08:00
@wspsxing 哈哈 谢谢 ≖‿≖✧

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/454676

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX