Skip to content

Latest commit

 

History

History
154 lines (123 loc) · 4.69 KB

DOCUMENT.md

File metadata and controls

154 lines (123 loc) · 4.69 KB
Raw

Document

Moka, 认为前端UI与数据应该完全分离开来, 而不是像hexo那样传统的blog。 这样做的好处不言而喻, 可能第一次加载数据较多, 但是后续操作更加畅快, 网站体验更加优化了。

既然如此, 那么Moka产生的数据是什么样子的呢?

数据格式

Moka 采用主流的json字符串

$ moka generate 后产生的json如下

{
    "main": {
        "filename": {
            "content": "...",
            "head": {
                "date": "",
                "title": "",
                "tags": [tagnames...] or "tagname"
            }
        }
    },
    "index": {
        "sorted": [filenames...],
        "tagMap": {
            "tagname": [filenames...]
        }
    }
}

说明

  • "content"可以通过配置控制, 返回markdown或者html(请看下文配置returnRaw说明)
  • "head"表示在文章中头部---...---中解析出来的数据, tags 可以是Array(多个)或String(单个)
  • "sorted"为按照时间倒序的filenames数组
  • "tagMap"为所有tag的映射, 即哪些文章包含"tagname"

配置说明

主要包含 default config, moka.config.json, theme.config.json, theme.config.js

  • default config 为Moka初始配置, 不推荐修改

    {
 theme: "moka", // 当前主题
 apiRoot: "moka_api", // moka generate 数据和配置 所存放的文件夹
 
 skipRegExp: "/[^\.(md|markdown)]$/", // 在 _articles 中渲染忽略的文件名正则表达式
 
 timeFormat: "YYYY/MM/DD HH:mm:ss", // 默认产生的时间格式 (参看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字符串, 那么需要主题自己转换markdown
 title: 'Blog',
 favicon: "favicon.ico", // 网站图标
 injectScript: true,  // 是否注入`moka.inject.js`
 themeBuild: "build" // 将会取 themes/moka/build 中文件放到 static 中, 认为build为生产环境代码
}

  • moka.config.json 为全局站点配置, 在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中可以得到, 完全为主题开发者自定义

    关于默认主题配置说明, 请看theme readme

  • theme.config.js 为了主题开放者也能够控制Moka产生数据, 可以修改该文件, 从而覆盖默认配置

    module.exports = {
    apiRoot: "moka_api",
    skipRegExp: "/[^\.(md|markdown)]$/",
    //http://momentjs.com/
    timeFormat: 'YYYY-MM-DD HH:mm', // 返回的时间格式

    marked: {
        options: {
            gfm: true,
            tables: true,
            breaks: false,
            pedantic: false,
            sanitize: false,
            smartLists: true,
            smartypants: false
        },
        setup: function (renderer) {
            // 在这里控制renderer规则, 详细请看 marked
        }
    },
    
    returnRaw: false,
    themeBuild: "build",
}

闲话

开发者可以通过ajax/fetch/...异步获取 apiRoot配置下的db.json/moka.config.json/theme.config.json

然后尽情用react/vue/webpack/...开发自己喜欢的主题吧。

还有默认主题是用react/webpack开发的, 但...不幸的是, 本人误操作把源码都删了..., 但万幸的是...留下了build, 生产环境的代码...