Omi应用md2site-0.5.0发布-支持动态markdown拉取解析
2024-10-16 08:45:47
写在前面
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
欢迎使用~~
最新文章
- 建筑行业如何用BPM替换OA?
- android dialog 模拟新浪、腾讯title弹框效果
- shell如何在指定文件的指定位置后面添加内容
- cocos2dx与Lua以及quick cocos
- 计算机IT求职学习List
- 【Qt】Qt之密码框不可选中、复制、粘贴、无右键菜单等【转】
- Android核心基础(手机卫士的一个知识点总结)
- Google Map API v2 步步为营 (二)----- Location
- php几个比较高级的函数
- thinkphp 获取客户端ip地址方法
- 基于google earth engine 云计算平台的全国水体变化研究
- 【学习opencv第六篇】图像的反转操作
- Linq语法常见普通语法
- 《尚学堂_史上最易懂的设计模式视频》--章节3 Iterator迭代 模拟列表
- Mac OSX常用工具
- C# 实现邮件收取发送功能
- C# 图像处理:实现鼠标选择矩形截图
- Vue之vuex实现简易计算器
- LeetCode: Insertion Sort List 解题报告
- 【JS深入学习】——函数创建和重载