简介

这是种方式适合「播放器要跟某段内容强相关、插在正文中间、位置因文章而异」的场景。做法是把文章后缀改成 .mdx，在正文里直接写组件标签——标签写在哪段，播放器就出现在哪段。

首先引入

在frontmatter后正文内，先import:

import MusicPlayer from '../../components/MusicPlayer.astro'

然后开始正常写文章，这一段讲完之后，如果想插入一个播放器：

代码这么写

<MusicPlayer src="/music/demo.wav" title="第一段配乐" />

上面这个播放器就嵌在两段文字之间，而不是固定在文末。你完全可以再往下放第二个、第三个，位置随你排。

再来一段文字，把两个播放器隔开：

注意：用这种方式时，frontmatter 里不要写 music 字段，否则布局会在文末再生成一个固定位置的播放器，造成「同一篇文章两个播放器」。

---