实现自己的“单页”博客，只需要一个指令 (Moka)
如今,單頁應(yīng)用"橫行霸道", 而且新時(shí)代知識信息海量,我們更需要自己的Blog來沉淀知識。
綜上,Moka走入了我們的實(shí)現(xiàn)。
github.com/moyuyc/moka
Usage
為了第一眼能看到效果, 我先把如何安裝使用說一下。
一切從npm開始
$ npm i -g moka-cli安裝完成后
$ moka -h # 幫助 $ moka -v # 版本$ mkdir myBlog $ cd myBlog $ moka i # 開啟自己的spa Blog $ moka g # generate static pages $ moka s # 開啟本地服務(wù),可以在本地看到效果了！ $ moka n abc # 新建一個(gè)article$ moka d # 根據(jù) moka.config.json deploy 發(fā)布 $ moka b # 根據(jù) moka.config.json bak 備份所有文件線上效果
moyuyc.github.io
Moka主題配置
默認(rèn)主題是用react/webpack開發(fā)的,
但...不幸的是, 本人誤操作把源碼都刪了..., 但萬幸的是...留下了build, 生產(chǎn)環(huán)境的代碼...
Document
Moka, 認(rèn)為前端UI與數(shù)據(jù)應(yīng)該完全分離開來, 而不是像hexo那樣傳統(tǒng)的blog。
這樣做的好處不言而喻, 可能第一次加載數(shù)據(jù)較多, 但是后續(xù)操作更加暢快, 網(wǎng)站體驗(yàn)更加優(yōu)化了。
既然如此, 那么Moka產(chǎn)生的數(shù)據(jù)是什么樣子的呢?
數(shù)據(jù)格式
Moka 采用主流的json字符串
$ moka generate 后產(chǎn)生的json如下
{"main": {"filename": {"content": "...","head": {"date": "","title": "","tags": [tagnames...] or "tagname"}}},"index": {"sorted": [filenames...],"tagMap": {"tagname": [filenames...]}} }說明
"content"可以通過配置控制, 返回markdown或者h(yuǎn)tml(請看下文配置returnRaw說明)
"head"表示在文章中頭部---...---中解析出來的數(shù)據(jù), tags 可以是Array(多個(gè))或String(單個(gè))
"sorted"為按照時(shí)間倒序的filenames數(shù)組
"tagMap"為所有tag的映射, 即哪些文章包含"tagname"
配置說明
主要包含 default config, moka.config.json, theme.config.json, theme.config.js
-
default config 為Moka初始配置, 不推薦修改
{theme: "moka", // 當(dāng)前主題apiRoot: "moka_api", // moka generate 數(shù)據(jù)和配置 所存放的文件夾skipRegExp: "/[^\.(md|markdown)]$/", // 在 _articles 中渲染忽略的文件名正則表達(dá)式timeFormat: "YYYY/MM/DD HH:mm:ss", // 默認(rèn)產(chǎn)生的時(shí)間格式 (參看moment.js)// marked 配置參看(marked.js: https://github.com/chjj/marked)marked: {options: {gfm: true,tables: true,breaks: false,pedantic: false,sanitize: false,smartLists: true,smartypants: false,highlight: function (code) { return require('highlight.js').highlightAuto(code).value;}},setup: function (renderer) {renderer.heading = function (text, level) { var escapedText = text.toLowerCase().replace(/[^\w]+/g, '-');return '<h' + level + '><a name="' + escapedText + '" class="anchor" href="#' + escapedText + '"><span class="header-link"></span></a>' + text + '</h' + level + '>';}}},returnRaw: false, // * 是否返回markdown字符串, 那么需要主題自己轉(zhuǎn)換markdowntitle: 'Blog',favicon: "favicon.ico", // 網(wǎng)站圖標(biāo)injectScript: true, // 是否注入`moka.inject.js`themeBuild: "build" // 將會取 themes/moka/build 中文件放到 static 中, 認(rèn)為build為生產(chǎn)環(huán)境代碼 } -
moka.config.json 為全局站點(diǎn)配置, 在apiRoot中可以得到
{"theme": "moka","title": "Moyu Blog","favicon": "favicon.ico","author": "moyu","description": "moyu Blog","siteName": "site",// moka generate 配置"deploy": {"type": "git","url": "https://github.com/moyuyc/moyuyc.github.io.git","branch": "master"} } -
theme.config.json 為主題配置, 在apiRoot中可以得到, 完全為主題開發(fā)者自定義
關(guān)于默認(rèn)主題配置說明, 請看[theme readme](THEME_README.md) -
theme.config.js 為了主題開放者也能夠控制Moka產(chǎn)生數(shù)據(jù), 可以修改該文件, 從而覆蓋默認(rèn)配置
module.exports = {apiRoot: "moka_api",skipRegExp: "/[^\.(md|markdown)]$/",//http://momentjs.com/timeFormat: 'YYYY-MM-DD HH:mm', // 返回的時(shí)間格式marked: {options: {gfm: true,tables: true,breaks: false,pedantic: false,sanitize: false,smartLists: true,smartypants: false},setup: function (renderer) {// 在這里控制renderer規(guī)則, 詳細(xì)請看 marked}},returnRaw: false,themeBuild: "build", }
閑話
開發(fā)者可以通過ajax/fetch/...異步獲取 apiRoot配置下的db.json/moka.config.json/theme.config.json
然后盡情用react/vue/webpack/...開發(fā)自己喜歡的主題吧。
還有默認(rèn)主題是用react/webpack開發(fā)的,
但...不幸的是, 本人誤操作把源碼都刪了..., 但萬幸的是...留下了build, 生產(chǎn)環(huán)境的代碼...
star it!
總結(jié)
以上是生活随笔為你收集整理的实现自己的“单页”博客，只需要一个指令 (Moka)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 带你认识“货真价实”的P2P网贷风控
- 下一篇： python中单引号，双引号，多引号区别