HTML5技术

Omi应用md2site-0.5.0发布-支持动态markdown拉取解析 - 【当耐特】

字号+ 作者:H5之家 来源:H5之家 2017-03-16 11:03 我要评论( )

写在前面 Md2site是基于Omi的一款Markdown转网站工具,使用简单,生成的文件轻巧,功能强大。 在使用之前的版本的时候,你会发现体验非常好?为什么非常好?因为页面间的切换是无刷新! 无刷新的原理就是,所有的markdown都会被webpack打包到js里,只要在js

写在前面

Md2site是基于Omi的一款Markdown转网站工具,使用简单,生成的文件轻巧,功能强大。

在使用之前的版本的时候,你会发现体验非常好?为什么非常好?因为页面间的切换是无刷新!
无刷新的原理就是,所有的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:

  • 你把async改成true就代表会生成一个异步拉取和解析markdown的网站
  • 你把async改成false就代表会生成一个完全无刷新的网站
  • 够方便吧!!一键配置!!

    原理解析 防止webpack打包markdown

    当我们设置async为true的时候,不是希望webpack把markdown打包入js里的,所以在webpack config做了如下操作:

    (

    其中config.module.loaders[3]就是配置的markdown loader。exclude就代表把相关的正则匹配到的文件直接给无视掉。

    动态加载markdown

    ()url.() .) .send(null); }

    加载完后直接交给remarkable解析成HTML,remarkable解析成HTML的速度超快到你无法感知,所以提前生成好HTML不是非常必要。

    Async Update

    ..(md).) }

    异步的刷新组件。

    详细的代码可以看这里

    Github
  • https://github.com/AlloyTeam/omi/tree/master/md2site
  • 欢迎使用~~

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • omi-cli新版发布-升级webpack2和支持sass生成组件局部CSS - 【当耐特】

      omi-cli新版发布-升级webpack2和支持sass生成组件局部CSS - 【当耐特

      2017-03-16 11:03

    • 常见的几种数据加密与应用场景 - 连程

      常见的几种数据加密与应用场景 - 连程

      2017-03-14 15:00

    • Omi应用md2site发布-markdown转网站利器 - 【当耐特】

      Omi应用md2site发布-markdown转网站利器 - 【当耐特】

      2017-03-06 16:01

    • Omi命令行界面omi-cli发布 - 【当耐特】

      Omi命令行界面omi-cli发布 - 【当耐特】

      2017-02-27 17:00

    网友点评
    e