修改主题文件
将以下代码粘贴至Gridea站点源文件夹中里post.ejs文件的<head>部分
例如我的源文件夹是E:\Gridea主题使用的是 gridea-theme-next
那我这个文件完整路径就是E:\Gridea\themes\gridea-theme-next\templates\post.ejs
<script>
// 加载外部脚本
function loadScript(src, callback) {
const script = document.createElement('script');
script.src = src;
script.async = true;
script.onload = callback;
document.head.appendChild(script);
}
// 初始化Mermaid
function initializeMermaid(config) {
mermaid.initialize(config);
}
// 渲染单个Mermaid图表
function renderMermaidChart(element, index) {
let graphDefinition = element.textContent.trim();
if (graphDefinition) {
let svg = mermaid.render(`ha_mermaid_${index}`, graphDefinition);
if (svg) {
let svgElement = document.createElement('div');
svgElement.innerHTML = svg;
svgElement.classList.add('mermaid');
svgElement.setAttribute('data-processed', 'true');
element.parentNode.replaceChild(svgElement, element);
}
}
}
// 懒加载Mermaid图表
function lazyLoadMermaidCharts() {
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
observer.unobserve(entry.target);
renderMermaidChart(entry.target);
}
});
}, { threshold: 0.5 }); // 触发加载的阈值为元素显示50%时
const elements = document.querySelectorAll(".language-mermaid");
elements.forEach(element => {
observer.observe(element);
});
}
// 当DOM加载完成时执行
document.addEventListener("DOMContentLoaded", function() {
// 异步加载Mermaid.js
loadScript('https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.1/mermaid.min.js', function() {
// Mermaid配置选项
const mermaidConfig = {
startOnLoad: true,
flowchart: {
useMaxWidth: false,
htmlLabels: true
}
};
// 初始化Mermaid
initializeMermaid(mermaidConfig);
// 懒加载Mermaid图表
lazyLoadMermaidCharts();
});
});
</script>
如何引用
只需在中间添加对应代码即可
<div class="mermaid">
图表内容
</div>
流程图示例
<div class="mermaid">
graph TD;
A[开始] --> B[过程1];
B --> C[过程2];
C --> D[过程3];
D --> E[判断条件];
E -- 条件成立 --> F[过程4];
E -- 条件不成立 --> G[过程5];
F --> H[结束];
G --> H;
</div>
输出效果:
graph TD;
A[开始] --> B[过程1];
B --> C[过程2];
C --> D[过程3];
D --> E[判断条件];
E -- 条件成立 --> F[过程4];
E -- 条件不成立 --> G[过程5];
F --> H[结束];
G --> H;
时序图示例
<div class="mermaid">
sequenceDiagram
participant 客户
participant 服务员
客户->>服务员: 点菜
服务员->>厨师: 下单
厨师->>服务员: 完成菜品
服务员->>客户: 上菜
客户->>服务员: 结账
服务员->>客户: 收款
</div>
输出效果:
sequenceDiagram
participant 客户
participant 服务员
客户->>服务员: 点菜
服务员->>厨师: 下单
厨师->>服务员: 完成菜品
服务员->>客户: 上菜
客户->>服务员: 结账
服务员->>客户: 收款
甘特图示例
<div class="mermaid">
gantt
title 项目甘特图
dateFormat YYYY-MM-DD
section 项目阶段
任务1: 2024-05-01, 10d
任务2: 2024-05-15, 8d
任务3: 2024-06-01, 15d
任务4: 2024-06-16, 5d
</div>
输出效果:
gantt
title 项目甘特图
dateFormat YYYY-MM-DD
section 项目阶段
任务1: 2024-05-01, 10d
任务2: 2024-05-15, 8d
任务3: 2024-06-01, 15d
任务4: 2024-06-16, 5d
状态图示例
stateDiagram-v2
[*] --> 就绪
就绪 --> 运行: 启动
运行 --> 错误: 系统错误
运行 --> 待命: 暂停
错误 --> 待命: 重启
待命 --> 运行: 恢复
</div>
输出效果:
stateDiagram-v2
[*] --> 就绪
就绪 --> 运行: 启动
运行 --> 错误: 系统错误
运行 --> 待命: 暂停
错误 --> 待命: 重启
待命 --> 运行: 恢复
饼图示例
<div class="mermaid">
pie
title 饼图示例
"A" : 30
"B" : 20
"C" : 25
"D" : 15
"E" : 10
</div>
输出效果:
pie
title 饼图示例
"A" : 30
"B" : 20
"C" : 25
"D" : 15
"E" : 10
用户体验旅程图示例
<div class="mermaid">
journey
title 用户体验旅程
section 购物
浏览商品: 10分钟: 用户
添加商品到购物车: 5分钟: 用户
结算购物车: 2分钟: 系统
返回个人主页: 1分钟: 系统
section 退出
点击退出: 1分钟: 用户
确认退出: 2分钟: 系统
返回登录页面: 1分钟: 系统
</div>
输出效果:
journey
title 用户体验旅程
section 购物
浏览商品: 10分钟: 用户
添加商品到购物车: 5分钟: 用户
结算购物车: 2分钟: 系统
返回个人主页: 1分钟: 系统
section 退出
点击退出: 1分钟: 用户
确认退出: 2分钟: 系统
返回登录页面: 1分钟: 系统