使用这篇文章作为参考，了解如何在 Astro MultiTerm 主题中使用各种功能。

主题设置

为你的博客使用你最喜欢的编辑器主题！

网站的主题来自 Expressive Code 中内置的 Shiki 主题。你可以在这里查看它们。一个网站可以有一个或多个主题，在 src/site.config.ts 中定义。有三种主题模式可供选择：

1. single：为网站选择单一主题。简单。
2. light-dark-auto：为网站选择两个主题，分别用于明亮和黑暗模式。标题栏将包含一个按钮用于在明亮/黑暗/自动之间切换。例如，你可以选择 github-dark 和 github-light，默认为 "auto"，这样用户的体验将立即匹配他们的操作系统主题。
3. select：为网站选择两个或更多主题，并在标题栏中包含一个按钮来在这些主题之间切换。你可以包含尽可能多的来自 Expressive Code 的 Shiki 主题。让用户找到他们最喜欢的主题！

当用户更改主题时，他们的偏好会存储在 localStorage 中，以在页面导航中保持持久性。

代码块

让我们看看一些代码块样式：

def hello_world():
    print("Hello, world!")

hello_world()

def hello_world():
    print("Hello, world!")

hello_world()

python hello.py

还有一些内联代码：1 + 2 = 3。或者甚至是 (= (+ 1 2) 3)。

查看 Expressive Code 文档 了解更多可用功能，如文本换行、行高亮、差异显示等。

基本 Markdown 元素

• 列表项 1
• 列表项 2

粗体文本

斜体文本

删除线文本

链接

在生活中，就像在艺术中一样，有些结局是苦乐参半的。特别是在爱情方面。有时命运让两个恋人走到一起，却又将他们分开。有时英雄终于做出了正确的选择，但时机不对。正如人们所说，时机就是一切。

- 绯闻女孩

图片

图片可以在 URL 后包含一个标题字符串，以渲染为带有 <figcaption> 的 <figure>。

![树的像素艺术](./PixelatedGreenTreeSide.png '像素艺术在没有适当 CSS 的情况下渲染效果很差')

我还为像素艺术添加了一个特殊标签，可以添加正确的 CSS 以正确渲染。只需在 alt 字符串的最后添加 #pixelated。

![树的像素艺术 #pixelated](./PixelatedGreenTreeSide.png '但在 alt 字符串末尾添加 #pixelated 可以解决这个问题')

告示提醒

:::note
测试123
:::

角色对话

:::miu
**你知道吗？** 你可以使用 MultiTerm 轻松为你的博客创建自定义角色对话！
:::

添加你自己的角色

要添加你自己的角色，首先在你克隆的 MultiTerm 仓库的顶级 /public 目录中添加一个图片文件。Astro 无法自动优化来自 markdown 插件的图片资源，因此请确保将图片压缩到网络友好的大小（<100kb）。

我推荐使用 Google 的免费 Squoosh 网络应用程序来创建超小的 webp 文件。这里的角色已经被调整为 300 像素宽度，并使用 Squoosh 以 75% 质量导出为 webp。

添加图片后，在 site.config.ts 中更新 characters 选项，加入你新添加的图片文件，然后重启开发服务器。

角色对话

当有多个角色对话连续出现时，对话图片和对话气泡的顺序会反转，让对话看起来更像真正的来回交流。

:::gugu
这是一个很棒的功能！
:::

:::maimai
我同意！
:::

GitHub 卡片

GitHub 概览卡片的灵感来自 Astro Cactus。

::github{repo="stelcodes/multiterm-astro"}

::github{user="withastro"}

表情符号 🤩

表情符号可以通过包含字面的表情符号字符或 GitHub 短代码在 markdown 中添加。你可以在这里浏览非官方数据库。

早上好！:sleeping: :coffee: :pancakes:

早上好！😴 ☕ 🥞

所有表情符号（字面和短代码）都通过包装在 span 标签中变得更加无障碍，如下所示：

<span role="img" aria-label="coffee">☕️</span>

在写作时，emoji v16 还不被支持。这些表情符号可以字面包含，但它们没有短代码且不会被包装。

LaTeX/KaTeX 数学支持

你也可以通过 remark-math 和 rehype-katex 显示内联数学公式。

让这些方程式变得漂亮！$ \frac{a}{b} \cdot b = a $

让这些方程式变得漂亮！$\frac{a}{b} \cdot b = a$

HTML 元素

一个按钮

带输入框的字段集

带标签的表单