aliases:

• /posts/full-component-stress-test/

全组件压力测试

这篇文章用于测试博客中常见和边缘内容的显示效果，包括标题、段落、列表、引用、表格、代码块、图片、视频、附件下载、长链接、折叠内容和移动端适配。

目录测试

如果主题启用了 TOC，这里应该能看到目录；如果未启用，也不影响文章显示。

文本样式测试

这是普通段落，用来观察中文排版、行距、段落间距和移动端换行效果。

这是粗体文本，这是斜体文本，这是删除线文本，这里有一段 行内代码 inline code，还有一个很长的连续字符串用于测试换行：

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

这是一个很长的链接，用于测试移动端是否会撑破页面：

https://example.com/this/is/a/very/very/very/very/very/very/long/path/with/query?name=markdown-component-stress-test&value=abcdefghijklmnopqrstuvwxyz0123456789

标题层级测试

三级标题

四级标题

五级标题

六级标题

标题层级应该有明显差异，但不要在手机端显得过大或过小。

列表测试

无序列表

• 第一项
• 第二项
• 第三项
  • 嵌套第一项
  • 嵌套第二项
    • 更深层嵌套
    • 再来一项
• 第四项包含很长很长的文字，用来测试列表在手机端是否能够正常换行，不会撑破页面或出现横向滚动。

有序列表

1. 第一步：准备内容
2. 第二步：测试样式
3. 第三步：检查移动端
4. 第四步：确认深色模式

任务列表

• 标题正常
• 表格正常
• 图片 Lightbox 正常
• 视频播放器正常
• 继续观察边缘情况

引用测试

这是一段普通引用。

引用中包含多行文字，用来检查引用块在深色模式和浅色模式下是否清晰可读。

引用中也可以包含 行内代码 和 粗体文字。

表格测试

代码块测试

Bash

hugo --gc --minify
grep -R "post-lightbox-image" public/posts/full-component-stress-test/index.html

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  console.log("Component stress test loaded.");

  const longName = "this-is-a-very-long-variable-name-used-to-test-code-block-horizontal-scrolling";
  console.log(longName);
});

C#

using System;

class Program
{
    static void Main()
    {
        Console.WriteLine("Hello from the stress test article!");
    }
}

图片测试

下面这张图片应该可以点击，在站内 Lightbox 中预览，而不是跳转外站。

下面这张图片用于测试连续图片显示。

视频播放器测试

下面是 ArtPlayer 网络视频测试。它应该使用站内 ArtPlayer 播放器，而不是原生 video 控件。

附件下载测试

下面是附件下载卡片，按钮应该醒目，手机端应该自动适配。

折叠内容测试

分割线测试

aliases:

• /posts/full-component-stress-test/

分割线下面的段落应该有自然间距。

脚注测试

这里是一段带脚注的文字。¹

HTML 块测试

结尾

如果你能在手机端和桌面端正常看到这篇文章，并且所有组件都没有明显溢出、错位或功能失效，说明博客的基础内容展示能力已经比较完整了。