nanhaoluo/argon-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 从 settings.php 和 functions.php 中移除所有 Mermaid 支持

Browse Source 
- 从 settings.php 移除完整的 Mermaid 设置部分（约 370 行）
- 从 settings.php 移除 Mermaid 选项保存代码
- 从 functions.php 移除所有 Mermaid 相关函数（约 500 行）
- 从 header.php 移除 Mermaid 相关注释
- 保留 assets/vendor/mermaid/ 库文件供未来可能的插件使用
This commit is contained in:
nanhaoluo
2026-01-27 10:45:21 +08:00
parent 0a8bb3a453
commit 734822883e
3 changed files with 3 additions and 1085 deletions
Download Patch File Download Diff File Expand all files Collapse all files

708
functions.php
View File

@@ -10939,725 +10939,17 @@ function argon_normalize_social_url($platform, $input) {
// ==========================================================================
/**
* 获取 Mermaid 配置选项
*
* @param string $option_name 配置选项名称
* @param mixed $default 默认值
* @return mixed 配置选项值
*/
function argon_get_mermaid_option($option_name, $default = null) {
// 配置选项映射表
$option_map = [
'enabled' => 'argon_enable_mermaid',
'cdn_source' => 'argon_mermaid_cdn_source',
'custom_cdn_url' => 'argon_mermaid_cdn_custom_url',
'theme' => 'argon_mermaid_theme',
'use_local' => 'argon_mermaid_use_local',
'debug_mode' => 'argon_mermaid_debug_mode'
];
// 如果使用简短名称，转换为完整选项名
$full_option_name = isset($option_map[$option_name]) ? $option_map[$option_name] : $option_name;
// 获取选项值
$value = get_option($full_option_name, $default);
// 如果值为 null 且有默认值，返回默认值
if ($value === null && $default !== null) {
return $default;
}
return $value;
}
/**
* 保存 Mermaid 配置选项
*
* @param string $option_name 配置选项名称
* @param mixed $value 配置选项值
* @return bool 是否保存成功
*/
function argon_update_mermaid_option($option_name, $value) {
// 配置选项映射表
$option_map = [
'enabled' => 'argon_enable_mermaid',
'cdn_source' => 'argon_mermaid_cdn_source',
'custom_cdn_url' => 'argon_mermaid_cdn_custom_url',
'theme' => 'argon_mermaid_theme',
'use_local' => 'argon_mermaid_use_local',
'debug_mode' => 'argon_mermaid_debug_mode'
];
// 如果使用简短名称，转换为完整选项名
$full_option_name = isset($option_map[$option_name]) ? $option_map[$option_name] : $option_name;
// 保存选项值
return update_option($full_option_name, $value);
}
/**
* 验证 Mermaid CDN URL 格式
*
* @param string $url CDN URL
* @return bool 是否为有效的 CDN URL
*/
function argon_validate_mermaid_cdn_url($url) {
// 空 URL 视为无效
if (empty(trim($url))) {
return false;
}
// 验证 URL 格式
if (!filter_var($url, FILTER_VALIDATE_URL)) {
return false;
}
// 验证是否以 .js 结尾
if (!preg_match('/\.js$/i', $url)) {
return false;
}
// 验证协议（必须是 http 或 https）
$parsed_url = parse_url($url);
if (!isset($parsed_url['scheme']) || !in_array($parsed_url['scheme'], ['http', 'https'])) {
return false;
}
return true;
}
/**
* 获取当前主题模式对应的 Mermaid 主题
*
* @return string Mermaid 主题名称
*/
function argon_get_mermaid_theme() {
// 获取配置的主题
$configured_theme = argon_get_mermaid_option('theme', 'auto');
// 如果不是自动模式，直接返回配置的主题
if ($configured_theme !== 'auto') {
return $configured_theme;
}
// 自动模式：根据页面主题返回对应的 Mermaid 主题
// 注意：这个函数在 PHP 端调用，无法直接检测前端的夜间模式状态
// 实际的主题切换逻辑应该在 JavaScript 中实现
// 这里返回默认主题，JavaScript 会根据实际情况覆盖
return 'default';
}
/**
* 获取 Mermaid 配置的默认值
*
* @return array 默认配置数组
*/
function argon_get_mermaid_default_config() {
return [
'enabled' => false,
'cdn_source' => 'jsdelivr',
'custom_cdn_url' => '',
'theme' => 'auto',
'use_local' => false,
'debug_mode' => false
];
}
/**
* 验证 Mermaid 配置选项
*
* @param array $settings 配置选项数组
* @return array 错误信息数组，如果没有错误则返回空数组
*/
function argon_validate_mermaid_settings($settings) {
$errors = [];
// 验证 CDN 来源
if (isset($settings['cdn_source'])) {
$valid_sources = ['jsdelivr', 'unpkg', 'custom', 'local'];
if (!in_array($settings['cdn_source'], $valid_sources)) {
$errors[] = __('无效的 CDN 来源', 'argon');
}
// 如果选择自定义 CDN，验证 URL
if ($settings['cdn_source'] === 'custom') {
if (!isset($settings['custom_cdn_url']) || empty($settings['custom_cdn_url'])) {
$errors[] = __('自定义 CDN 地址不能为空', 'argon');
} elseif (!argon_validate_mermaid_cdn_url($settings['custom_cdn_url'])) {
$errors[] = __('CDN 地址格式无效，必须是有效的 URL 且以 .js 结尾', 'argon');
}
}
}
// 验证主题名称
if (isset($settings['theme'])) {
$valid_themes = ['default', 'dark', 'forest', 'neutral', 'auto'];
if (!in_array($settings['theme'], $valid_themes)) {
$errors[] = __('无效的图表主题', 'argon');
}
}
// 验证布尔值选项
$boolean_options = ['enabled', 'use_local', 'debug_mode'];
foreach ($boolean_options as $option) {
if (isset($settings[$option]) && !is_bool($settings[$option]) && !in_array($settings[$option], ['true', 'false', '1', '0', 1, 0], true)) {
$errors[] = sprintf(__('选项 %s 必须是布尔值', 'argon'), $option);
}
}
return $errors;
}
/**
* 初始化 Mermaid 默认配置
* 在主题激活时调用
*/
function argon_init_mermaid_config() {
$defaults = argon_get_mermaid_default_config();
foreach ($defaults as $key => $value) {
// 只在选项不存在时设置默认值
if (argon_get_mermaid_option($key) === false) {
argon_update_mermaid_option($key, $value);
}
}
}
/**
* 获取所有 Mermaid 配置选项
*
* @return array 配置选项数组
*/
function argon_get_all_mermaid_options() {
$defaults = argon_get_mermaid_default_config();
$options = [];
foreach ($defaults as $key => $default_value) {
$options[$key] = argon_get_mermaid_option($key, $default_value);
}
return $options;
}
/**
* 批量更新 Mermaid 配置选项
*
* @param array $settings 配置选项数组
* @return array 包含 success 和 errors 的结果数组
*/
function argon_update_mermaid_settings($settings) {
// 验证配置
$errors = argon_validate_mermaid_settings($settings);
if (!empty($errors)) {
return [
'success' => false,
'errors' => $errors
];
}
// 保存配置
$defaults = argon_get_mermaid_default_config();
foreach ($defaults as $key => $default_value) {
if (isset($settings[$key])) {
argon_update_mermaid_option($key, $settings[$key]);
}
}
return [
'success' => true,
'errors' => []
];
}
// ==========================================================================
/**
* 检测页面内容是否包含 Mermaid 代码块
*
* 支持 Shortcode 格式：
* - [mermaid]...[/mermaid]
*
* @param string $content 页面内容
* @return bool 是否包含 Mermaid 代码块
*/
function argon_has_mermaid_content($content) {
if (empty($content)) {
return false;
}
// 检测多种 Mermaid 代码块格式
$patterns = [
'/\[mermaid[^\]]*\]/i'
];
foreach ($patterns as $pattern) {
if (preg_match($pattern, $content)) {
return true;
}
}
return false;
}
/**
* 获取 Mermaid 库的 URL
* 根据配置返回对应的 CDN 或本地路径
*
* @return string Mermaid 库 URL
*/
function argon_get_mermaid_library_url() {
$cdn_source = argon_get_mermaid_option('cdn_source', 'jsdelivr');
$use_local = argon_get_mermaid_option('use_local', false);
// 如果启用本地镜像，直接返回本地路径
if ($use_local) {
return get_template_directory_uri() . '/assets/vendor/mermaid/mermaid.min.js';
}
// 根据 CDN 来源返回对应的 URL
$cdn_urls = [
'jsdelivr' => 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js',
'unpkg' => 'https://unpkg.com/mermaid@11/dist/mermaid.min.js',
'local' => get_template_directory_uri() . '/assets/vendor/mermaid/mermaid.min.js'
];
// 如果是自定义 CDN，返回自定义 URL
if ($cdn_source === 'custom') {
$custom_url = argon_get_mermaid_option('custom_cdn_url', '');
if (!empty($custom_url) && argon_validate_mermaid_cdn_url($custom_url)) {
return $custom_url;
}
// 如果自定义 URL 无效，降级到 jsdelivr
return $cdn_urls['jsdelivr'];
}
// 返回对应的 CDN URL，如果不存在则返回 jsdelivr
return isset($cdn_urls[$cdn_source]) ? $cdn_urls[$cdn_source] : $cdn_urls['jsdelivr'];
}
/**
* 获取备用 CDN URL 列表
* 用于加载失败时的降级处理
*
* @return array 备用 CDN URL 数组
*/
function argon_get_mermaid_fallback_urls() {
return [
'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js',
'https://unpkg.com/mermaid@11/dist/mermaid.min.js',
get_template_directory_uri() . '/assets/vendor/mermaid/mermaid.min.js'
];
}
/**
* 加载 Mermaid JavaScript 库
* 在 wp_enqueue_scripts 钩子中调用
*/
function argon_enqueue_mermaid_scripts() {
// 检查是否启用 Mermaid 支持
if (!argon_get_mermaid_option('enabled', false)) {
return;
}
// 检查当前页面是否包含 Mermaid 代码块
global $post;
$has_mermaid = false;
// 检查文章内容
if (is_singular() && isset($post->post_content)) {
$has_mermaid = argon_has_mermaid_content($post->post_content);
}
// 检查评论内容（如果启用了评论）
if (!$has_mermaid && is_singular() && comments_open()) {
$comments = get_comments([
'post_id' => $post->ID,
'status' => 'approve'
]);
foreach ($comments as $comment) {
if (argon_has_mermaid_content($comment->comment_content)) {
$has_mermaid = true;
break;
}
}
}
// 如果页面不包含 Mermaid 代码块，不加载库
if (!$has_mermaid) {
return;
}
// 检查是否应该加载 Mermaid 库（避免与插件冲突）
$should_load_library = argon_should_load_mermaid_library();
// 传递配置到前端
$mermaid_config = [
'enabled' => true,
'theme' => argon_get_mermaid_option('theme', 'auto'),
'debugMode' => argon_get_mermaid_option('debug_mode', false),
'fallbackUrls' => argon_get_mermaid_fallback_urls(),
'libraryLoadedByPlugin' => !$should_load_library // 标记库是否由插件加载
];
// 只有在没有插件加载 Mermaid 库时才加载
if ($should_load_library) {
// 获取 Mermaid 库 URL
$mermaid_url = argon_get_mermaid_library_url();
// 注册并加载 Mermaid 库
wp_enqueue_script(
'mermaid',
$mermaid_url,
[], // 不依赖其他脚本
'10.0.0', // Mermaid 版本
true // 在页脚加载
);
// 添加 async 属性实现异步加载
add_filter('script_loader_tag', 'argon_add_mermaid_async_attribute', 10, 2);
wp_localize_script('mermaid', 'argonMermaidConfig', $mermaid_config);
} else {
// 即使不加载库，也要传递配置（用于样式增强）
// 创建一个内联脚本来传递配置
wp_add_inline_script(
'jquery', // 依赖 jQuery（WordPress 默认加载）
'window.argonMermaidConfig = ' . json_encode($mermaid_config) . ';',
'after'
);
}
}
add_action('wp_enqueue_scripts', 'argon_enqueue_mermaid_scripts');
/**
* 为 Mermaid 脚本添加 async 属性
*
* @param string $tag 脚本标签
* @param string $handle 脚本句柄
* @return string 修改后的脚本标签
*/
function argon_add_mermaid_async_attribute($tag, $handle) {
if ('mermaid' !== $handle) {
return $tag;
}
// 添加 async 属性和 onerror 事件处理
$tag = str_replace(' src', ' async onerror="argonMermaidLoadFallback()" src', $tag);
return $tag;
}
/**
* 添加 Mermaid 库加载失败的降级处理脚本
*/
function argon_add_mermaid_fallback_script() {
// 只在启用 Mermaid 且页面包含 Mermaid 代码块时添加
if (!argon_get_mermaid_option('enabled', false)) {
return;
}
global $post;
$has_mermaid = false;
if (is_singular() && isset($post->post_content)) {
$has_mermaid = argon_has_mermaid_content($post->post_content);
}
if (!$has_mermaid) {
return;
}
// 获取备用 CDN URL 列表
$fallback_urls = argon_get_mermaid_fallback_urls();
$fallback_urls_json = json_encode($fallback_urls);
// 输出降级处理脚本
?>
<script>
// Mermaid 库加载失败的降级处理
(function() {
'use strict';
// 备用 CDN URL 列表
const fallbackUrls = <?php echo $fallback_urls_json; ?>;
let loadAttempted = false;
/**
* 尝试从备用 CDN 加载 Mermaid 库
*/
window.argonMermaidLoadFallback = function() {
// 避免重复调用
if (loadAttempted) {
return;
}
loadAttempted = true;
console.warn('[Argon Mermaid] 主 CDN 加载失败，尝试备用 CDN');
// 尝试加载备用 CDN
loadMermaidWithFallback(fallbackUrls, 0);
};
/**
* 递归加载备用 CDN
* @param {Array} urls - CDN URL 列表
* @param {number} index - 当前尝试的索引
*/
function loadMermaidWithFallback(urls, index) {
// 如果所有 CDN 都失败了
if (index >= urls.length) {
console.error('[Argon Mermaid] 所有 CDN 加载失败');
showGlobalError();
return;
}
const url = urls[index];
console.log(`[Argon Mermaid] 尝试从备用 CDN 加载: ${url}`);
// 创建 script 标签
const script = document.createElement('script');
script.src = url;
script.async = true;
// 加载失败，尝试下一个 CDN
script.onerror = function() {
console.warn(`[Argon Mermaid] CDN ${url} 加载失败`);
loadMermaidWithFallback(urls, index + 1);
};
// 加载成功，初始化 Mermaid
script.onload = function() {
console.log(`[Argon Mermaid] 成功从备用 CDN 加载: ${url}`);
// 等待 MermaidRenderer 可用
if (typeof window.MermaidRenderer !== 'undefined') {
window.MermaidRenderer.init();
} else {
// 如果 MermaidRenderer 还未定义，等待一下
setTimeout(function() {
if (typeof window.MermaidRenderer !== 'undefined') {
window.MermaidRenderer.init();
}
}, 100);
}
};
// 添加到页面
document.head.appendChild(script);
}
/**
* 显示全局错误提示
*/
function showGlobalError() {
// 查找所有 Mermaid 代码块
const selectors = [
'div.mermaid',
'pre code.language-mermaid',
'pre[data-lang="mermaid"]',
'code.mermaid'
];
let blocks = [];
selectors.forEach(function(selector) {
const elements = document.querySelectorAll(selector);
elements.forEach(function(element) {
if (!blocks.includes(element)) {
blocks.push(element);
}
});
});
// 在每个代码块位置显示错误提示
blocks.forEach(function(block) {
const errorContainer = document.createElement('div');
errorContainer.className = 'mermaid-error-container';
errorContainer.innerHTML = `
<div class="mermaid-error-header">
<span class="mermaid-error-icon">⚠️</span>
<span class="mermaid-error-title">Mermaid 库加载失败</span>
</div>
<div class="mermaid-error-body">
<p class="mermaid-error-type">错误类型: 网络错误</p>
<p class="mermaid-error-message">无法从任何 CDN 加载 Mermaid 库，请检查网络连接或联系管理员。</p>
</div>
<details class="mermaid-error-code">
<summary>查看原始代码</summary>
<pre><code class="language-mermaid">${escapeHtml(block.textContent)}</code></pre>
</details>
`;
block.parentNode.replaceChild(errorContainer, block);
});
}
/**
* HTML 转义
* @param {string} text - 要转义的文本
* @returns {string} 转义后的文本
*/
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
})();
</script>
<?php
}
add_action('wp_head', 'argon_add_mermaid_fallback_script');
// ==========================================================================
// Mermaid 插件兼容层
// ==========================================================================
/**
* 检测已安装的 Mermaid 相关插件
*
* @return array 插件检测结果数组
*/
function argon_detect_mermaid_plugins() {
$result = [
'wp-githuber-md' => false,
'markdown-block' => false,
'code-syntax-block' => false,
'mermaid-loaded' => false
];
// 检测 WP Githuber MD 插件
if (is_plugin_active('wp-githuber-md/githuber-md.php') ||
class_exists('Githuber_Module_Mermaid')) {
$result['wp-githuber-md'] = true;
}
// 检测 Markdown Block 插件（Gutenberg）
if (is_plugin_active('markdown-block/markdown-block.php') ||
function_exists('markdown_block_register')) {
$result['markdown-block'] = true;
}
// 检测 Code Syntax Block 插件
if (is_plugin_active('code-syntax-block/code-syntax-block.php') ||
function_exists('code_syntax_block_register')) {
$result['code-syntax-block'] = true;
}
return $result;
}
/**
* 检查是否有插件已经加载了 Mermaid 库
*
* 通过检测已注册的脚本来判断
*
* @return bool 是否已加载
*/
function argon_is_mermaid_library_enqueued() {
// 检查常见的 Mermaid 脚本句柄
$common_handles = [
'mermaid',
'mermaid-js',
'githuber-mermaid',
'wp-mermaid',
'markdown-mermaid'
];
foreach ($common_handles as $handle) {
if (wp_script_is($handle, 'enqueued') || wp_script_is($handle, 'registered')) {
return true;
}
}
return false;
}
/**
* 获取插件兼容性状态信息
*
* @return array 包含插件检测结果和建议的数组
*/
function argon_get_mermaid_compatibility_status() {
$plugins = argon_detect_mermaid_plugins();
$library_enqueued = argon_is_mermaid_library_enqueued();
// 统计检测到的插件数量
$active_plugins = array_filter($plugins, function($value, $key) {
return $value === true && $key !== 'mermaid-loaded';
}, ARRAY_FILTER_USE_BOTH);
$plugin_count = count($active_plugins);
// 生成状态信息
$status = [
'plugins' => $plugins,
'library_enqueued' => $library_enqueued,
'plugin_count' => $plugin_count,
'has_conflict' => false,
'message' => '',
'recommendation' => ''
];
// 判断是否有冲突
if ($plugin_count > 1) {
$status['has_conflict'] = true;
$status['message'] = '检测到多个 Mermaid 插件，可能导致重复加载';
$status['recommendation'] = '建议只保留一个 Mermaid 插件，或禁用主题的 Mermaid 支持';
} elseif ($plugin_count === 1) {
$status['message'] = '检测到 Mermaid 插件，主题将自动避免重复加载';
$status['recommendation'] = '主题将只提供样式增强，不会重复加载 Mermaid 库';
} elseif ($library_enqueued) {
$status['message'] = '检测到其他来源已加载 Mermaid 库';
$status['recommendation'] = '主题将自动避免重复加载';
} else {
$status['message'] = '未检测到 Mermaid 插件';
$status['recommendation'] = '主题将负责加载 Mermaid 库';
}
return $status;
}
/**
* 修改 Mermaid 脚本加载逻辑，避免重复加载
*
* 在原有的 argon_enqueue_mermaid_scripts 函数中调用此函数
*
* @return bool 是否应该加载 Mermaid 库
*/
function argon_should_load_mermaid_library() {
// 检查是否有插件已经加载了 Mermaid
if (argon_is_mermaid_library_enqueued()) {
// 在调试模式下输出日志
if (argon_get_mermaid_option('debug_mode', false)) {
error_log('[Argon Mermaid] 检测到 Mermaid 库已由其他插件加载，跳过加载');
}
return false;
}
// 检查是否有已知的 Mermaid 插件
$plugins = argon_detect_mermaid_plugins();
$has_plugin = false;
foreach ($plugins as $key => $value) {
if ($key !== 'mermaid-loaded' && $value === true) {
$has_plugin = true;
break;
}
}
if ($has_plugin) {
// 在调试模式下输出日志
if (argon_get_mermaid_option('debug_mode', false)) {
error_log('[Argon Mermaid] 检测到 Mermaid 插件，跳过加载库');
}
return false;
}
// 没有检测到插件或已加载的库，主题应该加载
return true;
}
// ==========================================================================

2
header.php
View File

@@ -516,7 +516,7 @@
}
// 触发主题切换事件（用于 Mermaid 等组件响应主题变化）
// 触发主题切换事件
document.dispatchEvent(new CustomEvent('argon:theme-switched', {
detail: { darkmode: enable }
}));

378
settings.php
View File

@@ -3583,374 +3583,8 @@ function themeoptions_page(){
</tr>
<!-- ========== 15. Mermaid 图表 ========== -->
<tr><th class="subtitle"><h2 id="section-mermaid"><?php _e('Mermaid 图表', 'argon');?></h2></th></tr>
<tr><th class="subtitle"><h3 id="subsection-mermaid-basic"><?php _e('基本设置', 'argon');?></h3></th></tr>
<tr>
<th><label><?php _e('启用 Mermaid 支持', 'argon');?></label></th>
<td>
<?php $argon_enable_mermaid = get_option('argon_enable_mermaid', 'false');?>
<label>
<input type="checkbox" name="argon_enable_mermaid" value="true" <?php if ($argon_enable_mermaid=='true'){echo 'checked';}?>/>
<?php _e('启用 Mermaid 图表渲染功能', 'argon');?>
</label>
<p class="description"><?php _e('启用后，主题将支持在文章中渲染 Mermaid 图表（流程图、时序图、类图等）', 'argon');?></p>
</td>
</tr>
<tr>
<th><label><?php _e('CDN 来源', 'argon');?></label></th>
<td>
<select name="argon_mermaid_cdn_source">
<?php $argon_mermaid_cdn_source = get_option('argon_mermaid_cdn_source', 'jsdelivr'); ?>
<option value="jsdelivr" <?php if ($argon_mermaid_cdn_source=='jsdelivr'){echo 'selected';} ?>><?php _e('jsDelivr CDN', 'argon');?></option>
<option value="unpkg" <?php if ($argon_mermaid_cdn_source=='unpkg'){echo 'selected';} ?>><?php _e('unpkg CDN', 'argon');?></option>
<option value="custom" <?php if ($argon_mermaid_cdn_source=='custom'){echo 'selected';} ?>><?php _e('自定义 CDN 地址', 'argon');?></option>
<option value="local" <?php if ($argon_mermaid_cdn_source=='local'){echo 'selected';} ?>><?php _e('本地文件', 'argon');?></option>
</select>
<p class="description"><?php _e('选择 Mermaid 库的加载来源。jsDelivr 和 unpkg 为公共 CDN，本地文件需要手动下载到主题目录', 'argon');?></p>
</td>
</tr>
<tr>
<th><label><?php _e('自定义 CDN 地址', 'argon');?></label></th>
<td>
<input type="text" class="regular-text" name="argon_mermaid_cdn_custom_url" value="<?php echo get_option('argon_mermaid_cdn_custom_url', ''); ?>" placeholder="https://example.com/mermaid.min.js"/>
<p class="description"><?php _e('当 CDN 来源选择"自定义 CDN 地址"时生效。请输入完整的 Mermaid 库 URL（必须以 .js 结尾）。推荐使用 Mermaid v11 或更高版本', 'argon');?></p>
</td>
</tr>
<tr><th class="subtitle"><h3 id="subsection-mermaid-appearance"><?php _e('外观设置', 'argon');?></h3></th></tr>
<tr>
<th><label><?php _e('图表主题', 'argon');?></label></th>
<td>
<select name="argon_mermaid_theme">
<?php $argon_mermaid_theme = get_option('argon_mermaid_theme', 'auto'); ?>
<option value="auto" <?php if ($argon_mermaid_theme=='auto'){echo 'selected';} ?>><?php _e('自动切换（跟随页面主题）', 'argon');?></option>
<option value="default" <?php if ($argon_mermaid_theme=='default'){echo 'selected';} ?>><?php _e('默认主题（浅色）', 'argon');?></option>
<option value="dark" <?php if ($argon_mermaid_theme=='dark'){echo 'selected';} ?>><?php _e('深色主题', 'argon');?></option>
<option value="forest" <?php if ($argon_mermaid_theme=='forest'){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-mermaid-advanced"><?php _e('高级选项', 'argon');?></h3></th></tr>
<tr>
<th><label><?php _e('使用本地镜像', 'argon');?></label></th>
<td>
<?php $argon_mermaid_use_local = get_option('argon_mermaid_use_local', 'false');?>
<label>
<input type="checkbox" name="argon_mermaid_use_local" value="true" <?php if ($argon_mermaid_use_local=='true'){echo 'checked';}?>/>
<?php _e('优先使用本地镜像文件', 'argon');?>
</label>
<p class="description"><?php _e('启用后，如果检测到主题目录中存在 Mermaid 库文件，将优先使用本地文件而不是 CDN', 'argon');?></p>
</td>
</tr>
<tr>
<th><label><?php _e('调试模式', 'argon');?></label></th>
<td>
<?php $argon_mermaid_debug_mode = get_option('argon_mermaid_debug_mode', 'false');?>
<label>
<input type="checkbox" name="argon_mermaid_debug_mode" value="true" <?php if ($argon_mermaid_debug_mode=='true'){echo 'checked';}?>/>
<?php _e('启用调试模式', 'argon');?>
</label>
<p class="description"><?php _e('启用后，将在浏览器控制台输出详细的 Mermaid 渲染日志，便于排查问题', 'argon');?></p>
</td>
</tr>
<tr>
<th><label><?php _e('插件兼容性', 'argon');?></label></th>
<td>
<?php
// 获取插件兼容性状态
$compat_status = argon_get_mermaid_compatibility_status();
$plugins = $compat_status['plugins'];
$plugin_count = $compat_status['plugin_count'];
$has_conflict = $compat_status['has_conflict'];
?>
<div style="padding: 10px; background: <?php echo $has_conflict ? '#fff3cd' : '#d1ecf1'; ?>; border: 1px solid <?php echo $has_conflict ? '#ffc107' : '#bee5eb'; ?>; border-radius: 4px; margin-bottom: 10px;">
<p style="margin: 0 0 10px 0; font-weight: bold;">
<?php echo esc_html($compat_status['message']); ?>
</p>
<div style="margin-bottom: 10px;">
<strong><?php _e('检测到的插件：', 'argon'); ?></strong>
<ul style="margin: 5px 0; padding-left: 20px;">
<?php if ($plugins['wp-githuber-md']): ?>
<li>✓ WP Githuber MD</li>
<?php endif; ?>
<?php if ($plugins['markdown-block']): ?>
<li>✓ Markdown Block</li>
<?php endif; ?>
<?php if ($plugins['code-syntax-block']): ?>
<li>✓ Code Syntax Block</li>
<?php endif; ?>
<?php if ($plugin_count === 0): ?>
<li><?php _e('未检测到 Mermaid 插件', 'argon'); ?></li>
<?php endif; ?>
</ul>
</div>
<?php if ($compat_status['library_enqueued']): ?>
<p style="margin: 5px 0; color: #0c5460;">
<strong><?php _e('状态：', 'argon'); ?></strong>
<?php _e('检测到 Mermaid 库已由其他来源加载', 'argon'); ?>
</p>
<?php endif; ?>
<p style="margin: 5px 0 0 0; color: #004085;">
<strong><?php _e('建议：', 'argon'); ?></strong>
<?php echo esc_html($compat_status['recommendation']); ?>
</p>
</div>
<p class="description">
<?php _e('主题会自动检测已安装的 Mermaid 插件，避免重复加载库文件。如果检测到插件，主题将只提供样式增强功能。', 'argon'); ?>
</p>
</td>
</tr>
<tr><th class="subtitle"><h3 id="subsection-mermaid-preview"><?php _e('预览与示例', 'argon');?></h3></th></tr>
<tr>
<th><label><?php _e('实时预览', 'argon');?></label></th>
<td>
<div id="mermaid-preview-container" style="margin-bottom: 20px;">
<div style="margin-bottom: 10px;">
<label style="display: block; margin-bottom: 5px; font-weight: bold;">
<?php _e('选择示例图表：', 'argon'); ?>
</label>
<select id="mermaid-example-selector" style="width: 100%; max-width: 400px; padding: 5px;">
<option value="flowchart"><?php _e('流程图 (Flowchart)', 'argon'); ?></option>
<option value="sequence"><?php _e('时序图 (Sequence Diagram)', 'argon'); ?></option>
<option value="class"><?php _e('类图 (Class Diagram)', 'argon'); ?></option>
<option value="state"><?php _e('状态图 (State Diagram)', 'argon'); ?></option>
<option value="gantt"><?php _e('甘特图 (Gantt Chart)', 'argon'); ?></option>
<option value="pie"><?php _e('饼图 (Pie Chart)', 'argon'); ?></option>
<option value="git"><?php _e('Git 图 (Git Graph)', 'argon'); ?></option>
</select>
</div>
<div style="margin-bottom: 10px;">
<label style="display: block; margin-bottom: 5px; font-weight: bold;">
<?php _e('Mermaid 代码：', 'argon'); ?>
</label>
<textarea id="mermaid-code-input" rows="10" style="width: 100%; font-family: monospace; padding: 10px; border: 1px solid #ddd; border-radius: 4px;"></textarea>
</div>
<div style="margin-bottom: 10px;">
<button type="button" id="mermaid-render-btn" class="button button-primary">
<?php _e('渲染预览', 'argon'); ?>
</button>
<button type="button" id="mermaid-reset-btn" class="button">
<?php _e('重置', 'argon'); ?>
</button>
</div>
<div style="margin-bottom: 10px;">
<label style="display: block; margin-bottom: 5px; font-weight: bold;">
<?php _e('预览效果：', 'argon'); ?>
</label>
<div id="mermaid-preview-output" style="padding: 20px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 4px; min-height: 200px; overflow-x: auto;">
<p style="color: #666; text-align: center; margin: 80px 0;">
<?php _e('请选择示例或输入 Mermaid 代码，然后点击"渲染预览"按钮', 'argon'); ?>
</p>
</div>
</div>
<div id="mermaid-preview-error" style="display: none; padding: 10px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 4px; margin-top: 10px;">
<p style="margin: 0; color: #856404;">
<strong><?php _e('渲染错误：', 'argon'); ?></strong>
<span id="mermaid-error-message"></span>
</p>
</div>
</div>
<p class="description">
<?php _e('在此预览区域可以实时测试 Mermaid 图表的渲染效果。选择示例图表或输入自定义代码，点击"渲染预览"查看效果。', 'argon'); ?>
</p>
<script>
// Mermaid 示例代码
const mermaidExamples = {
flowchart: `flowchart TD
A[开始] --> B{是否登录?}
B -->|是| C[显示主页]
B -->|否| D[跳转登录页]
C --> E[结束]
D --> E`,
sequence: `sequenceDiagram
participant 用户
participant 浏览器
participant 服务器
用户->>浏览器: 输入网址
浏览器->>服务器: 发送请求
服务器-->>浏览器: 返回页面
浏览器-->>用户: 显示内容`,
class: `classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+String breed
+bark()
}
class Cat {
+String color
+meow()
}
Animal <|-- Dog
Animal <|-- Cat`,
state: `stateDiagram-v2
[*] --> 待机
待机 --> 运行: 启动
运行 --> 暂停: 暂停
暂停 --> 运行: 继续
运行 --> 停止: 停止
停止 --> [*]`,
gantt: `gantt
title 项目开发计划
dateFormat YYYY-MM-DD
section 设计阶段
需求分析 :a1, 2024-01-01, 7d
UI设计 :a2, after a1, 5d
section 开发阶段
前端开发 :b1, after a2, 10d
后端开发 :b2, after a2, 12d
section 测试阶段
功能测试 :c1, after b1, 5d
性能测试 :c2, after b2, 3d`,
pie: `pie title 编程语言使用占比
"JavaScript" : 35
"Python" : 25
"Java" : 20
"C++" : 12
"其他" : 8`,
git: `gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit`
};
// 初始化
jQuery(document).ready(function($) {
const $selector = $('#mermaid-example-selector');
const $codeInput = $('#mermaid-code-input');
const $renderBtn = $('#mermaid-render-btn');
const $resetBtn = $('#mermaid-reset-btn');
const $output = $('#mermaid-preview-output');
const $error = $('#mermaid-preview-error');
const $errorMsg = $('#mermaid-error-message');
// 加载默认示例
$codeInput.val(mermaidExamples.flowchart);
// 切换示例
$selector.on('change', function() {
const example = $(this).val();
$codeInput.val(mermaidExamples[example]);
});
// 渲染预览
$renderBtn.on('click', function() {
const code = $codeInput.val().trim();
if (!code) {
alert('<?php _e('请输入 Mermaid 代码', 'argon'); ?>');
return;
}
// 隐藏错误信息
$error.hide();
// 显示加载状态
$output.html('<p style="color: #666; text-align: center; margin: 80px 0;"><?php _e('正在渲染...', 'argon'); ?></p>');
// 动态加载 Mermaid 库
if (typeof mermaid === 'undefined') {
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js';
script.onload = function() {
renderMermaid(code);
};
script.onerror = function() {
showError('<?php _e('Mermaid 库加载失败，请检查网络连接', 'argon'); ?>');
};
document.head.appendChild(script);
} else {
renderMermaid(code);
}
});
// 重置
$resetBtn.on('click', function() {
$selector.val('flowchart').trigger('change');
$output.html('<p style="color: #666; text-align: center; margin: 80px 0;"><?php _e('请选择示例或输入 Mermaid 代码，然后点击"渲染预览"按钮', 'argon'); ?></p>');
$error.hide();
});
// 渲染函数
function renderMermaid(code) {
try {
// 获取当前主题设置
const themeSelect = $('select[name="argon_mermaid_theme"]');
let theme = themeSelect.length ? themeSelect.val() : 'default';
// 如果是自动切换，根据当前页面模式选择主题
if (theme === 'auto') {
theme = $('html').hasClass('darkmode') ? 'dark' : 'default';
}
// 初始化 Mermaid
mermaid.initialize({
startOnLoad: false,
theme: theme,
securityLevel: 'loose',
logLevel: 'error'
});
// 生成唯一 ID
const id = 'mermaid-preview-' + Date.now();
// 渲染
mermaid.render(id, code).then(function(result) {
$output.html(result.svg);
$error.hide();
}).catch(function(error) {
showError(error.message || error.toString());
});
} catch (error) {
showError(error.message || error.toString());
}
}
// 显示错误
function showError(message) {
$output.html('<p style="color: #666; text-align: center; margin: 80px 0;"><?php _e('渲染失败', 'argon'); ?></p>');
$errorMsg.text(message);
$error.show();
}
});
</script>
</td>
</tr>
<!-- ========== 16. 高级设置 ========== -->
<tr><th class="subtitle"><h2 id="section-advanced"><?php _e('高级设置', 'argon');?></h2></th></tr>
<!-- ========== 16. 高级设置 ========== -->
<tr><th class="subtitle"><h2 id="section-advanced"><?php _e('高级设置', 'argon');?></h2></th></tr>
@@ -7096,14 +6730,6 @@ function argon_update_themeoptions(){
argon_update_option('argon_enable_pangu');
// Mermaid 图表配置
argon_update_option_checkbox('argon_enable_mermaid');
argon_update_option('argon_mermaid_cdn_source');
argon_update_option('argon_mermaid_cdn_custom_url');
argon_update_option('argon_mermaid_theme');
argon_update_option_checkbox('argon_mermaid_use_local');
argon_update_option_checkbox('argon_mermaid_debug_mode');
argon_update_option('argon_assets_path');
argon_update_option('argon_custom_assets_path');