Files
MaaAssistantArknights/docs/zh-cn/develop/documentation-guidelines.md
Rbqwow 8bcdee5eb8 docs: 更新文档 (#11430)
* docs: 更新文档

对不起我忘记拆分 commit 了

优化 winget 安装运行库命令
添加 一键修复运行库.ps1
将 image 文件夹重命名为 images
添加账号切换执行时机说明

土下座

Co-authored-by: SherkeyXD <57581480+SherkeyXD@users.noreply.github.com>

* docs: 跟上学姐的脚步

* fix: cli docs

---------

Co-authored-by: SherkeyXD <57581480+SherkeyXD@users.noreply.github.com>
2024-12-29 21:34:30 +08:00

3.3 KiB
Raw Blame History

order, icon
order icon
6 jam:write-f

文档编写指南

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

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

本地部署

  1. 安装 pnpm,并参考 Pull Request 流程简述将仓库克隆到本地。
  2. website 目录下新建终端,运行 pnpm i 部署依赖。
  3. 运行 pnpm run dev 进行部署。

容器

不是 docker 那个容器

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

容器的使用方法:

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

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

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

容器示例

::: tip 这是提示容器 :::

::: note 这是注释容器 :::

::: info 这是信息容器 :::

::: warning 这是注意容器 :::

::: danger 这是危险容器 :::

::: details 这是详情容器 :::

图标

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

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

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

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

设置文档的图标

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

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

::: details 本文档的 frontmatter 设置

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

:::

在文档中使用图标

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

  • icon 接受图标关键字及 Urljam:write-fic:round-home
  • color 接受 css 风格的颜色值,如 #fffred 等(该选项仅对 svg 图标有效)
  • size 接受 css 风格的大小,如 1rem2em100px

::: details 案例

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

图标关键字的获取

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

Frontmatter

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

::: details 示例

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

# 文档标题

...

:::

各字段含义如下:

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