Omi应用md2site-0.5.0发布-支持动态markdown拉取解析

写在前面

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

欢迎使用~~