排版示范
返回影集 示范

排版示范

记录于 2026年7月27日
ABOUT

排版示范

这篇影集展示了目前支持的全部 15 种图文排版布局。

你可以在每张照片的 frontmatter 中通过 layout 字段自由切换排版方式。所有图片直接展示原图,无任何滤镜。每项内容都带有级联渐入动画。

如果某张照片不需要说明文字,直接省略 caption 字段即可。旧格式的 images 数组(纯 URL 列表)会自动以 full 布局展示,完全向下兼容。

—— 记录于 2026年7月27日 ——
full 布局:图片铺满全宽(16:9),说明文字置于下方。适合展示单张具有强烈视觉冲击力的照片。

full 布局:图片铺满全宽(16:9),说明文字置于下方。适合展示单张具有强烈视觉冲击力的照片。

wide 布局:大图占据左侧三分之二,文字居于右侧三分之一。适合图文并重的叙述。

wide 布局:大图占据左侧三分之二,文字居于右侧三分之一。适合图文并重的叙述。

left 布局:图片在左(约 55%),文字在右。图片与文字比例接近,适合需要详细说明的单张照片。

left 布局:图片在左(约 55%),文字在右。图片与文字比例接近,适合需要详细说明的单张照片。

right 布局:文字在左,图片在右(约 55%)。与 left 镜像对称,可交替使用以打破视觉单调。

right 布局:文字在左,图片在右(约 55%)。与 left 镜像对称,可交替使用以打破视觉单调。
overlay 布局:说明文字以半透明毛玻璃底框叠加在图片右下角。适合图片本身信息丰富、不希望文字打断画面的场景。

overlay 布局:说明文字以半透明毛玻璃底框叠加在图片右下角。适合图片本身信息丰富、不希望文字打断画面的场景。

排版示范
排版示范

duo 布局:两张图并排展示,下方可配统一说明。适合对比、序列或组图。第二张图通过 images 字段传入。

hero 布局:单张图最小高度为 80vh,具有极强的视觉冲击力。适合作为影集中的高潮画面。

hero 布局:单张图最小高度为 80vh,具有极强的视觉冲击力。适合作为影集中的高潮画面。

排版示范
排版示范
排版示范

grid3 布局:三张图片横排等宽排列,下方可配统一说明。适合展示同一场景的不同角度或连续瞬间。通过 images 数组传入后两张图。

排版示范 排版示范排版示范排版示范

strip 布局:暗色背景上的横向可滚动容器,图片如胶片般依次排列,说明文字在容器下方。适合叙事性的组图或旅行记录。通过 images 数组传入更多图片。

排版示范

parallax 布局:全宽大图占据 80vh 高度,说明文字居中叠加在图片上,图片自动压暗以突出文字。适合富有诗意的表达或影集中的情绪转折。

panorama 布局:超宽全景比例(3:1),突破容器宽度铺满视口。适合壮阔的风景或城市天际线。

panorama 布局:超宽全景比例(3:1),突破容器宽度铺满视口。适合壮阔的风景或城市天际线。

排版示范
NOTE

block 布局:深色色块承载图片,暖米色色块承载文字,左右对半分栏,形成强烈的材质对比与视觉层次。适合需要突出图片质感同时保持文字可读性的场景。

排版示范

overlap 布局:深色背景上图片向下偏移,白色文字卡片从下方叠上来,形成前后层叠的空间感。金色装饰线点缀文字区。适合富有设计感的叙事或影集中的情绪转折。

排版示范

frame 布局:暖米色大背景上,黑色厚边框包裹图片,文字居中于下方。如同装裱好的画作,适合精致、克制的表达。

EXIF
地点 各地
日期 2026年7月27日
相机 示例相机
镜头 示例镜头