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~~

使用姿勢

Crayon Syntax Highlighter v_2.7.2_beta

$ npm install md2site -g
$ md2site init your_project_name
$ cd your_project_name
$ npm run dev
$ npm run dist

[Format Time: 0.0020 seconds]

所有命令都是和以前一樣的。接下來，打開project.js:

Crayon Syntax Highlighter v_2.7.2_beta

module.exports = {
    cdn : '',
    async: true
}

[Format Time: 0.0005 seconds]

• 你把async改成true就代表會生成一個異步拉取和解析markdown的網站
• 你把async改成false就代表會生成一個完全無刷新的網站

夠方便吧！！一鍵配置！！

原理解析

防止webpack打包markdown

當我們設置async爲true的時候，不是希望webpack把markdown打包入js裏的，所以在webpack config做了如下操作：

Crayon Syntax Highlighter v_2.7.2_beta

var proj_config = require('./project.js');
if(proj_config.async) {
    config.module.loaders[3].exclude =  /\.md$/;
}

[Format Time: 0.0010 seconds]

其中config.module.loaders[3]就是配置的markdown loader。exclude就代表把相關的正則匹配到的文件直接給無視掉。

動態加載markdown

Crayon Syntax Highlighter v_2.7.2_beta

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);
 }

[Format Time: 0.0020 seconds]

加載完後直接交給remarkable解析成HTML，remarkable解析成HTML的速度超快到你無法感知，所以提前生成好HTML不是非常必要。

Async Update

Crayon Syntax Highlighter v_2.7.2_beta

asyncUpdate() {
    this.loadMarkdown("../../docs/" + this.data.lan + "/" + this.data.name + ".md",(md)=>{
        this.data.html = this.md.render(md);
        this.update();
    })
}

[Format Time: 0.0013 seconds]

異步的刷新組件。

詳細的代碼可以 看這裏

Github

• https://github.com/AlloyTeam/omi/tree/master/md2site

歡迎使用~~