EmDash 中文指南

本文演示 EmDash（基于 Astro 6）在 Markdown 文章中支持的四种内容类型：文本、图像、音频、视频。

一、文本

Markdown 原生支持，直接书写即可。

常用语法

粗体、斜体、~~删除线~~、行内代码

引用块：这是一段引用内容。

// 代码块，支持语法高亮
function hello(name) {
  return `Hello, ${name}!`;
}

列表：

无序列表项 A
无序列表项 B
- 嵌套项

有序列表项 1
有序列表项 2

表格：

类型	语法	支持方式
文本	Markdown	原生
图像	`![alt](url)`	原生
音频	`<audio>`	内嵌 HTML
视频	`<video>`	内嵌 HTML

二、图像

使用标准 Markdown 语法，文件放在 public/ 目录下，路径从根 / 开始。

语法

![图片描述](/demo/1.png)

效果

演示图片

带链接的图片

[![图片描述](/demo/1.png)](https://emdash.io)

控制尺寸

Markdown 不支持直接设置尺寸，可以用内嵌 HTML：

<img src="/demo/1.png" alt="演示图片" width="400" />

三、音频

Markdown 没有原生音频语法，在 .md 文件中直接写 HTML <audio> 标签即可，Astro 完全支持。

语法

<audio controls>
  <source src="/demo/preset_preset1_breath_做两个深呼吸.mp3" type="audio/mpeg" />
  你的浏览器不支持音频播放。
</audio>

效果

常用属性

属性	说明
`controls`	显示播放控件（必加）
`autoplay`	自动播放（不推荐，影响用户体验）
`loop`	循环播放
`muted`	静音
`preload="none"`	不预加载，节省流量

四、视频

同样使用内嵌 HTML <video> 标签。

语法

<video controls width="100%">
  <source src="/demo/Camera_xhs_1769519131292.mp4" type="video/mp4" />
  你的浏览器不支持视频播放。
</video>

效果

常用属性

属性	说明
`controls`	显示播放控件（必加）
`width="100%"`	宽度自适应容器
`poster="/cover.jpg"`	视频封面图
`autoplay muted`	自动静音播放（常用于背景视频）
`loop`	循环播放
`preload="none"`	不预加载，节省流量

五、文件放置规范

所有媒体文件放在 blog-site/public/ 目录下，构建后会原样复制到网站根目录。

blog-site/public/
├── demo/
│   ├── 1.png
│   ├── Camera_xhs_1769519131292.mp4
│   └── preset_preset1_breath_做两个深呼吸.mp3
└── favicon.svg

在 Markdown 中引用时，路径从 / 开始（不含 public）：

# 图片
![说明](/demo/1.png)

# 音频
<audio controls><source src="/demo/audio.mp3" type="audio/mpeg" /></audio>

# 视频
<video controls width="100%"><source src="/demo/video.mp4" type="video/mp4" /></video>

六、注意事项

文件名中的非英文字符

文件名包含中文（如 做两个深呼吸.mp3）在大多数现代浏览器中可以正常工作，但建议重命名为英文，避免在某些服务器或 CDN 上出现编码问题：

# 不推荐
preset_preset1_breath_做两个深呼吸.mp3

# 推荐
preset-breath-deep-breathing.mp3

大文件建议用外部存储

视频文件较大时，建议上传到 Cloudflare R2、YouTube、Vimeo 等，再用 <iframe> 或 <video> 嵌入，避免占用 Git 仓库空间：

<!-- 嵌入 YouTube -->
<iframe
  width="100%"
  height="400"
  src="https://www.youtube.com/embed/VIDEO_ID"
  frameborder="0"
  allowfullscreen
  style="border-radius: 8px;"
></iframe>