Skip to main content

贡献文档

当阅读时遇到明显的错误,开发者可以点击每篇文档最下方的 Edit this page 按钮,即会打开 Github 的编辑界面。开发者对文档进行编辑后,就可以提交一个 Pull Request。

如果是较复杂的修改,可以按以下步骤进行操作:

  1. fork & clone

    fork taro-docs 仓库
    clone 个人仓库的 taro-docs 至本地:
    git clone https://github.com/{your github name}/taro-docs.git
  2. 编译预览

   pnpm install
pnpm run start
  1. 修改、新增对应文档 文档支持 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. 无序列表1
  2. 无序列表2
  3. 无序列表3
    1. 无序嵌套1
    2. 无序嵌套2
    3. 无序嵌套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 属性)


![Innospots Logo](/img/logo.png "Innospots Logo")

展示效果如下:

Innospots Logo


标签组

自带的 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>

展示效果:

This is an apple 🍎


告示框

除了基本的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`](#).

:::
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.