V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
laziji
V2EX  ›  分享创造

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

  •  1
     
  •   laziji · 2018-05-14 12:36:06 +08:00 · 3532 次点击
    这是一个创建于 2369 天前的主题,其中的信息可能已经有所发展或是发生改变。

    介绍

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

    用 gatsbyjs 写的
    Jackliu
        4
    Jackliu  
       2018-05-14 14:50:30 +08:00
    支持。福州? 还有 跟 vuepress 有什么区别
    laziji
        5
    laziji  
    OP
       2018-05-14 15:02:13 +08:00
    @Jackliu 区别挺大的 vuepress 是静态页面生成器, 发布博客需要提交文件到 github 上 依赖环境, VBlog 的特点就是动态发布 , 和在 V2EX 上发文章一样 ,数据储存在 gist 上, 比 vuepress 方便些
    laziji
        6
    laziji  
    OP
       2018-05-14 15:03:22 +08:00
    @Jackliu 你说的福州是我从我的 github 上获取的信息, 名字和头像也是
    Jackliu
        7
    Jackliu  
       2018-05-14 16:03:14 +08:00
    @laziji 同福州人,支持,到时可能以你这个为基础,修改部分样式。
    huiyadanli
        8
    huiyadanli  
       2018-05-14 19:15:54 +08:00
    发现一个问题,开源项目中 watch 数等于 star 数。。。
    看了下原来是 github api 返回的就是这样。。。
    这算是 github 的 bug 么。。。
    wspsxing
        9
    wspsxing  
       2018-05-14 19:31:11 +08:00
    支持 lz。
    laziji
        10
    laziji  
    OP
       2018-05-14 19:52:50 +08:00
    @huiyadanli 对对 .. 我那时候刚做的时候也感觉奇怪 返回的几个 watch 都是和 star 一样
    laziji
        11
    laziji  
    OP
       2018-05-14 19:56:34 +08:00
    @wspsxing 哈哈 谢谢 ≖‿≖✧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1061 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 19:33 · PVG 03:33 · LAX 11:33 · JFK 14:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.