---
title: 对话记录
icon: cil:chat-bubble
createTime: 2025/03/24 21:40:18
permalink: /guide/markdown/chat/
badge:
  type: tip
  text: 1.0.0-rc.138
---

## 前言

::: chat title="阿 B"
{:2025-03-24 10:15:00}

{阿 B}
在文档里放聊天记录截图还是太难看了，有没有更好的方法？\[doge\]

{.}
有的，兄弟，包有的

{.}
但是挂聊天记录真的没问题吗？

{阿 B}
祖安对线，战绩可查 \[doge\]

{:2025-03-24 15:32:00}

{.}
好消息：文档支持聊天记录了！

{.}
坏消息：我把你挂出来了 \[doge\]

{阿 B}
？？？
:::

## 概述

在 Markdown 中，使用 `:: chat` 容器包裹带有特定标记的文本内容，可以在文档中显示 ==聊天记录==。

::: warning 这是一个大多数时候都用不上的功能，需要使用时请斟酌是否要这么做，对于涉及隐私的内容请自行过滤。
:::

## 启用

该功能默认不启用，你需要在 `theme` 配置中启用。

```ts title=".vuepress/config.ts"
export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      chat: true, // [!code ++]
    }
  })
})
```

## 使用

在 `::: chat` 容器中，使用特定的标记，标识消息的发送者和发送时间，然后在文档中显示聊天记录。

```md
::: chat title="标题"
{:date}     <!-- 标记起始时间 -->

{username}  <!-- 标记发送者 -->
xxx         <!-- 发送者的消息内容 -->

{.}         <!-- 标记为本人发送 -->
xxx         <!-- 本人的消息内容 -->
:::
```

- `{:date}` 标记起始时间 （可选）。使用 `{:` + date + `}` 标记，date 可以为常见的日期格式。

  主题不对 `date` 做任何处理，只是简单的渲染。

- `{username}` 标记后续内容的发送者，使用 `{` + username + `}` 标记，username 可以为任意字符串。

- `{.}` 标记为本人发送

## 示例

__输入：__

``` md
::: chat title="标题"
{:2025-03-24 10:15:00}

{用户一}
用户一的消息

{.}
本人的消息

{用户二}
用户二的消息

{.}
本人的消息
:::
```

__输出：__

::: chat title="标题"
{:2025-03-24 10:15:00}

{用户一}
用户一的消息

{.}
本人的消息

{用户二}
用户二的消息

{.}
本人的消息
:::