📝 docs: fix invalid links, replace absolute links with relative links to reduce coupling

2019-05-09 15:14:07 +08:00 · 2019-05-09 15:14:07 +08:00 · 86d95d8c3c
parent acaec80621
commit 86d95d8c3c
3 changed files with 70 additions and 92 deletions
--- a/docs/advanced.md
+++ b/docs/advanced.md
@ -3,42 +3,39 @@ title: 高级用法
 shortname: advanced
 ---

-在开始阅读之前，希望你已经对阅读 [快速开始文档](/docs/getting-started) 。
+在开始阅读之前，希望你已经阅读 [快速开始文档](./getting-started) 。

 ## 数据作用域

-
-配置中很多地方都可以用变量如： [tpl](#/docs/renderers#tpl) 类型的渲染器、API 中的 Url、FormItem 中的 source 配置、visibleOn、disabledOn 以及 Form 中的 `redirect` 配置等等。
+配置中很多地方都可以用变量如： [tpl](./renderers#tpl) 类型的渲染器、API 中的 Url、FormItem 中的 source 配置、visibleOn、disabledOn 以及 Form 中的 `redirect` 配置等等。

 那么都有哪些数据可以用？这取决于在哪个容器，关于容器中的数据说明如下：

-* `page` 等价于全局变量，因为顶级渲染器就是它，所以下面的所有组件都能用到这个里面的数据。
-    
-    * `amisPage` 当前页面的数据信息，包含标题，id，key 之类的信息。
-    * `amisUser` 当前用户信息，包含邮箱和用户名信息。
-    * `params 中的数据` 如果地址栏中也携带了参数，也会merge到该层的数据中。
-    * `initApi 返回的数据` 如果 page 设置了 `initApi` 那么初始化的时候会从 API 中拉取数据，拉取到的数据可以用于整个页面。
-    
-* `crud` 
+-   `page` 等价于全局变量，因为顶级渲染器就是它，所以下面的所有组件都能用到这个里面的数据。
+    -   `amisPage` 当前页面的数据信息，包含标题，id，key 之类的信息。
+    -   `amisUser` 当前用户信息，包含邮箱和用户名信息。
+    -   `params 中的数据` 如果地址栏中也携带了参数，也会 merge 到该层的数据中。
+    -   `initApi 返回的数据` 如果 page 设置了 `initApi` 那么初始化的时候会从 API 中拉取数据，拉取到的数据可以用于整个页面。
+-   `crud`

-    * 父级 容器中的数据可以直接使用，如 page 容器
-    * `api` 返回的数据，crud 的 api 除了可以返回 `rows` 和 `count` 数据外，其他的数据会被 merge 到数据中，供容器使用。
-    
-* `form`
+    -   父级 容器中的数据可以直接使用，如 page 容器
+    -   `api` 返回的数据，crud 的 api 除了可以返回 `rows` 和 `count` 数据外，其他的数据会被 merge 到数据中，供容器使用。

-    * 父级 容器中的数据可以直接使用，如 page 容器
-    * `initApi` 返回的数据。
-    * FormItem 的数据直接会存入到数据中，而且每次修改都会及时更新。通过 FormItem 设置的 `name` 值获取。
-    
-* `formItem` 表单项中，所在的表单中的数据都能用。
-* `wizard` 同 form
-* `dialog` dialog 由 button 触发弹出，携带的数据根据按钮所在的位置来决定。
-    * form 中弹出则会把 form 中的数据复制份传给 dialog。
-    * crud 中的批量操作按钮。把整个列表数据复制给 dialog。
-    * crud 中的某一项中的按钮，则只会把对应的那一条数据拷贝给 dialog。
-* `servcie` 
-    * 父级 容器中的数据可以直接使用，如 page 容器
-    * 如果配置了  `api`, `api` 返回的数据可以用。
+-   `form`
+
+    -   父级 容器中的数据可以直接使用，如 page 容器
+    -   `initApi` 返回的数据。
+    -   FormItem 的数据直接会存入到数据中，而且每次修改都会及时更新。通过 FormItem 设置的 `name` 值获取。
+
+-   `formItem` 表单项中，所在的表单中的数据都能用。
+-   `wizard` 同 form
+-   `dialog` dialog 由 button 触发弹出，携带的数据根据按钮所在的位置来决定。
+    -   form 中弹出则会把 form 中的数据复制份传给 dialog。
+    -   crud 中的批量操作按钮。把整个列表数据复制给 dialog。
+    -   crud 中的某一项中的按钮，则只会把对应的那一条数据拷贝给 dialog。
+-   `servcie`
+    -   父级 容器中的数据可以直接使用，如 page 容器
+    -   如果配置了 `api`, `api` 返回的数据可以用。

 取值过程，也跟 JS 作用域中取值一样，当前作用域中有，则直接返回当前作用域中，如果没有当前作用域没有，会一直往上找，直到找到了为止。如果存在同名变量，则返回就近作用域中数据。

@ -72,28 +69,28 @@ shortname: advanced
            }
        ]
    },
-    
+
    {
        "type": "text",
        "name": "text",
        "placeholder": "类型1 可见",
        "visibleOn": "data.foo == 1"
    },
-         
+
     {
         "type": "text",
         "name": "text2",
         "placeholder": "类型2 不可点",
         "disabledOn": "data.foo == 2"
     },
-               
+
   {
       "type": "button",
       "label": "类型三不能提交",
       "level": "primary",
       "disabledOn": "data.foo == 3"
   }
-     
+
 ]
 ```

@ -157,7 +154,7 @@ shortname: advanced
                "target": "lidong.select"
            }
        },
-        
+
        {
            "type": "select",
            "name": "select",
@ -166,7 +163,7 @@ shortname: advanced
                "method": "get",
                "url": "/api/mock2/options/level2?waitSeconds=1",
                "data": {
-                    "a": "$foo" 
+                    "a": "$foo"
                }
            },
            "desc": "这里只是演示刷新不会真正的过滤。"
@ -175,9 +172,9 @@ shortname: advanced
 }
 ```

-注意，source中的传参是通过 source 中的 data 关联的，不能写在 source 的 url 中，因为如果写了，就会自动监控值的变化而自动刷新，写在 data 里面关联则不会。如果对 source 中的配置规则不了解，请前往 [API 说明](/docs/renderers#api)
+注意，source 中的传参是通过 source 中的 data 关联的，不能写在 source 的 url 中，因为如果写了，就会自动监控值的变化而自动刷新，写在 data 里面关联则不会。如果对 source 中的配置规则不了解，请前往 [API 说明](./renderers#api)

-另外注意 button 的 target 值，正好是这个 form 的 name 值 `lidong` 的 formItem 的 name 值 `select`。当按钮的对象是一个 formItem 时，会出发 formItem 的数据重新拉取。 
+另外注意 button 的 target 值，正好是这个 form 的 name 值 `lidong` 的 formItem 的 name 值 `select`。当按钮的对象是一个 formItem 时，会出发 formItem 的数据重新拉取。

 ### 数据联动

@ -286,4 +283,3 @@ Form 的 target 还可以是另外一个 Form，当 A Form 把自己的数据提
    }
 }
 ```
-
--- a/docs/dev.md
+++ b/docs/dev.md
@ -3,7 +3,7 @@ title: 自定义组件
 shortname: dev
 ---

-AMis 平台中，支持了大部分的[通用组件](/docs/renderers)，基本需求都能满足。针对比较定制的需求，则需要通过在群组内添加自定义组件来实现。
+AMis 平台中，支持了大部分的[通用组件](./renderers)，基本需求都能满足。针对比较定制的需求，则需要通过在群组内添加自定义组件来实现。

 ## 如何添加

@ -13,8 +13,8 @@ AMis 平台中，支持了大部分的[通用组件](/docs/renderers)，基本

 ![图片](http://bos.nj.bpc.baidu.com/v1/agroup/e3619506735bbec17ea83da71944fc447d709de4)

-* `组件名` 随意。
-* `组件代码` React Component 代码。
+-   `组件名` 随意。
+-   `组件代码` React Component 代码。

 ## 如何开发?

@ -30,35 +30,32 @@ import {FormItem} from 'amis';
 import * as cx from 'classnames';

@FormItem({
-  type:'custom-checkbox'
+    type: 'custom-checkbox',
 })
-export default class CustomCheckbox extends React.PureComponent{
+export default class CustomCheckbox extends React.PureComponent {
    toggle = () => {
-        const {
-            value,
-            onChange
-        } = this.props;
+        const {value, onChange} = this.props;

        onChange(!value);
    };

    render() {
-        const {
-            value
-        } = this.props;
+        const {value} = this.props;
        const checked = !!value;

        return (
            <div>
-                <a 
+                <a
                    className={cx('btn btn-default', {
                        'btn-success': checked,
-                    })} 
+                    })}
                    onClick={this.toggle}
-                >{checked ? '已勾选' : '请勾选'}</a>
+                >
+                    {checked ? '已勾选' : '请勾选'}
+                </a>
                <div className="inline m-l-xs">{checked ? '已勾选' : '请勾选'}</div>
            </div>
-        )
+        );
    }
 }
 ```
@ -88,24 +85,18 @@ export default class CustomCheckbox extends React.PureComponent{

 ### Renderer

-非表单类的组件自定义，主要通过 `Renderer` 实现。在开始阅读之前，请先阅读 [AMis 工作原理](/docs/sdk#工作原理)。
+非表单类的组件自定义，主要通过 `Renderer` 实现。在开始阅读之前，请先阅读 [AMis 工作原理](./sdk#工作原理)。

 ```jsx
 import * as React from 'react';
-import {
-    Renderer
-} from 'amis';
+import {Renderer} from 'amis';

@Renderer({
    test: /(^|\/)my\-renderer$/,
 })
 class CustomRenderer extends React.Component {
    render() {
-        const  {
-            tip,
-            body,
-            render
-        } = this.props;
+        const {tip, body, render} = this.props;

        return (
            <div>
@ -127,7 +118,6 @@ class CustomRenderer extends React.Component {

 请注意 `this.props` 中的 `render` 方法，它用来实现容器功能，通过它可以让使用者动态的配置其他渲染模型。

-
 ## 工具

 目前主要提供以下工具。
@ -135,47 +125,39 @@ class CustomRenderer extends React.Component {
 ### fetch

 ```jsx
-import {
-    fetch
-} from 'amis/utils';
+import {fetch} from 'amis/utils';
 ```

 用来做 ajax 请求。参数说明

-* `api` 字符串或者 api 对象，如： {url: 'http://www.baidu.com', method: 'get'}, api 地址支持变量。
-* `data` 数据体
+-   `api` 字符串或者 api 对象，如： {url: 'http://www.baidu.com', method: 'get'}, api 地址支持变量。
+-   `data` 数据体

 返回一个 Promise。

-如： 
+如：

 ```js
-import {
-    fetch
-} from 'amis/utils';
+import {fetch} from 'amis/utils';

 fetch('http://www.baidu.com/api/xxx?a=${a}&b=${b}', {
    a: 'aa',
-    b: 'bb'
+    b: 'bb',
 }).then(function(result) {
    console.log(result);
 });
 ```

-### filter 
+### filter

 ```jsx
-import {
-    filter
-} from 'amis/utils';
+import {filter} from 'amis/utils';
 ```

 主要用来做字符替换，如：

 ```js
-import {
-    filter
-} from 'amis/utils';
+import {filter} from 'amis/utils';

 filter('blabla?a={a}', {a: 123}); // => 'blabla?a=123'
-```
+```
--- a/docs/getting_started.md
+++ b/docs/getting_started.md
@ -25,16 +25,16 @@ title: 快速开始

 简单说明以上配置信息。

- `$schema` 这个字段可以忽略，他是指定当前 JSON 配置是符合指定路径 http://amis.baidu.com/v2/schemas/page.json 的 JSON SCHEMA 文件描述的。PS: 编辑器就是靠这个描述文件提示的，可以 hover 到字段上看效果。
- `type` 指定渲染器类型，这里指定的类型为 `page`。 更多渲染器类型可以去[这里面查看](/v2/docs/renderers)。
- `title` 从 title 开始就是对应的渲染模型上的属性了。这里用来指定标题内容。
- `subTitle` 副标题.
- `remark` 标题上面的提示信息
- `aside` 边栏区域内容
- `body` 内容区域的内容
- `toolbar` 工具栏部分的内容
+-   `$schema` 这个字段可以忽略，他是指定当前 JSON 配置是符合指定路径 http://amis.baidu.com/v2/schemas/page.json 的 JSON SCHEMA 文件描述的。PS: 编辑器就是靠这个描述文件提示的，可以 hover 到字段上看效果。
+-   `type` 指定渲染器类型，这里指定的类型为 `page`。 更多渲染器类型可以去[这里面查看](./renderers)。
+-   `title` 从 title 开始就是对应的渲染模型上的属性了。这里用来指定标题内容。
+-   `subTitle` 副标题.
+-   `remark` 标题上面的提示信息
+-   `aside` 边栏区域内容
+-   `body` 内容区域的内容
+-   `toolbar` 工具栏部分的内容

-这里有三个配置都是容器类型的。`aside`、`body` 和 `toolbar`。什么是容器类型？容器类型表示，他能够把其他渲染类型放进来。以上的例子为了简单，直接放了个字符串。字符串类型内部是把他当成了 [tpl](/v2/docs/renderers#tpl) 渲染器来处理，在这里也可以通过对象的形式指定，如以下的例子的 body 区域是完全等价的。
+这里有三个配置都是容器类型的。`aside`、`body` 和 `toolbar`。什么是容器类型？容器类型表示，他能够把其他渲染类型放进来。以上的例子为了简单，直接放了个字符串。字符串类型内部是把他当成了 [tpl](./renderers#tpl) 渲染器来处理，在这里也可以通过对象的形式指定，如以下的例子的 body 区域是完全等价的。

 ```schema:height="100"
 {
@ -403,6 +403,6 @@ title: 快速开始

 这个栗子最主要的渲染器就是 CRUD 渲染器了，他的作用是配置了个 API，把数据拉取过来后，根据配置 columns 信息完成列表展示，列类型可以是静态文本、图片、映射或者日期等等。 `columns` 通过 `name` 与行数据关联。除了展示外还可以放置操作按钮。

-这里相对复杂一点配置就是按钮了，按钮主要是通过 `actionType`来决定用户点下的行为。可以配置成 弹框、发送 ajax、页面跳转、复制内容到剪切板、刷新目标组件等等。具体请参考：[Action 渲染器说明](/v2/docs/renderers#action)
+这里相对复杂一点配置就是按钮了，按钮主要是通过 `actionType`来决定用户点下的行为。可以配置成 弹框、发送 ajax、页面跳转、复制内容到剪切板、刷新目标组件等等。具体请参考：[Action 渲染器说明](./renderers#action)

-更多用法请参考[渲染器手册](/v2/docs/renderers)和示例。
+更多用法请参考[渲染器手册](./renderers)和示例。