57fbe81be1
Co-authored-by: wlwxj <d1ve_wh4le@outlook.com> Co-authored-by: Rbqwow <55343783+Rbqwow@users.noreply.github.com> Co-authored-by: Constrat <56174894+Constrat@users.noreply.github.com> Co-authored-by: HX3N <scarlet7518@gmail.com> Co-authored-by: Wallsman <63186641+wallsman@users.noreply.github.com> Co-authored-by: Loong <wangl.cc@outlook.com> Co-authored-by: 神代綺凛 <i@loli.best> Co-authored-by: SherkeyXD <57581480+SherkeyXD@users.noreply.github.com>
3.5 KiB
order, icon
| order | icon |
|---|---|
| 6 | jam:write-f |
文档编写指南
::: tip 本文档的目的在于指导文档编写者更好的使用主题提供的功能，以此达到更易读的效果。 :::
我们的文档基于 vuepress 构建，使用了 vuepress-theme-hope 主题，你也可以查看官方文档来获取更加详细的说明，这里仅介绍一些常用的功能
本地部署
- 安装 pnpm，并参考 Pull Request 流程简述将仓库克隆到本地。
- 在
website目录下新建终端，运行pnpm i部署依赖。 - 运行
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接受图标关键字及 Url，如jam:write-f，ic:round-home等color接受 css 风格的颜色值，如#fff，red等（该选项仅对 svg 图标有效）size接受 css 风格的大小，如1rem，2em，100px等
::: details 案例
<HopeIcon icon="ic:round-home" color="#1f1e33"/>
图标关键字的获取
本文档使用的图标来自于 iconify，你可以在其给出的 图标搜索界面 中搜索你想要的图标，然后复制其关键字。
Frontmatter
Frontmatter 是 Markdown 文档开头一段用 --- 包裹起来的内容，其内部使用 yml 语法。通过 Frontmatter，我们可以标识文档的编辑时间，使用的图标，分类，标签等等。
::: details 示例
---
date: 1919-08-10
icon: jam:write-f
order: 1
---
# 文档标题
...
:::
各字段含义如下：
date：文档的编辑时间icon：文档标题旁边的图标order：文档在侧边栏中的排序