文档编写指南

提示

本文档的目的在于指导文档编写者更好的使用主题提供的功能，以此达到更易读的效果

我们的文档基于 vuepress 构建，使用了 vuepress-theme-hope 主题，你也可以查看官方文档来获取更加详细的说明，这里仅介绍一些常用的功能

容器

不是 docker 那个容器

该主题提供了关于提示、注释、信息、注意、警告和详情自定义容器的支持，我们可以利用这一特性来强调部分内容

容器的使用方法：

::: [容器类型] [容器标题（可选）]
你想写的内容
:::

接受的容器内容与其默认标题如下：

• tip 提示
• note 注释
• info 信息
• warning 注意
• danger 警告
• details 详情

容器示例

提示

这是提示容器

注

这是注释容器

相关信息

这是信息容器

注意

这是注意容器

警告

这是危险容器

详情

这是详情容器

图标

该主题提供了图标支持，你可以在以下地方使用图标:

• 文档标题: 在 frontmatter 中设置文档标题旁边的图标

• 导航栏/侧边栏: 设置在导航栏与侧边栏中显示的图标

• 文档内容: 在文档中使用图标

设置文档的图标

你可以在文档的 frontmatter 中使用 icon 来设置文档的图标

这个图标会显示在文档标题的旁边

本文档的 frontmatter 设置

---
icon: jam:write-f
---

在文档中使用图标

你可以使用 <HopeIcon /> 组件在 markdown 中添加图标。该组件有以下属性：

• icon 接受图标关键字及 Url，如 jam:write-f，ic:round-home 等
• color 接受 css 风格的颜色值，如 #fff，red 等（该选项仅对 svg 图标有效）
• size 接受 css 风格的大小，如 1rem，2em，100px 等

案例

<HopeIcon icon="ic:round-home" color="#1f1e33"/>

<HopeIcon icon="https://cdn.jsdelivr.net/gh/MaaAssistantArknights/design@main/logo/maa-logo_512x512.png" size="4rem" />

图标关键字的获取

本文档使用的图标来自于 iconify，你可以在其给出的 图标搜索界面 中搜索你想要的图标，然后复制其关键字

Frontmatter

Frontmatter 是 Markdown 文档开头一段用 --- 包裹起来的内容，其内部使用 yml 语法。通过 Frontmatter，我们可以标识文档的编辑时间，使用的图标，分类，标签等等

示例

---
date: 1919-08-10
icon: jam:write-f
order: 1
---

# 文档标题

...

各字段含义如下：

• date 文档的编辑时间
• icon 文档标题旁边的图标
• order 文档在侧边栏中的排序