由于文章的 frontmatter 中没有 description 字段，因此使用第一段作为描述。

主题设置

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

网站的主题来自 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
:::

角色对话

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

添加你自己的角色

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

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

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

角色对话

当连续出现多个角色对话时，对话图片和对话气泡的顺序会反转，使对话更具来回对话的外观。

:::owl
这是一个很酷的功能！
:::

:::unicorn
我同意！
:::

你可以指定对齐方式（left 或 right）来覆盖默认的 left, right, left, ... 顺序。

:::unicorn{align="right"}
在这里，右边！
:::

GitHub 卡片

GitHub 概览卡片深受 Astro Cactus 启发。

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

::github{user="withastro"}

Emoji 🤩

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

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

早上好！ 😴 ☕ 🥞

所有 emoji（包括字面和短代码形式）都通过包装在 span 标签中来提高可访问性，如下所示：

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

在撰写本文时，emoji v16 尚不支持。这些 emoji 可以字面包含，但它们没有短代码，也不会被包装。

LaTeX/KaTeX 数学支持

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

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

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

查看 KaTeX 文档了解语法。

$$
a + ar + ar^2 + ar^3 + \dots + ar^{n-1} = \displaystyle\sum_{k=0}^{n - 1}ar^k = a \bigg(\dfrac{1 - r^n}{1 -r}\bigg)
$$

HTML 元素

一个按钮

带输入框的字段集

带标签的表单