readme

README.md

@@ -1 +1,50 @@
 # blog-vue
+
+
+## 简介
+
+博客基于 GitHub Pages 与 Github API 实现无后台，可动态发布博客的系统
+博客数据储存于gist 通过Github API 进行增删改查
+
+### 特点
+
+- [x] 基于 GitHub Pages 无需服务器
+- [x] 改进传统 GitHub Pages 不能动态发布的缺陷
+- [x] 使用vue单页面，体验较好
+
+### 演示地址
+[https://github-laziji.github.io][1]
+
+### 快速开始
+不想下载源码编译的同学 可以直接下载打包好的文件 [https://github.com/GitHub-Laziji/GitHub-Laziji.github.io][2]
+
+## 准备工作
+
+### 安装
+
+    npm install 
+
+### 运行
+
+    npm run dev 
+
+
+### 构建
+
+    npm run build
+
+
+### 获取Token
+
+在 *github > settings > Developer settings > Personal access tokens*  勾选gist权限 获取Token
+
+
+------
+
+
+作者 *Laziji*
+
+
+
+  [1]: https://github-laziji.github.io
+  [2]: https://github.com/GitHub-Laziji/GitHub-Laziji.github.io

src/App.vue

@@ -1,26 +1,30 @@
 <template>
     <div id="app">
         <router-view/>
-        </div>
+    </div>
 </template>
 
 <script>
+    import { mapGetters } from 'vuex'
     export default {
         name: 'App',
-        mounted(){
+        computed: {
+            ...mapGetters([
+                'githubUsername'
+            ])
+        },
+        created(){
             let xmlhttp
             if (window.XMLHttpRequest){
                 xmlhttp=new XMLHttpRequest()
-            }
-            else{
+            }else{
                 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
             }
             xmlhttp.open("GET","../static/configuration.json",false)
             xmlhttp.send()
             let configuration = JSON.parse(xmlhttp.responseText)
             this.$store.dispatch("Init",configuration)
-            console.log(configuration)
-
+            console.log('加载配置文件...\n'+JSON.stringify(configuration))
         }
     }
 </script>

src/api/gist.js

@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import store from '../store/index'
 
 export default {
   test:function(){
@@ -7,8 +8,9 @@ export default {
     })
   },
   list:function(){
+    let githubUsername=store.state.configuration.githubUsername
     return request({
-      url: '/users/GitHub-Laziji/gists'
+      url: '/users/'+githubUsername+'/gists'
     })
   },
   single:function(id){

src/router/index.js

@@ -3,6 +3,8 @@ import Router from 'vue-router'
 import Error404 from '@/views/error/Error404'
 import Layout from '@/views/layout/Layout'
 
+import NewMain from '@/views/new/Main'
+
 import BlogMain from '@/views/blog/Main'
 import BlogEdit from '@/views/blog/Edit'
 import BlogDetails from '@/views/blog/Details'
@@ -25,7 +27,7 @@ export const constantRouterMap =  [
         children: [
             {
                 path: 'main',
-                component: Home
+                component: NewMain
             }
         ]
     },

src/store/modules/configuration.js

@@ -9,8 +9,17 @@ const configuration = {
   mutations: {
     SET_CONFIGURATION: (state, configuration) => {
       state.githubUsername = configuration["github-username"]
+      if(!state.githubUsername){
+        state.githubUsername="GitHub-Laziji"
+      }
       state.blogTitle = configuration["blog-title"]
+      if(!state.blogTitle){
+        state.blogTitle=state.githubUsername
+      }
       state.blogDescribe = configuration["blog-describe"]
+      if(!state.blogDescribe){
+        state.blogDescribe="欢迎来到"+state.githubUsername+"的个人博客。"
+      }
     },
     // GET_PARAM:(state, name) => {
     //   return state.configuration[name]

src/views/blog/Edit.vue

@@ -10,6 +10,7 @@
                 </el-form-item>
                 <el-form-item label="博客正文" prop="content">
                     <mavon-editor
+                    ref="md"
                     v-model="form.content"
                     :subfield="false"/>
                 </el-form-item>
@@ -80,7 +81,7 @@
                         this.submitButton.loading=true
                         this.submitButton.disabled=true
                         GistApi.create(this.form).then((result)=>{
-                            console.log(JSON.stringify(result))
+                            // console.log(JSON.stringify(result))
                             this.$message({
                                 message: '发表成功',
                                 type: 'success'

src/views/new/Main.vue

@@ -0,0 +1,57 @@
+<template>
+    <div>
+        <el-card shadow="never" style="min-height: 600px">
+            <div slot="header">
+                <span>{{blog.title}}</span>
+            </div>
+            <div style="font-size: 0.9rem;line-height: 1.5;color: #606c71;">
+                发布 {{blog.createTime}}<br>
+                更新 {{blog.updateTime}}
+            </div>
+            <div style="font-size: 1.1rem;line-height: 1.5;color: #303133;border-bottom: 1px solid #E4E7ED;padding: 20px 0px 25px 0px">
+                {{blog.description}}
+            </div>
+            <div v-html="blog.content"></div>
+        </el-card>
+    </div>
+</template>
+<script>
+    import GistApi from '@/api/gist'
+    export default{
+        data(){
+            return {
+                loading:false,
+                blog:{
+                    id:"",
+                    title:"",
+                    content:"",
+                    description:"",
+                    createTime:"",
+                    updateTime:""
+                }
+            }
+        },
+        mounted(){
+            this.loading=true
+            GistApi.list().then((result)=>{
+                if(!result||result.length==0){
+                    return
+                }
+                for(let key in result[0].files){
+                    this.blog.id=result[0]['id']
+                    break
+                }
+                GistApi.single(this.blog.id).then((result)=>{
+                    for(let key in result.files){
+                        this.blog['title']=key
+                        this.blog['content']=this.$markdown(result.files[key]['content'])
+                        this.blog['description']=result['description']
+                        this.blog['createTime']=this.$util.utcToLocal(result['created_at'])
+                        this.blog['updateTime']=this.$util.utcToLocal(result['updated_at'])
+                        break
+                    }
+                }).then(()=>this.loading=false)
+            })
+        },
+    }
+</script>