Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ma63d/kov-blog
A blog platform built with koa,vue and mongoose. 使用 koa ,vue 和 mongo 搭建的博客页面和支持markdown语法的博客编写平台,自动保存草稿。博客地址:https://chuckliu.me
https://github.com/ma63d/kov-blog
highlight koa mongo mongoose simplemde vue vue-router vuex webpack
Last synced: 30 days ago
JSON representation
A blog platform built with koa,vue and mongoose. 使用 koa ,vue 和 mongo 搭建的博客页面和支持markdown语法的博客编写平台,自动保存草稿。博客地址:https://chuckliu.me
- Host: GitHub
- URL: https://github.com/ma63d/kov-blog
- Owner: Ma63d
- License: mit
- Created: 2016-07-06T11:47:09.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-30T04:02:56.000Z (almost 7 years ago)
- Last Synced: 2024-09-23T01:32:43.419Z (about 2 months ago)
- Topics: highlight, koa, mongo, mongoose, simplemde, vue, vue-router, vuex, webpack
- Language: JavaScript
- Homepage:
- Size: 837 KB
- Stars: 636
- Watchers: 31
- Forks: 103
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# kov-blog
[v2版本正在开发当中...](https://github.com/Ma63d/kov-blog/tree/v2)
> a blog platform built with vue, koa and mongo. 使用vue,koa和mongo搭建的博客页面和markdown语法的博客编写平台,自动保存草稿。
博客预览地址:[https://chuckliu.me](https://chuckliu.me)
`kov-blog` 使用了`vue`、`vuex`、`koa`和`mongo`等框架和技术。前后端分离,restful架构。项目主要包含三个文件夹和项目：
- server 后台 包含了所有的后台服务，为博客和博客管理提供后台接口
- client 前端 博客的前端呈现，被`vue`洗脑严重，界面模仿了[vue官方博客](http://v1.vuejs.org/blog/)，评论系统用的是[多说](http://duoshuo.com/)(但是多说很不稳定...而且已经很久无人维护..)
- admin 前端 博客管理平台的前端，功能上类似于带发布博客功能的印象笔记，markdown语法，预览和编写同步进行，带有自动保存功能，书写的文章只有在`发布`之后才会同步当前内容到博客client页面上，也完全可以当做一个笔记类应用去用，这样做的目的是出于有的时候在写文章a的时候,觉得某一部分的内容过于复杂,可以另外开一篇文章b来仔细讲解下,但是等我写完a就忘了,因为以往的博客cms比如hexo,wordpress之类都是直接发布的.而且这样做了之后博客也好用多了,我经常在码代码的时候遇到一些问题,这样可以直接打开博客后台,开一篇文章记录一下遇到的问题,但是不发布出去,提醒自己需要整理一篇相关内容的文章.以后一登这个管理系统就可以看到了这篇没有没有发布过的文章,就可以整理这篇文章,等到写完之后发布出去就可以了.
**使用了许多es6新特性,请使用6.0以上版本的node!**
**使用之前请先确保已经安装mongo!**
**如果要使用评论系统,请先注册多说,修改/client/src/Blog.vue中的多说二级域名为您自己的多说二级域名**
## server
基于restful，nodejs的话采用koa框架(koa 1)，数据库用了mongo。登录这块的话用了[jwt](https://jwt.io/introduction/).
生产环境下可在可在server/configs目录下增加private.js文件,增加私有配置.
**因为使用了许多es6/7 新语法,所以请使用6.x版本node**
### npm command
```
# install dependencies
npm install
# 开发
# 带热重载，跑在本地3000端口
npm run dev-server
# 部署
npm run build-server
```
## client
博客呈现页面，基于vue(1.0)，前后端通信用的[fetch](https://www.npmjs.com/package/whatwg-fetch)，评论系统用的是[多说](http://duoshuo.com/)，界面模仿了[vue博客](http://cn.vuejs.org/blog/)，大量使用了其[样式效果](https://github.com/vuejs/cn.vuejs.org)，还有很多要完善的地方。
### 技术栈
1. [Vue](http://vuejs.org.cn) && [vue-router](https://github.com/vuejs/vue-router)
3. [fetch](https://www.npmjs.com/package/whatwg-fetch)
4. [stylus](http://stylus-lang.com/)
5. [marked](https://github.com/chjj/marked) && [highlight](https://github.com/isagalaev/highlight.js)
### npm command
```
# install dependencies
npm install
# 开发,跑在本地8080端口
npm run dev-client
# 打包
npm run build-client
```
## admin
**初始用户名:admin,初始密码:password**
博客管理系统，也是前后端完全分离的。功能上类似于印象笔记，实时保存你的文章，当你觉得写好了之后可以`发布`文章，每次`发布`都会把文章同步更新到博客上，这样在client端就能看到。采用markdown语法，编辑器采用的是[SimpleMDE](https://github.com/NextStepWebs/simplemde-markdown-editor)，支持大量快捷键。
快捷键 | Action
:------- | :-----
*Cmd-'* | "toggleBlockquote"
*Cmd-B* | "toggleBold"
*Cmd-E* | "cleanBlock"
*Cmd-H* | "toggleHeadingSmaller"
*Cmd-I* | "toggleItalic"
*Cmd-K* | "drawLink"
*Cmd-L* | "toggleUnorderedList"
*Cmd-P* | "togglePreview"
*Cmd-Alt-C* | "toggleCodeBlock"
*Cmd-Alt-I* | "drawImage"
*Cmd-Alt-L* | "toggleOrderedList"
*Shift-Cmd-H* | "toggleHeadingBigger"
*F9* | "toggleSideBySide"
*F11* | "toggleFullScreen"
### 技术栈
1. [Vue](http://vuejs.org.cn) && [vuex](https://github.com/vuejs/vuex) && [vue-router](https://github.com/vuejs/vue-router)
3. [fetch](https://www.npmjs.com/package/whatwg-fetch)
4. [stylus](http://stylus-lang.com/)
5. [SimpleMDE](https://github.com/NextStepWebs/simplemde-markdown-editor) && [marked](https://github.com/chjj/marked) && [highlight](https://github.com/isagalaev/highlight.js)
### npm command
```
# install dependencies
npm install
# 开发,跑在本地8081端口
npm run dev-admin
# 打包
npm run build-admin
```