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

feat: 实现 Mermaid 库加载器

Browse Source 
- 添加 argon_has_mermaid_content() 函数检测页面是否包含 Mermaid 代码块
- 支持多种格式：div.mermaid、code.language-mermaid、pre[data-lang=mermaid]、code.mermaid
- 添加 argon_get_mermaid_library_url() 函数根据配置返回 CDN 或本地路径
- 支持 jsdelivr、unpkg、自定义 CDN 和本地镜像
- 添加 argon_get_mermaid_fallback_urls() 函数提供备用 CDN 列表
- 添加 argon_enqueue_mermaid_scripts() 函数按需加载 Mermaid 库
- 检测文章内容和评论内容中的 Mermaid 代码块
- 实现异步加载（async 属性）
- 通过 wp_localize_script 传递配置到前端
- 添加单元测试文件 test-mermaid-loader.php
- Requirements: 1.1, 1.2, 1.3, 1.5, 8.2
This commit is contained in:
nanhaoluo
2026-01-23 22:54:44 +08:00
parent 8ed0ec1717
commit f9485b50a8
2 changed files with 306 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
functions.php
View File

@@ -9173,3 +9173,173 @@ function argon_update_mermaid_settings($settings) {
'errors' => []
];
}
// ==========================================================================
// Mermaid 图表支持 - 库加载器
// ==========================================================================
/**
* 检测页面内容是否包含 Mermaid 代码块
*
* 支持多种格式：
* - <div class="mermaid">
* - <pre><code class="language-mermaid">
* - <pre data-lang="mermaid">
* - <code class="mermaid">
*
* @param string $content 页面内容
* @return bool 是否包含 Mermaid 代码块
*/
function argon_has_mermaid_content($content) {
if (empty($content)) {
return false;
}
// 检测多种 Mermaid 代码块格式
$patterns = [
'/<div[^>]*class=["\']([^"\']*\s)?mermaid(\s[^"\']*)?["\'][^>]*>/i', // <div class="mermaid">
'/<code[^>]*class=["\']([^"\']*\s)?language-mermaid(\s[^"\']*)?["\'][^>]*>/i', // <code class="language-mermaid">
'/<pre[^>]*data-lang=["\']mermaid["\'][^>]*>/i', // <pre data-lang="mermaid">
'/<code[^>]*class=["\']([^"\']*\s)?mermaid(\s[^"\']*)?["\'][^>]*>/i' // <code class="mermaid">
];
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@10/dist/mermaid.min.js',
'unpkg' => 'https://unpkg.com/mermaid@10/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@10/dist/mermaid.min.js',
'https://unpkg.com/mermaid@10/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 库 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);
// 传递配置到前端
$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()
];
wp_localize_script('mermaid', 'argonMermaidConfig', $mermaid_config);
}
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 属性
return str_replace(' src', ' async src', $tag);
}

136
tests/test-mermaid-loader.php Normal file
View File

@@ -0,0 +1,136 @@
<?php
/**
* Mermaid 库加载器单元测试
*
* 测试 argon_has_mermaid_content() 和 argon_get_mermaid_library_url() 函数
*/
// 加载 WordPress 测试环境
require_once dirname(__FILE__) . '/../../../wp-load.php';
require_once dirname(__FILE__) . '/../functions.php';
/**
* 测试辅助函数
*/
function test_assert($condition, $message) {
if ($condition) {
echo "✓ {$message}\n";
return true;
} else {
echo "✗ {$message}\n";
return false;
}
}
function test_assert_equals($expected, $actual, $message) {
if ($expected === $actual) {
echo "✓ {$message}\n";
return true;
} else {
echo "✗ {$message}\n";
echo " 期望值: " . var_export($expected, true) . "\n";
echo " 实际值: " . var_export($actual, true) . "\n";
return false;
}
}
function test_assert_contains($needle, $haystack, $message) {
if (strpos($haystack, $needle) !== false) {
echo "✓ {$message}\n";
return true;
} else {
echo "✗ {$message}\n";
echo " 在字符串中未找到: {$needle}\n";
return false;
}
}
echo "=== Mermaid 库加载器单元测试 ===\n\n";
// 测试 1: 检测 div class="mermaid" 格式
$content1 = '<div class="mermaid">flowchart TD\nA-->B</div>';
test_assert(argon_has_mermaid_content($content1), "测试 1: 检测 div class=\"mermaid\" 格式");
// 测试 2: 检测 code class="language-mermaid" 格式
$content2 = '<pre><code class="language-mermaid">graph LR\nA-->B</code></pre>';
test_assert(argon_has_mermaid_content($content2), "测试 2: 检测 code class=\"language-mermaid\" 格式");
// 测试 3: 检测 pre data-lang="mermaid" 格式
$content3 = '<pre data-lang="mermaid">sequenceDiagram\nA->>B: Hello</pre>';
test_assert(argon_has_mermaid_content($content3), "测试 3: 检测 pre data-lang=\"mermaid\" 格式");
// 测试 4: 检测 code class="mermaid" 格式
$content4 = '<code class="mermaid">pie title Pets\n"Dogs" : 386</code>';
test_assert(argon_has_mermaid_content($content4), "测试 4: 检测 code class=\"mermaid\" 格式");
// 测试 5: 不包含 Mermaid 代码块
$content5 = '<p>This is a regular paragraph</p><code class="language-javascript">console.log("hello")</code>';
test_assert(!argon_has_mermaid_content($content5), "测试 5: 不包含 Mermaid 代码块");
// 测试 6: 空内容
test_assert(!argon_has_mermaid_content(''), "测试 6: 空内容返回 false");
// 测试 7: 检测多个 class 的情况
$content7 = '<div class="code-block mermaid highlight">flowchart TD</div>';
test_assert(argon_has_mermaid_content($content7), "测试 7: 检测多个 class 的情况");
// 测试 8: 大小写不敏感
$content8 = '<div class="MERMAID">flowchart TD</div>';
test_assert(argon_has_mermaid_content($content8), "测试 8: 大小写不敏感");
echo "\n=== 测试 argon_get_mermaid_library_url() ===\n\n";
// 测试 9: jsdelivr CDN
update_option('argon_mermaid_cdn_source', 'jsdelivr');
update_option('argon_mermaid_use_local', false);
$url9 = argon_get_mermaid_library_url();
test_assert_contains('cdn.jsdelivr.net', $url9, "测试 9: jsdelivr CDN URL");
// 测试 10: unpkg CDN
update_option('argon_mermaid_cdn_source', 'unpkg');
update_option('argon_mermaid_use_local', false);
$url10 = argon_get_mermaid_library_url();
test_assert_contains('unpkg.com', $url10, "测试 10: unpkg CDN URL");
// 测试 11: 本地镜像
update_option('argon_mermaid_use_local', true);
$url11 = argon_get_mermaid_library_url();
test_assert_contains('/assets/vendor/mermaid/', $url11, "测试 11: 本地镜像 URL");
// 测试 12: 自定义 CDN（有效 URL）
update_option('argon_mermaid_cdn_source', 'custom');
update_option('argon_mermaid_cdn_custom_url', 'https://example.com/mermaid.min.js');
update_option('argon_mermaid_use_local', false);
$url12 = argon_get_mermaid_library_url();
test_assert_equals('https://example.com/mermaid.min.js', $url12, "测试 12: 自定义 CDN URL");
// 测试 13: 自定义 CDN（无效 URL，降级到 jsdelivr）
update_option('argon_mermaid_cdn_source', 'custom');
update_option('argon_mermaid_cdn_custom_url', 'invalid-url');
update_option('argon_mermaid_use_local', false);
$url13 = argon_get_mermaid_library_url();
test_assert_contains('cdn.jsdelivr.net', $url13, "测试 13: 无效自定义 URL 降级到 jsdelivr");
// 测试 14: 本地镜像优先级最高
update_option('argon_mermaid_cdn_source', 'jsdelivr');
update_option('argon_mermaid_use_local', true);
$url14 = argon_get_mermaid_library_url();
test_assert_contains('/assets/vendor/mermaid/', $url14, "测试 14: 本地镜像优先级最高");
// 测试 15: 未知 CDN 来源降级到 jsdelivr
update_option('argon_mermaid_cdn_source', 'unknown-source');
update_option('argon_mermaid_use_local', false);
$url15 = argon_get_mermaid_library_url();
test_assert_contains('cdn.jsdelivr.net', $url15, "测试 15: 未知 CDN 来源降级到 jsdelivr");
echo "\n=== 测试 argon_get_mermaid_fallback_urls() ===\n\n";
// 测试 16: 备用 URL 列表
$fallback_urls = argon_get_mermaid_fallback_urls();
test_assert(is_array($fallback_urls), "测试 16: 返回数组");
test_assert(count($fallback_urls) === 3, "测试 17: 包含 3 个备用 URL");
test_assert_contains('cdn.jsdelivr.net', $fallback_urls[0], "测试 18: 第一个备用 URL 是 jsdelivr");
test_assert_contains('unpkg.com', $fallback_urls[1], "测试 19: 第二个备用 URL 是 unpkg");
test_assert_contains('/assets/vendor/mermaid/', $fallback_urls[2], "测试 20: 第三个备用 URL 是本地");
echo "\n=== 所有测试完成 ===\n";