feat: 添加 Mermaid 图表支持

- 在设置页功能增强分类中添加 Mermaid 图表设置项
- 支持启用/禁用 Mermaid 渲染
- 支持自定义 CDN 地址(默认 jsdelivr)
- 提供 4 种主题选择(默认/森林/暗色/中性)
- 在 footer.php 中添加 Mermaid 库加载和初始化逻辑
- 自动识别 language-mermaid 和 mermaid 类的代码块
- 在 style.css 中添加 Mermaid 图表样式
- 支持响应式布局和夜间模式
- 使用方式:在代码块中指定语言为 mermaid
This commit is contained in:
2026-01-23 18:50:50 +08:00
parent 468f2a0a93
commit 627a57c5e9
3 changed files with 152 additions and 0 deletions

View File

@@ -2824,6 +2824,70 @@ function themeoptions_page(){
</tr>
<tr><th class="subtitle"><h3 id="subsection-mermaid"><?php _e('Mermaid 图表', 'argon');?></h3></th></tr>
<tr>
<th><label><?php _e('启用 Mermaid 图表渲染', 'argon');?></label></th>
<td>
<select name="argon_enable_mermaid">
<?php $argon_enable_mermaid = get_option('argon_enable_mermaid', 'false'); ?>
<option value="false" <?php if ($argon_enable_mermaid=='false'){echo 'selected';} ?>><?php _e('不启用', 'argon');?></option>
<option value="true" <?php if ($argon_enable_mermaid=='true'){echo 'selected';} ?>><?php _e('启用', 'argon');?></option>
</select>
<p class="description"><?php _e('启用后,文章中的 Mermaid 代码块会被自动渲染为图表。使用方式:在代码块中指定语言为 mermaid', 'argon');?></p>
</td>
</tr>
<tr>
<th><label>Mermaid CDN <?php _e('地址', 'argon');?></label></th>
<td>
<input type="text" class="regular-text" name="argon_mermaid_cdn_url" value="<?php echo get_option('argon_mermaid_cdn_url') == '' ? '//cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js' : get_option('argon_mermaid_cdn_url'); ?>"/>
<p class="description"><?php _e('默认为', 'argon');?> <code>//cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js</code></p>
</td>
</tr>
<tr>
<th><label><?php _e('Mermaid 主题', 'argon');?></label></th>
<td>
<select name="argon_mermaid_theme">
<?php $argon_mermaid_theme = get_option('argon_mermaid_theme', 'default'); ?>
<option value="default" <?php if ($argon_mermaid_theme=='default'){echo 'selected';} ?>><?php _e('默认', 'argon');?></option>
<option value="forest" <?php if ($argon_mermaid_theme=='forest'){echo 'selected';} ?>><?php _e('森林', 'argon');?></option>
<option value="dark" <?php if ($argon_mermaid_theme=='dark'){echo 'selected';} ?>><?php _e('暗色', 'argon');?></option>
<option value="neutral" <?php if ($argon_mermaid_theme=='neutral'){echo 'selected';} ?>><?php _e('中性', 'argon');?></option>
</select>
<p class="description"><?php _e('选择 Mermaid 图表的配色主题', 'argon');?></p>
</td>
</tr>
<tr><th class="subtitle"><h3 id="subsection-lazyload">Lazyload</h3></th></tr>
<tr>
@@ -6733,6 +6797,14 @@ function argon_update_themeoptions(){
argon_update_option('argon_lazyload_loading_style');
//Mermaid 相关
argon_update_option('argon_enable_mermaid');
argon_update_option('argon_mermaid_cdn_url');
argon_update_option('argon_mermaid_theme');
//图片缩放预览相关