【图文测试】一篇长一点的阅读笔记：图片、表格与代码

这篇公开测试文章用来检查较长标题、连续段落、多张图片、表格和代码的显示。图片为摄影素材，并非站主个人经历记录。

先把一件事说清楚

一篇内容稍长的文章，需要清楚的段落，也需要稳定的页面。读者在手机上往下滑动时，刚刚看到的位置应该容易找到；图片出现后，后面的文字也应保持自然的阅读顺序。

这次用三张比例不同的照片，搭配一张表格和一段示例代码，看看日常写作中常见的内容放在一起是什么样子。

图文交替，让信息有停顿

照片负责展示场景，正文负责解释它和这一段内容有什么关系。每张图前后留出一点文字，可以让读者停下来，也让后面的章节有明确的起点。

下面换成一张横幅湖景。它和森林图的细节密度不同，适合对照压缩后的画面。图片只作为这篇文章的展示素材，不代表某次实地旅行。

用一张表格整理检查点

表格放在正文里，可以集中呈现相似的信息。列数变多时，读者应当在表格内部移动，而不是被整页横向拖走。

一段可以复制的示例

下面只是用于排版的前端代码示例，没有访问本站接口，也不包含真实配置。较长的那一行用来观察代码区域的横向滚动。

const articlePreview = {
  title: "一篇图文阅读笔记",
  images: ["forest.webp", "lake.webp", "reflection.webp"],
  note: "这一行刻意保留得稍长一些，用来检查手机屏幕中的代码区域能否独立横向滚动，同时让整篇文章的正文宽度保持稳定。"
};
console.log(articlePreview.title);

代码读完后，继续向下就回到普通正文。不同内容之间的切换应该清楚，复制按钮与滚动条也应该容易使用。

最后留给一张竖图

这张照片保留了较长的纵向画面。可以点击它打开大图，切换前面的两张照片，然后关闭看图继续读完文章。

这三篇测试文章会暂时保留在首页，方便比较封面、列表、正文与手机看图的实际效果。

图片来源

森林：Luis del Río / Pexels。横幅湖景：Lars Mai / Pexels。竖幅湖景：Dziana Hasanbekava / Pexels。