Hexo -38- Drawio 嵌入博客
博客 Hexo 嵌入 38 Drawio
2023-06-13 09:16:40 时间
Drawio 可以方便地输出流程图,也可以导出 html 代码,本文记录将 drawio 文件导出的 html 代码渲染到 hexo 博客中的方法。
实现思路
- 绘制 drawio 文件
- 将 drawio 文件导出为 html 代码
- 自建 js 文件服务
- 向文章中添加 html 代码
操作流程
drawio 输出 html 代码
- 可以用
导出为
的方法或嵌入
的方法
导出为
- 选择
文件
->导出为
->HTML
- 配置选项,选择
导出
- 导出后得到 html 文件
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
<!DOCTYPE html>
<html>
<head>
<title>未命名绘图</title>
<meta charset="utf-8"/>
</head>
<body><div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="{"highlight":"#0000ff","nav":true,"resize":true,"toolbar":"zoom layers tags lightbox","edit":"_blank","xml":"<mxfile host=\"Electron\" modified=\"2023-01-09T09:11:04.012Z\" agent=\"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/20.7.4 Chrome/106.0.5249.199 Electron/21.3.3 Safari/537.36\" etag=\"sjEwUV0v36QnULryjynB\" version=\"20.7.4\" type=\"device\"><diagram id=\"3228e29e-7158-1315-38df-8450db1d8a1d\" name=\"Page-1\">1dfLb5swHAfwvybXCr94HJOs7XboZZ20swcOWDV25Div/fVzwo8EYip1aoRoDhH++oH9MbJgRpb14dnydfViCqFmOCoOM/JthnGapP7/FBwhiJImKK0smghdg1f5V0AYQbqVhdj0GjpjlJPrfpgbrUXuehm31uz7zVZG9e+65qUIgtecqzD9LQtXQYri7FrxXciyglunGNb3h+dvpTVbDffTRoumpubtMLDGTcULs+9E5HFGltYY11zVh6VQJ9VWrOn39E7tZcpWaPeRDhgxAp12XG1h5TA3d2wpfCev7guLlVRqaZSx5wryFKVJxHxu1jyX7rTTceSLG2fNm2gbngHIonK18iV0GsZo1x3m/PN5OP92dsI6cehEsJ5nYWrh7NE3gVpC6QNrOsGDhzPQ3l+3kUWQVZ0dvIQcHp3yMvrV0F8A4/uk+BOkCM/ni2mRoiTqgdKxPcknPEXKYoon5Unj7OYRJWOL0kD0h975FUmjA1q/KgcgcEpj6stcyVL7Qu67Ca+0OAFIf37OoaKWRaHGU8XZrao/k9ukA4uyAdjkTq4scP0pdkZtvzJsPAXYOID9ZXkhv7IrDVwZG901CVxfpJKOw0gDrAHjB7Q6W4Hi++ix4BBF2ZAeHcCjd8JLA7yl0Ssl/dvotPEovcWjaGy8LMSruNlMXC48DEeXa4fpyHkdrnMxcTvGsgd88+JDh/DiqA27fAS16X8A+uL1c+pc1/laJY//AA==</diagram></mxfile>"}"></div>
<script type="text/javascript" src="https://viewer.diagrams.net/js/viewer-static.min.js"></script>
</body>
</html>
- 其中比较重要的是
body
中的代码
嵌入
- 选择
文件
->嵌入
->HTML
- 和上文一样配置选择后选择
创建
- 获取 drawio 代码
两种方法获取的代码是相同的,都可以使用
自建 js 文件服务
- 上述代码在 浏览器中已经可以正确运行了,但官网访问较慢,如果想要自建此部分服务可以下载官网的 js 文件放到自己的服务器里,在渲染代码时使用自己的 js 文件
- 自建 js 服务可以在速度、代码运行上获得更稳定的效果
- **注意:**该步骤可选,不自建服务也可以实现网页嵌入
实现方法
- 访问官网 js 文件 链接:https://viewer.diagrams.net/js/viewer-static.min.js
- 将此部分所有代码保存在文件中放在自己的服务器里 我的 js 文件链接:https://101.43.39.125/HexoFiles/js/viewer-static.min.js
使用方法
- 在使用 drawio 导出代码时替换 js 文件路径即可
向文章中添加 html 代码
- 在 Markdown 文件中直接粘贴上述代码即可
- 例如:
<div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="{"highlight":"#0000ff","nav":true,"resize":true,"toolbar":"zoom layers tags lightbox","edit":"_blank","xml":"<mxfile host=\"Electron\" modified=\"2023-01-09T08:53:08.642Z\" agent=\"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/20.7.4 Chrome/106.0.5249.199 Electron/21.3.3 Safari/537.36\" etag=\"nM_XbfnI6LI-bt9XxW_9\" version=\"20.7.4\" type=\"device\"><diagram id=\"3228e29e-7158-1315-38df-8450db1d8a1d\" name=\"Page-1\">1ddNb5swGAfwT8O1wm8kHJOs7XboZZ20swcOWDV25Dhv+/Qz4SGBmEqdGiGaS/DfL9g/IwsisqqOz5ZvyheTCxXhOD9G5FuEMaKE+r86OTXJnCRNUFiZQ6Nr8Cr/CghjSHcyF9teQ2eMcnLTDzOjtchcL+PWmkO/2dqo/l03vBBB8JpxFaa/Ze5KSFGSXiu+C1mUcOs5njUVf3j2Vliz03A/bbRoaireDgNr3JY8N4dORB4jsrLGuOaqOq6Eqllbsabf0zu1lylbod1HOmDECHTac7WDlcPc3Kml8J28ui8s11KplVHGnivIUzyfxcznZsMz6eqdTmJf3Dpr3kTb8AxAlqWrlC+hehijXXeY88/n4fzb2QnrxLETwXqehamEsyffBGoJpQ+s6QQPHk5B+3DdRhZDVnZ28BJyeHSKy+hXQ38BjO+T4k+QIrxYLKdFimZxD5SO7Uk+4SnmLKF4Up40SW8eUTK2KA1Ef+i9X5E0OqD1q3IAAqc0pr7MlSy0L2S+m/BKyxpA+vNzARWVzHM1nipOb1X9mdwmHViUDsDO7uTKAtefYm/U7ivDJlOATQLYX5bn8iu70sCVsdFdZ4Hri1TScRhpgDVg/IBWZytQch89FhyiKB3SowN49E548wBvZfRaSf82Om08Sm/xKBobLw3xSm62E5cLD8PR5dphOnJeh+tMTNyOsfQB37z40CG8JG7DLh9BbfofgL54/Zw613U+V8njPw==</diagram></mxfile>"}"></div>
<script type="text/javascript" src="https://101.43.39.125/HexoFiles/js/viewer-static.min.js"></script>
效果展示
- 上述示例代码效果如下:
参考资料
相关文章
- Hexo+github搭建个人博客
- hexo博客主题推荐_wordpress社交主题
- Hexo 博客安装 Fluid 主题
- 用树莓派做服务器运行博客网页
- Word发布Wordpress博客文章
- hexo+netlify+git+个人域名搭建博客
- 基于 Hexo 从零开始搭建个人博客(二)
- Hexo博客搭建
- zblog博客的robots.txt文件优化正确写法 zblog的robots.txt怎么写?zblog的robots.txt文件示例下载
- 从零开始的Hexo博客搭建
- 在Windows环境下使用Hexo Volantis主题搭建博客
- 使用hexo+github搭建免费个人博客详细教程
- Hexo 搭建博客并部署 github 详解
- hexo博客插入音视频
- GitHub Pages + Hexo - 搭建博客
- Centos环境搭建hexo博客
- Coding + GitHub + Hexo + Markdown 搭建博客
- 搭建Hexo博客-第2章-Hexo基本用法
- 我的博客网站备案实践
- 给博客增加 IE 8 的 Web Slice 功能
- 如何有规律的备份 WordPress 博客
- WordPress 技巧:防止博客内容中的 Email 地址被收集
- 同步 WordPress 博客日志到嘀咕
- [android] 看博客学习hashCode()和equals()详解编程语言
- [javaSE] 看博客学习java并发编程详解编程语言
- Linux下的Hexo:搭建轻松实用的博客(linux hexo)
- 网站缓存利用Redis提升博客网站性能缓存你的博客(利用redis实现博客)
- js使用ajax读博客rss示例