写在前面
Md2site是基于Omi的一款Markdown转网站工具,使用简单,生成的文件轻巧,功能强大。
- 官网:http://alloyteam.github.io/omi/md2site/
- Github: https://github.com/AlloyTeam/omi/tree/master/md2site
- 真实案例:http://alloyteam.github.io/omi/website/docs-cn.html
在使用之前的版本的时候,你会发现体验非常好?为什么非常好?因为页面间的切换是无刷新!
无刷新的原理就是,所有的markdown都会被webpack打包到js里,只要在js动态require就行。
这样带来的一个问题便是:如果有海量的markdown的时候,首次加载的时间非常长。
怎么解决?支持动态拉取和解析markdown~~
使用姿势
$ npm install md2site -g
$ md2site init your_project_name
$ cd your_project_name
$ npm run dev
$ npm run dist
所有命令都是和以前一样的。接下来,打开project.js:
module.exports = {
cdn : '',
async: true
}
- 你把async改成true就代表会生成一个异步拉取和解析markdown的网站
- 你把async改成false就代表会生成一个完全无刷新的网站
够方便吧!!一键配置!!
原理解析
防止webpack打包markdown
当我们设置async为true的时候,不是希望webpack把markdown打包入js里的,所以在webpack config做了如下操作:
var proj_config = require('./project.js');
if(proj_config.async) {
config.module.loaders[3].exclude = /\.md$/;
}
其中config.module.loaders[3]就是配置的markdown loader。exclude就代表把相关的正则匹配到的文件直接给无视掉。
动态加载markdown
loadMarkdown(url,callback) {
var xobj = new XMLHttpRequest();
xobj.open('GET', url, true);
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
}
};
xobj.send(null);
}
加载完后直接交给remarkable解析成HTML,remarkable解析成HTML的速度超快到你无法感知,所以提前生成好HTML不是非常必要。
Async Update
asyncUpdate() {
this.loadMarkdown("../../docs/" + this.data.lan + "/" + this.data.name + ".md",(md)=>{
this.data.html = this.md.render(md);
this.update();
})
}
异步的刷新组件。
详细的代码可以看这里
Github
- https://github.com/AlloyTeam/omi/tree/master/md2site
欢迎使用~~