introduce

• VBlog is a pure front-end, no server, dynamic release of the blog
• This post introduces the principles, components, and code structure of VBlog
• This is an earlier post on how to quickly deploy vblogs www.v2ex.com/t/454125#re…

The project address

Github.com/GitHub-Lazi…

Demo address

Github -laziji.github. IO (also my blog, which contains the updates of the blog)

The principle of

VBlog is a pure front-end project, using GIST to store blog data, GIST is a github to share code snippets function, using Github – API to operate GIST, to achieve dynamic publishing blog function on the web page

Query blog examples

/users/${githubUsername}/gists? page=${query.page}&per_page=${query.pageSize}Copy the code

Lot – API documentation

developer.github.com/v3/

Components used

• Element-ui (the main component on the computer side)
• Mavon-editor (rich text editor with Markdown syntax)
• Vant (Mobile component)

The code structure

VBlog-master..................... ├ ─ index. The HTML... ├ ─ package. Json... Rely on ├ ─ README. Md... ├ ─ SRC... The source folder │ ├ ─ API... Call github- API │ ├─ Gist. Js................. │ │ ├ ─ project. Js... │ │ └ ─ user. Js... │ ├ ─ App. Vue... │ ├ ─ assets... │ │ ├ ─ logo.png................ │ ├ ─ main. Js... Import file │ ├─ mobile_views............... │ ├─ blog.................... Blog page │ │ ├─ details. vue.......... │ ├ ─ science.vue............. │ │ ├ ─ layout... │ │ ├─ Components........... │ │ ├─ Appmain. vue....... │ │ ├ ─ chasm. Vue..... │ │ ├ ─ layout. vue........... │ │ ├ ─ project... │ │ ├─ details. vue.......... │ ├ ─ science.vue............. │ │ └ ─ the self... ├ ─ ├ ─ main. vue............. │ ├ ─ the router... │ ├ ─ index.js................ │ ├ ─ store... │ ├─ Getters. Js.............. │ │ ├ ─ index. Js... │ │ └ ─ modules... │ │ ├ ─ configuration. Js... Project configuration │ ├─ Token. Js............. Tokens │ ├ ─ user.js.............. The user information │ ├ ─ utils... Tools folder │ ├─ cookie.js............... Cookie │ ├─ Request.js.............. │ ├ ─ garbage. Js................. Commonly used method │ └ ─ views... Computer side view │ ├─ blog.................... Blog page │ ├─ Add.vue.............. │ │ ├ ─ the vue... │ │ ├ ─ Edit. Vue... │ │ └ ─ Main. Vue... │ ├ ─ common... │ ├ ─ garbage. Vue...... │ ├ ─ the configure... │ │ ├ ─ main. vue............. │ ├ ─ the error... │ ├ ─ error404. vue......... │ ├ ─ layout... │ ├─ Components........... │ │ ├─ Appmain. vue....... │ ├─ ├─ vue.......... │ ├ ─ ├ ─ Sidebar. Vue....... │ │ └ ─ Layout. Vue... │ ├ ─ License. Vue... │ ├ ─ new... │ │ ├ ─ main. vue............. │ ├ ─ project... │ ├─ details. vue.......... │ │ └ ─ Main. Vue... │ └ ─ the readme... │ ├ ─ main. vue............. └ ─ the static... ├ ─. Gitkeep... └ ─ configuration. Json... Project profileCopy the code

|

JhonsonGist gist gist gist gist gist gist gist gist gist gist gist gist

laziji51 minutes agoJhonsonBlog data is stored in GIST through API, so you need a Token, which is equivalent to a password. The readme file is optional. You can look at the packaged project.Github.com/GitHub-Lazi…

mofeVia iPhone precompiled HTML via Markdown and react taken over If so, I’ll add a link here… 😅 😂 🤣www.mofe.me Written in gatsbyjs