0.前言
再过三天,就要考期末考试了。按照一位沈姓老师的说法(我保证,这个老师绝对不叫从文),至少要有三天的准备时间。到目前为止,正好三天。
就在与此同时,我看到了杨哥在看一看点过的一篇在看的文章,介绍了markmap这款可视化工具。天哪,我竟然才发现这个工具,果然总是闭门造车是不行的。
我尝试将二者加以结合,事实证明,markmap是一款非常好用的可视化交互工具,只是还有一些小小的不足,我将在本文中讨论。
1.MarkMap简介
为了更好地展示导图,我特意在这里写了个小标题
传统的Markdown格式是将markdown格式的代码转成相应的具有简单排版格式的文档。然而有时候这种文字对文字的简单排版可能就不能很好的表达意思,同时交互性也不强。Markmap很好的克服了这些问题。譬如以这篇文章为例,MarkMap会生成这样的一个图谱。这个图谱是可交互的,我们可以通过点击圆圈来收缩或者扩张出更深一层的内容。
2.与复习提纲的结合
我们按照一定的标题层级,对章节、问题、答案分别编上格式,可以得到这样的Markdown预览
这显然对复习毫无帮助。这时候我们在VScode上安装MarkMap插件,就可以 以Markmap的格式进行预览了。
但在编辑时,其实有一些小问题。随着编辑的增长,导图也会变得复杂,但预览总是对导图进行居中,并适应屏幕大小。这就导致预览的导图字越来越小,最后变成这样子。
这里我强烈建议大家可以先按照PPT背诵,然后在对着问题写出答案,生成这张提纲。
当然,上面这个小标题也是为了生成这篇文章的导图用的,没其他用处。
3.导出成HTML
在预览图中的右下角有一些帮助按钮,第一个可以帮我们导出成HTML格式,并直接发布。但要命的是,HTML的初始状态也是居中,并且让所有的信息都显示在屏幕上,这糟透了,完全是糟糕的用户体验,因为用户需要自己来放大他想看的点。
我们或许在初始状态下,展示给用户更少的信息!比如说,只展示几个章节,用户可以自己点开感兴趣的章节!我浏览了一些生成的HTML代码,发现确实可以这样做,因为每个节点都有一个height属性!这个height应该就是在树中的高度!
但经过仔细观察,其实并不是高度,而是标题的级别。
问题不大不过,我们可以根据这个,先隐藏掉章节内部的内容,只呈现给用户章节,用户点开章节之后,我们再居中并自适应,来优化用户体验。
4.效果图
进入页面显示章节
点开任意章节,整图自动居中并自适应屏幕。
其实也可以做更多功能,比如收起所有等等,懒得做了。
5.页面地址
http://fgb2019.top/course/index/cn_marx_and_modern 或者点击阅读原文访问
6.总结
总的来说,MarkMap很强大,但还可以更进一步优化,比如当内容很多的时候,可以向开发者展示一个局部的情况,或者分页面展示正在编辑的局部区域的情况,以及整体的缩略图。在生成的HTML中也可以提供更多功能,如全部展开、收起,或者按层级展开收起等。
另外,导出的HTML在手机上也可以正常显示,真是神器!