·技术

Markdown 中的图片用法

演示博客如何引用本地配图、远程图片,以及宽图与说明文字样式。

目录 (5)

本文演示 Rainy Den 的图文并茂能力:封面图、列表缩略图、文章头图,以及正文内的配图排版。

封面与列表

在 Frontmatter 里声明 cover,即可在首页精选卡片、文章列表和文章页头图显示封面:

cover: "./hero.svg"

下方是正文内的宽图示例(wide: 前缀):

封面大图:相对路径 ./hero.svg,构建后同步到 /media/posts/ 目录

资源目录约定

每篇文章在 content/assets/<slug>/ 放配图,构建时复制到 public/media/posts/<slug>/

文章资源与 posts 目录的对应关系

./ 相对路径会自动解析;本地 SVG 在正文中会内联渲染,无需额外请求。

行内配图

普通宽度图片居中显示,下方自动带上 alt 说明:

行内小图示例:适合截图、示意图

其他引用方式

public 目录下的 SVG

站点图标

远程图片

Next.js Logo
Next.js Logo

写作建议

  • 封面建议 16:9,正文配图优先 WebP / SVG
  • 宽图 alt 以 wide: 开头,可突破正文栏宽度
  • 修改 content/assets/ 后重启 pnpm devpnpm build

相关文章