在文章中使用本地图片和视频

目录结构约定

将媒体文件放在与 Markdown 文件同名的文件夹下：

posts/
├── media-demo.md          ← 文章
└── media-demo/            ← 同名媒体文件夹
    ├── cover.svg          ← 封面图（front matter 引用）
    ├── images/
    │   └── diagram.svg    ← 正文图片
    └── demo.mp4           ← 视频（可选）

构建时会自动将 posts/media-demo/ 同步到 public/media/media-demo/，Markdown 里的相对路径也会被自动重写，无需手动操作。

在正文中引用图片

使用标准 Markdown 图片语法，路径相对于文章文件：

![图表说明](./images/diagram.svg)

渲染效果如下——alt 文字会自动变成图注：

在正文中嵌入视频

方式一：链接语法（推荐，简洁）

只要链接指向视频文件（.mp4、.webm、.ogg、.mov），会自动转换为带控件的 <video> 播放器：

[演示视频](./demo.mp4)

如果你还没有视频文件，上面的链接只是示例，不会报错。

方式二：直接写 HTML

如需精细控制（多格式兼容、poster 封面帧等），可直接在 Markdown 中写原生 HTML：

<video controls preload="metadata" poster="./cover.svg">
  <source src="./demo.mp4" type="video/mp4">
  <source src="./demo.webm" type="video/webm">
  您的浏览器不支持视频播放。
</video>

路径同样会被自动重写为正确的 /media/media-demo/ 前缀。

设置封面图

在文章 front matter 里加一行 coverImage：

---
title: "文章标题"
date: "2024-04-01"
coverImage: ./cover.svg      # 相对路径，放在同名媒体文件夹下
# 或者用绝对路径：
# coverImage: /media/media-demo/cover.svg
# 或者外部 URL：
# coverImage: https://example.com/image.jpg
---

封面图会在文章页标题上方大图展示，在列表页也会显示小缩略图。

支持的文件类型

类型	格式	Markdown 写法
图片	`.jpg` `.png` `.gif` `.webp` `.svg`	`![alt](./path)`
视频	`.mp4` `.webm` `.ogg` `.mov`	`[说明](./video.mp4)` 或原生 `<video>`
封面图	同上	front matter `coverImage` 字段

小贴士

文件命名建议使用小写英文+连字符，避免空格，例如 my-screenshot.png
图片的 alt 文字会自动渲染为图注，建议认真填写
视频建议同时提供 mp4 + webm 两种格式以获得最佳兼容性
大视频建议上传到视频平台（B站、YouTube）后用 <iframe> 嵌入，本地视频适合短片段