vuepress-theme-plume/docs/guide/markdown/chat.md

title, icon, createTime, permalink

title	icon	createTime	permalink
对话记录	cil:chat-bubble	2025/03/24 21:40:18	/guide/markdown/chat/

前言

::: 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 配置中启用。

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      chat: true, // [!code ++]
    }
  })
})

使用

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

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

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

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

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

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

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

• {.} 标记为本人发送

示例

输入：

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

{用户一}
用户一的消息

{.}
本人的消息

{用户二}
用户二的消息

{.}
本人的消息
:::

输出：

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

{用户一} 用户一的消息

{.} 本人的消息

{用户二} 用户二的消息

{.} 本人的消息 :::