full 布局:图片铺满全宽(16:9),说明文字置于下方。适合展示单张具有强烈视觉冲击力的照片。
排版示范
这篇影集展示了目前支持的全部 15 种图文排版布局。
你可以在每张照片的 frontmatter 中通过 layout 字段自由切换排版方式。所有图片直接展示原图,无任何滤镜。每项内容都带有级联渐入动画。
如果某张照片不需要说明文字,直接省略 caption 字段即可。旧格式的 images 数组(纯 URL 列表)会自动以 full 布局展示,完全向下兼容。
wide 布局:大图占据左侧三分之二,文字居于右侧三分之一。适合图文并重的叙述。
left 布局:图片在左(约 55%),文字在右。图片与文字比例接近,适合需要详细说明的单张照片。
right 布局:文字在左,图片在右(约 55%)。与 left 镜像对称,可交替使用以打破视觉单调。
duo 布局:两张图并排展示,下方可配统一说明。适合对比、序列或组图。第二张图通过 images 字段传入。
carousel 布局:在瀑布流中嵌入一个可左右滑动的轮播组件。url 为第一张图,images 数组传入剩余图片。适合展示同一主题的连续拍摄。
hero 布局:单张图最小高度为 80vh,具有极强的视觉冲击力。适合作为影集中的高潮画面。
grid3 布局:三张图片横排等宽排列,下方可配统一说明。适合展示同一场景的不同角度或连续瞬间。通过 images 数组传入后两张图。
strip 布局:暗色背景上的横向可滚动容器,图片如胶片般依次排列,说明文字在容器下方。适合叙事性的组图或旅行记录。通过 images 数组传入更多图片。
parallax 布局:全宽大图占据 80vh 高度,说明文字居中叠加在图片上,图片自动压暗以突出文字。适合富有诗意的表达或影集中的情绪转折。
panorama 布局:超宽全景比例(3:1),突破容器宽度铺满视口。适合壮阔的风景或城市天际线。
block 布局:深色色块承载图片,暖米色色块承载文字,左右对半分栏,形成强烈的材质对比与视觉层次。适合需要突出图片质感同时保持文字可读性的场景。
overlap 布局:深色背景上图片向下偏移,白色文字卡片从下方叠上来,形成前后层叠的空间感。金色装饰线点缀文字区。适合富有设计感的叙事或影集中的情绪转折。
frame 布局:暖米色大背景上,黑色厚边框包裹图片,文字居中于下方。如同装裱好的画作,适合精致、克制的表达。