你将学到什么

  • 列表卡片封面的全局配置。
  • 单篇文章如何覆盖默认封面策略。
  • 预览页与总览页的视觉一致性控制。

全局配置

blog: {
  listCard: {
    defaultCoverMode: "right", // right | left | top | none
    coverWidth: 224,
    coverHeight: 154,
    coverAspectRatio: "16 / 9"
  }
}

单篇 frontmatter

cover: "https://images.unsplash.com/..."
coverMode: "top"

步骤

  1. 先设置全局默认模式。
  2. 在个别文章中设置 coverMode 覆盖默认值。
  3. 打开 /blog 与 /tutorials 对比卡片展示。

效果验证

  • none 时卡片无封面。
  • left/right/top 时封面位置与尺寸符合预期。

常见问题与排查

  • 封面不显示：检查图片 URL 是否可访问。
  • 模式无变化：检查 coverMode 拼写是否在允许集合中。

下一篇预告

下一篇将把封面策略带入首页流与分页卡片，做整体视觉调优。