HI,ZhuiYi · 文章

测试3

2026-08-07 00:00 · 测试

测试3

博客交互与组件渲染测试指南

在构建现代博客系统时，除了基础的文本与图片，交互式组件（如折叠面板、提示框、警示块）能够显著提升长文本与文档的阅读体验。本文用于全面测试博客主题对 HTML 标签与 Markdown 扩展组件的解析能力。

一、 原生 HTML 折叠面板（<details>）测试

折叠面板通常用于隐藏长代码、参考答案、历史版本说明或不常用的补充信息。

基础折叠面板

JSON

{
  "theme": "dark",
  "enableMarkdown": true,
  "detailsSupport": true,
  "maxDepth": 4
}
测试观察： 展开后，内部的代码块与引用块样式是否正常缩进，且不破坏外部容器边框。

嵌套折叠面板（Multi-level Details）

测试博客系统对嵌套 <details> 标签的层级与边框渲染支持：

在进行系统故障诊断时，请按以下步骤逐级排查：

可以使用以下 SQL 语句查看当前正在执行的慢查询：

  1. 检查网络连通性（Ping / MTR）
  2. 校验应用服务进程状态
  3. 检查数据库连接池与慢查询日志

SQL

SELECT
    pid, user, pg_blocking_pids(pid) AS blocked_by,
    query AS current_query, age(clock_timestamp(), query_start) AS duration
FROM pg_stat_activity
WHERE state != 'idle' AND age(clock_timestamp(), query_start) > interval '5 seconds'
ORDER BY duration DESC;

二、 自定义 Alert / Callout 提示框渲染测试

许多现代 Markdown 解析器（如 GitHub Flavored Markdown 或 Starlight/VitePress）支持 Alert 提示框。请检查你的博客是否能够正确识别并赋予不同颜色的边框与背景。

GitHub 风格 Alert 语法测试

[!NOTE] 信息提示（Note）： 这是一个标准的 Note 提示块，通常采用蓝色系作为背景与左侧强调边框。
[!TIP] 实用技巧（Tip）： 使用快捷键 Cmd + K 可以快速唤起博客的全站搜索框。
[!WARNING] 警告事项（Warning）： 修改数据库配置文件前，请务必提前进行全量物理备份（pg_dump / mysqldump）。
[!CAUTION] 危险操作（Caution）： 执行 rm -rf 或 DROP DATABASE 命令将导致不可逆的数据丢失！

HTML 自定义容器块（Alert Callouts）

如果你的博客主题使用 HTML class 类名来渲染提示框，可使用以下结构测试样式：

三、 特殊 HTML 标签与上标/下标测试

测试博客 Markdown 引擎对内嵌 HTML 标记语言（HTML Entity & Inline Elements）的兼容度：