现在单页应用“霸道”，新时代知识信息量巨大，需要自己的博客积累知识。总之，Moka走进了我们的实现。github.com/moyuyc/mokaUsage为了一目了然的看到效果，我先说一下如何安装和使用。一切从npm开始$npmi-gmoka-cli安装后$moka-h#help$moka-v#version$mkdirmyBlog$cdmyBlog$mokai#打开你自己的spaBlog$mokag#生成静态页面$mokas#开启本地服务，在本地就可以看到效果！$mokanabc#新建一篇文章$mokad#根据moka.config.json发布deploy$mokab#根据moka.config.json备份所有文件bak上线效果moyuyc.github.ioMoka主题配置默认主题是react/webpack开发的，但是...可惜我误删了源码...，还好...留下了构建和生产环境代码...{"avatar":"/head.jpg",//头像"title":"摸鱼开发博客",//网站标题"description":"Web,NodeC/C++Dev","mainInfoColor":"",//首页信息文字颜色，默认white"canvasColor":"",//飘在首页的雪花的颜色"leftPercentage":50,//左边的百分比，右边会自动为100-leftPercentage，<=0会隐藏lefton非主页"pageSize":6,//每页文章数，<=0显示在一页上"summaryNum":50,//摘要中截断的单词数"postTarget":"_blank",//文章中的链接跳转方式"iconTarget":"_blank",//左侧图标链接的跳转方式"projectTarget":"_blank",//项目中链接的跳转方式"home":{//首页右侧的文字内容"title":"关于我","contentHtml":"
我是Javascrip爱好者。我组织了百度BEFEMeetup，并尽我所能帮助团队。我也是核心开发团队的成员。
"},//projects"projects":[{"title":"魔域主题","state":"Doing",//不可无"image":"https:///raw.githubusercontent.com/TaylanTatli/Ramme/master/assets/img/screenshot-post.png""link":""//点击跳转地址},{"title":"摸鱼主题","state":"Doing","image":"https://raw.githubusercontent.com/TaylanTatli/Ramme/master/assets/img/screenshot-post.png"},{"title":"魔域主题","状态":"Doing","image":"https://raw.githubusercontent.com/TaylanTatli/Ramme/master/assets/img/screenshot-post.png"},{"title":"摸鱼主题","状态”：“正在做”，“图像”：“https://raw.githubusercontent.com/TaylanTatli/Ramme/master/assets/img/screenshot-post.png"},{"title":"摸鱼主题","state":"Doing","image":"https://raw.githubusercontent.com/TaylanTatli/Ramme/master/assets/img/screenshot-post.png"}],"icon":[//左侧图标键的命名请参考font-awesome.css{"github":"https://github.com/moyuyc"}],"coverImage":{//左封面"images":{"tags":"http://taylantatli.me/Halve/images/unsplash-gallery-image-3.jpg","主页":"http://taylantatli.me/Halve/images/unsplash-image-10.jpg","文章":"http://taylantatli.me/Halve/images/unsplash-图库图像3。jpg","serach":"http://taylantatli.me/Halve/images/unsplash-image-10.jpg","notExist":"http://taylantatli.me/Halve/images/unsplash-gallery-image-3.jpg","posts":[//posts可以是一个数组（对于每个页面），可以是一个字符串"http://taylantatli.me/Halve/images/unsplash-image-10.jpg","http://taylantatli.me/Halve/images/home.png","http://taylantatli.me/Halveve/images/unsplash-gallery-image-3.jpg"]},"articleCover":true//是否打开文章封面，在文章头部配置`cover:...`，看默认文章`LinuxC学习一周`}}DocumentMoka认为前端UI和数据应该完全分离，而不是像hexo这样的传统博客，这样做的好处不言而喻，第一次加载的数据可能会更多时间，但后续操作更愉快，网站体验更优化。既然如此，那么Moka生成的数据是什么样子的呢？数据格式moka使用主流的json字符串$mokagenerate生成json如下{"main":{"filename":{"content":"...","head":{"date":"","title":"","tags":[tagnames...]or"tagname"}}},"index":{"sorted":[filenames...],"tagMap":{"tagname":[filenames...]}}}表示可以通过配置控制“content”，返回markdown或html（请看下面的配置returnRaw说明）“head”表示在文章的header中解析出的数据---...---,tags可以是Array（多个）或String（单个）"sorted"是文件名数组按时间倒序排列"tagMap"是所有标签的映射，即哪些文章包含"tagname"配置说明主要包括defaultconfig、moka.config.json、theme.config.json、theme.config.jsdefaultconfig是moka的初始配置，不建议修改{theme:"moka",//当前ThemeapiRoot:"moka_api",//存放moka生成数据和配置的文件夹/MM/DDHH:mm:ss",//默认生成时间格式（见moment.js）//见标记配置（marked.js:https://github.com/chjj/marked）标记：{options:{gfm:true,tables:true,breaks:false,pedantic:false,sanitize:false,smartLists:true,smartypants:false,highlight:function(code){returnrequire('highlight.js').highlightAuto(code).value;}},setup:function(renderer){renderer.heading=function(text,level){varescapedText=text.toLowerCase().replace(/[^\w]+/g,'-');返回'
'+text+'';}}},returnRaw:false,//*是否返回markdown字符串，则主题需要自行转换markdown标题:'Blog',favicon:"favicon.ico",//网站图标injectScript:true,//是否注入`moka.inject.js`themeBuild:"build"//将把themes/moka/build中的文件放到static中，将build视为生产环境代码}moka.config.json是全局站点配置，可以在apiRoot中获取{"theme":"moka","ttitle":"摸鱼博客","favicon":"favicon.ico","author":"moyu","description":"摸鱼博客","siteName":"site",//moka生成配置"deploy":{"type":"git","url":"https://github.com/moyuyc/moyuyc.github.io.git","branch":"master"}}theme.config.json是主题配置，在apiRoot中可用，完全为主题开发者定制。关于默认主题配置说明，请参见[主题自述文件](THEME_README.md)theme.config.js。为了主题开发者也能控制Moka生成数据，可以修改这个文件覆盖默认配置module.exports={apiRoot:"moka_api",skipRegExp:"/[^\.(md|markdown)]$/",//http://momentjs...,smartypants:false},setup:function(renderer){//在这里控制渲染器规则，详见marked}},returnRaw:false,themeBuild:"build",}八卦开发者可以通过ajax/fetch/...异步获取apiRoot配置下的db.json/moka.config.json/theme.config.json，然后使用react/vue/webpack/...开发自己喜欢的主题栏和默认主题是用react/webpack开发的，但是...可惜我误删了源码...，幸好...留下了构建和生产环境代码...star一下！
