贡献文档
当阅读时遇到明显的错误,开发者可以点击每篇文档最下方的 Edit this page 按钮,即会打开 Github 的编辑界面。开发者对文档进行编辑后,就可以提交一个 Pull Request。
如果是较复杂的修改,可以按以下步骤进行操作:
-
fork & clone
fork taro-docs 仓库
clone 个人仓库的 taro-docs 至本地:
git clone https://github.com/{your github name}/taro-docs.git -
编译预览
pnpm install
pnpm run start
- 修改、新增对应文档 文档支持 md 和 mdx 后缀,语法详见 Docusaurus 官网
修改文档 进入 docs 目录,找到对应的文件进行编辑。(必须,对应下个版本的相关文档)
进入 versioned_docs/version-3.x 目录,找到对应的文件进行编辑。(可选,对应3.x 版本的相关文档。不修改则需要等待 Taro 团队更新文档版本后,才会同步到文档的 3.x 版本)
新增文档 新增文档和修改文档类似,首先分别到 docs 和 versioned_docs/version-3.x 目录新增一个文件。然后在 sidebars.js 和 versioned_sidebars/version-3.x-sidebars.json 文件中添加上述新增文件的路径。
Innospots文档采用Docusaurus搭建,文档格式采用Markdown格式编写,文档格式可参考
文档结构说明
文档结构主要分为两部分:文档元数据信息和文档正文内容
文档元数据
文档元数据放在文档的头部,使用以三个破折号开头,以三个破折号结束,中间每一行为一个元数据的信息
文档元数据示例:
id: introduction
title: 文档title名称
tags: ['架构设计','设计思想']
description: 文档简介
slug: /intro
元数据说明,详细使用可参见官网-创建文档章节
元数据字段 | 说明 | 示例 |
---|---|---|
id | 文档的唯一标识,为空是则是当前文档名,不包含md的后缀,唯一标识需要保证在整个工程中文档的唯一性 | writing-guide |
title | 文档标题,最终渲染为html<header> 中的<title> 内容 | 文档编写指南 |
tags | 文档标签,可以为空,添加后将在文档的结束添加标签,标签可用于文档的标签化分组,标签以[] 按逗号分隔添加 | ['使用说明','涉及文档'] |
description | 文档描述,最终渲染为html<header> 的<description> 内容 | 文档描述说明 |
slug | 文档的url连接,为空时文档的链接为不包含扩展名的文件名,有时文档名称不适合做url时,可以定义此字段,重新定义连接地址 | /intro |
文档目录说明
- 所有的文档都放在docs目录下
- 文件夹和文件名称以字母、数字、中划线为命名
- 对文件夹的命名在目录下使用
_category_.json
来描述文件夹名称在导航菜单中的展示名和位置,详细配置说明参见分类目录元数据说明 - 文件夹和文件可以使用数字开头,中划线分隔,在目录展示上将不会展示数字,数字用于在导航菜单的顺序排序
正文格式
- 正文直接使用二级标题,不是使用一级标题
- 文档正文主要使用二级标题,三级标题,无序列表,引用,代码块,表格,图片和连接
- 在二级标题下面通常可使用引用块来对当前标题进行总述说明
- 对复杂的业务逻辑结构可直接使用HTML代码进行展示
- 图片优先使用svg格式图片和jpg格式图片,jpg格式图片在保证清晰度的前提下尽可能压缩大小,避免出现一个页面包含过多的大图片的情况
- 图片统一放在static/img目录下,按文档的目录结构分目录存放,图片名称需要"见名知意",避免使用数字和无实际含义的字符命名;
以下为文档的示例:
## 二级正文标题
> 引用块对当前标题的内容进行总述说明
正文的文字描述说明,如果文字内容过长可以直接换行,展示的内容仍然是连续的,
此行在markdown里面就是是换行的。
Javascript代码展示:
' ```javascript
//这里可以展示JS代码块
' ```
Java的代码结构展示:
' ```java
//这里展示Java的代码片段
' ```
JSON的结构展示:
' ```json
{
"item": "示例"
}
' ```
对多项内容的展示,优先使用无序列表
- 功能描述
- 注意要点
- 列表以无序列表为主
示例效果:
二级正文标题
引用块对当前标题的内容进行总述说明
正文的文字描述说明,如果文字内容过长可以直接换行,展示的内容仍然是连续的, 此行在markdown里面就是是换行的。
Javascript代码展示:
//这里可以展示JS代码块
Java的代码结构展示:
//这里展示Java的代码片段
JSON的结构展示:
{
"item": "示例"
}
对多项内容的展示,优先使用无序列表
- 功能描述
- 注意要点
- 列表以无序列表为主
文档格式说明
文档均使用Markdown格式编写,以下为文档中使用到的格式定义说明,详细文档结构说明可参见官网的对markdown的增强说明
标题格式
要创建标题,请在单词或短语前面添加井号,井号的数量代表了标题的级别。例如,添加三个井号即创建一个三级标题
Markdown | 展示效果 |
---|
Heading level 1 | Heading level 1
Heading level 2 | Heading level 2
Heading level 3 | Heading level 3
Heading level 4 | Heading level 4
Heading level 5 | Heading level 5
段落和换行
使用说明 | Markdown | 展示效果 |
---|---|---|
要创建段落,请使用空白行将一行或多行文本进行分隔 | I really like using Markdown. I think I'll use it to format all of my documents from now on. | I really like using Markdown. I think I'll use it to format all of my documents from now on. |
在一行的末尾添加两个或多个空格,然后按回车键 return ,即可创建一个换行(line break)或新行 <br/> | This is the first line. And this is the second line. | This is the first line. And this is the second line. |
粗体,斜体,下划线
使用说明 | Markdown | 展示效果 |
---|---|---|
粗体为在文字前后各增加两个星号 | **加粗文本** | 加粗文本 |
斜体为在文字前后各增加一个星号 | *斜体文本* | 斜体文本 |
删除线为在文字前后各增加两个波浪线 | ~~删除文本~~ | ~~删除文本~ |
粗斜体为在文字前后各增加三个星号 | *加粗文本* | 粗斜文本 |
块引用
要创建块引用,请在段落前添加一个 > 符号。
> 块引用主要使用在标题下方,用于对当前标题内容进行简述说明使用
>
> 展示多行块,则换行后仍然以 > 为段落开头,中间添加以>开头的空白行
展示效果如下:
块引用主要使用在标题下方,用于对当前标题内容进行简述说明使用
展示多行块,则换行后仍然以 > 为段落开头
有序列表和无序列表
要创建无序列表,请在每个列表项前面添加破折号 - ,缩进一个或多个列表项可创建嵌套列表
- 无序列表1
- 无序列表2
- 无序列表3
- 无序嵌套1
- 无序嵌套2
- 无序嵌套3
展示效果如下:
- 列表1
- 列表2
- 列表3
- 嵌套1
- 嵌套2
- 嵌套3
要创建有序列表,请在每个列表项前添加数字并紧跟一个英文句点。数字不必按数学顺序排列,但是列表应当以数字 1 起始
1. 无序列表1
2. 无序列表2
3. 无序列表3
1. 无序嵌套1
2. 无序嵌套2
3. 无序嵌套3
展示效果如下:
- 无序列表1
- 无序列表2
- 无序列表3
- 无序嵌套1
- 无序嵌套2
- 无序嵌套3
代码块
代码块用于在文档内展示各种语言高亮代码,使用三个反引号`字符+需要高亮的语言名称作为代码块的定义
\```js
var abc = 'hello world.';
\```
\```java
Map<String,String> m = new HashMap<>();
\```
展示效果如下:
var abc = 'hello world.';
Map<String,String> m = new HashMap<>();
for(Entry<String,String> entry:m.entrySet()){
}
代码单词高亮
要将单词或短语表示为代码,请将其包裹在反引号` 中。
`coder`
展示效果如下:
coder
可以在文章中高亮显示,文字高亮内容
分隔线
要创建分隔线,请在单独一行上使用三个或多个破折号 ---
---
连接
要创建链接,请将链接文本括在方括号(例如 [文本链接])中,后面紧跟着括在圆括号中的 URL
[Innospots Home](https://www.innospots.com)
展示效果如下:
访问站点点击Innospots Home
要将 URL 或电子邮件地址快速转换为链接,请将其括在尖括号中
<[email protected]>
<http://www.innospots.com>
展示效果如下:
图片
要添加图片,首先请添加感叹号(!),然后紧跟着是方括号,方括号中可添加替代文本(alt text,即图片显示失败后显示此文本),最后跟着圆括号,圆括号中添加图片资源的路径或 URL。你可以选择在圆括号中的 URL 之后添加标题(即 title 属性)

展示效果如下:
标签组
自带的 Tabs 组件可以直接在 Markdown 文档中使用,将以下代码直接放在文档中
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs>
<TabItem value="apple" label="Apple" default>
This is an apple 🍎
</TabItem>
<TabItem value="orange" label="Orange">
This is an orange 🍊
</TabItem>
<TabItem value="banana" label="Banana">
This is a banana 🍌
</TabItem>
</Tabs>
展示效果:
- Apple
- Orange
- Banana
This is an apple 🍎
This is an orange 🍊
This is a banana 🍌
告示框
除了基本的Markdown语法之外,我们还有一个特殊的警告语法,它用一组3个冒号来包装文本,后面跟着一个表示其类型的标签。
示例:
:::note
Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
:::
:::tip
Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
:::
:::info
Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
:::
:::caution
Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
:::
:::danger
Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
:::
Some content with Markdown syntax
. Check this api
.
Some content with Markdown syntax
. Check this api
.
Some content with Markdown syntax
. Check this api
.
Some content with Markdown syntax
. Check this api
.
Some content with Markdown syntax
. Check this api
.