内容目录
对话是什么
在小说阅读中，我们经常见到人物之间的“对话”。
是的，在博客中，转述不同人的贴文，也可以使用“对话”
所以说，对话就是不同角色的谈话。
嗯，“对话”就是常说的对话。
对话用在哪
对话可以用在不止一个人说话的地方。
最直接就是用在博客内容中。
能具体一些吗？
就像现在。
实现方式
实现一个 Astro 对话组件即可。
以下源码在 GitHub 下载，欢迎关注和 Star。
---
const props = Astro.props;
const dialogues = props.dialogues;
---
<div class="dialogues-container">
{dialogues.map((dialogue, index) => (
<div class={`dialogue ${dialogue.alignment}`}>
{dialogue.alignment === 'left'? (
<>
<div class="avatar-container">
<img src={dialogue.avatar} alt={dialogue.speaker} />
</div>
<div class="text-container">
<p is:raw>{dialogue.text}</p>
</div>
</>
) : (
<>
<div class="text-container">
<p is:raw>{dialogue.text}</p>
</div>
<div class="avatar-container">
<img src={dialogue.avatar} alt={dialogue.speaker} />
</div>
</>
)}
</div>
))}
</div>
安装 mdx 扩展后，则可以在页面使用该组件。
<Dialogues dialogues={[
{ speaker: "拿铁", text: "Hi，你没事吧！", avatar: "/assets/characters/avatar1.png", alignment: 'left' },
{ speaker: "美式", text: "Ye，我美式啊！", avatar: "/assets/characters/avatar2.webp", alignment: 'right' },
{ speaker: "咖啡玛奇朵", text: "Oh，趁热拿铁吧！", avatar: "/assets/characters/avatar3.png", alignment: 'left' },
{ speaker: "爱尔兰咖啡", text: "Ha，鸣谢 Xe Iaso 角色客串！", avatar: "/assets/characters/avatar.png", alignment: 'right' },
]} />
效果如下：
Hi，你没事吧！
Ye，我美式啊！
Oh，趁热拿铁吧！
Ha，鸣谢 Xe Iaso 角色客串！
