前言
Mermaid是一个用文本语法来描述文档图形 (流程图、 时序图、甘特图) 的工具,这里主要讲如何引入使用 。
安装
首先引入
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/mermaid/8.14.0/mermaid.min.js" type="application/javascript"></script>
这里使用的是字节跳动提供的源。
然后加入代码
mermaid.initialize({startOnLoad:true});
现在这个时候已经基本完成了,但最重要的一点就是mermaid默认是查找文章中所有类为mermaid包裹的内容,所以这个时候你需要将使用mermaid的内容包裹起来,例如:
<div class="mermaid">Mermaid</div>
问题解答
这个时候就有同学问了,如果我不想要这个mermaid,想要更改这个类名怎么处理。
也好办,把下面这串代码加到刚才那串代码的后面:
mermaid.init(".test");
这个test就是你可以自定义的类名
Typecho文章中可能会对HTML标签进行过滤,所以也需要进行相应的处理。
如果不想这么麻烦的话已经有一款插件给你解决了这个问题。
mrgeneralgoo/typecho-markdown
139 更新于2022-06-17 16:06:37
这个插件默认是使用mermaid类,若要更改可修改该插件目录下的
ParsedownExtension.php
第228行'class' => 'mermaid'
,把这个mermaid更改为你想要的即可。Pjax下需要将以下代码放入Pjax的complete或end
mermaid.init(".类名");
这个类名是你自己自定义的类名,若是使用默认的mermaid,直接mermaid.init();即可
看到了,我想问一下博主,用https://github.com/ShunCai/QZoneExport 这个插件导出来的说说内容,如何导入到说说里面呢?博主研究研究
https://demo.lvshuncai.com/qzone-export/Messages/index.html
这是预览页面,可以导出来内容,就是我想将这个内容导入到博客里面,该如何做呢?
你可以自己研究研究
微语是哪个插件呢?博主,请教
不是插件,独立页面,选择微语模板
我来踩一下。