移动端

这篇文章用于测试博客中常见和边缘内容的显示效果，包括标题、段落、列表、引用、表格、代码块、图片、视频、附件下载、长链接、折叠内容和移动端适配。 目录测试 如果主题启用了 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 标题层级测试 三级标题 四级标题 五级标题 六级标题 标题层级应该有明显差异，但不要在手机端显得过大或过小。 列表测试 无序列表 第一项 第二项 第三项 嵌套第一项 嵌套第二项 更深层嵌套 再来一项 第四项包含很长很长的文字，用来测试列表在手机端是否能够正常换行，不会撑破页面或出现横向滚动。 有序列表 第一步：准备内容 第二步：测试样式 第三步：检查移动端 第四步：确认深色模式 任务列表 标题正常 表格正常 图片 Lightbox 正常 视频播放器正常 继续观察边缘情况 引用测试 这是一段普通引用。 引用中包含多行文字，用来检查引用块在深色模式和浅色模式下是否清晰可读。 引用中也可以包含 行内代码 和 粗体文字。 表格测试 组件作用移动端期望效果Markdown 表格展示结构化数据自动换行，不变成大卡片，不撑破页面图片 Lightbox点击图片站内预览点击后弹层显示，点击背景关闭ArtPlayer播放可直连视频控件正常，长按不弹下载菜单下载附件提供文件入口按钮醒目，手机端不溢出超长文本测试aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa自动换行 代码块测试 Bash 1hugo --gc --minify 2grep -R "post-lightbox-image" public/posts/full-component-stress-test/index.html JavaScript 1document.addEventListener("DOMContentLoaded", function () { 2 console.log("Component stress test loaded."); 3 4 const longName = "this-is-a-very-long-variable-name-used-to-test-code-block-horizontal-scrolling"; 5 console.log(longName); 6}); C# ...