Skip to content

Commit 0dc59e8

Browse files
eternalskyJackLian
eternalsky
authored and
JackLian
committed
fix: docs order & some docs lint problems
1 parent 1cfb388 commit 0dc59e8

4 files changed

Lines changed: 30 additions & 25 deletions

File tree

‎docs/docs/guide/expand/editor/parts/partsassets.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ sidebar_position: 4
55

66
## 介绍
77

8-
通过前述介绍，相信大家已经了解如何使用 「[Parts·造物](https://parts.lowcode-engine.cn/)」 来将已有的 React 组件快速接入低代码引擎，以及生产低代码组件。
8+
通过前述介绍，相信大家已经了解如何使用「[Parts·造物](https://parts.lowcode-engine.cn/)」来将已有的 React 组件快速接入低代码引擎，以及生产低代码组件。
99

1010
大家在使用的过程中，可能会希望构建出来的资产包可以后续随时访问下载，或者希望构建资产包时各个组件的版本等信息可以持久化起来并且能够多人维护。
1111

@@ -20,7 +20,7 @@ sidebar_position: 4
2020

2121
- 填写资产包名称
2222
- 配置资产包管理员，管理员拥有该资产包的所有权限，初始默认为资产包的创建者，还可以添加其他人作为管理员，
23-
- 配置资产包描述(可选)
23+
- 配置资产包描述 (可选)
2424
- 点击 `确定`, 即可完成资产包的创建
2525

2626
接下来需要为资产包添加一个或者多个组件。
@@ -43,20 +43,20 @@ sidebar_position: 4
4343
- `开启缓存` : 可充分利用之前的构建结果缓存来加速资产包的生成，我们会将每个组件的构建结果以 包名和版本号为 key 进行缓存。
4444
- `任务描述` : 当前构建任务的一些描述信息。
4545

46-
点击 `确认` 按钮 会自动跳转到当前资产包的构建历史界面:
46+
点击 `确认` 按钮 会自动跳转到当前资产包的构建历史界面：
4747
![image.png](https://img.alicdn.com/imgextra/i2/O1CN01krDaFc1TuTztMPssI_!!6000000002442-2-tps-1726-696.png)
48-
构建历史界面会显示当前资产包所有的构建历史记录，表格状态栏展示了构建的状态：`成功`,`失败`,`正在运行` 三种状态， 操作列可以在构建成功时复制或者下载资产包结果
48+
构建历史界面会显示当前资产包所有的构建历史记录，表格状态栏展示了构建的状态：`成功`,`失败`,`正在运行` 三种状态，操作列可以在构建成功时复制或者下载资产包结果
4949

5050
## 使用资产包
51-
你可以在 [lowcode-demo](https://github.com/alibaba/lowcode-demo) 中直接引用，可直接替换demo中原来的资产包文件：
51+
你可以在 [lowcode-demo](https://github.com/alibaba/lowcode-demo) 中直接引用，可直接替换 demo 中原来的资产包文件：
5252
例如，在 [demo-lowcode-component](https://github.com/alibaba/lowcode-demo/tree/main/demo-lowcode-component) 中，直接用你的资产包文件替换文件[assets.json](https://github.com/alibaba/lowcode-demo/blob/main/demo-lowcode-component/src/services/assets.json)，即可快速使用自己的物料了。
5353

5454
### 在编辑器中使用资产包
5555
在使用含有低代码组件的资产包注意 注意引擎版本必须大于等于 `1.1.0-beta.9`。
5656
然后直接替换 [lowcode-demo](https://github.com/alibaba/lowcode-demo) demo 中的 `assets.json` 文件即可。
5757

5858
### 在预览中使用资产包
59-
在预览中使用资产包的整体思路是从 `资产包` 中提取并转换出 `ReactRenderer` 渲染所需要的 react 组件列表(`components` 参数)，然后将 `schema` 以及 `components` 传入到 `ReactRenderer` 中进行渲染，需要注意的是，在 `资产包` 的转换过程中，我们也需要将 `低代码组件` 转换成 react 组件， 具体逻辑可以参考下 [demo-lowcode-component](https://github.com/alibaba/lowcode-demo/tree/main/demo-lowcode-component) 中 `src/parse-assets.ts` 文件的实现。
59+
在预览中使用资产包的整体思路是从 `资产包` 中提取并转换出 `ReactRenderer` 渲染所需要的 react 组件列表 (`components` 参数)，然后将 `schema` 以及 `components` 传入到 `ReactRenderer` 中进行渲染，需要注意的是，在 `资产包` 的转换过程中，我们也需要将 `低代码组件` 转换成 react 组件，具体逻辑可以参考下 [demo-lowcode-component](https://github.com/alibaba/lowcode-demo/tree/main/demo-lowcode-component) 中 `src/parse-assets.ts` 文件的实现。
6060
基于资产包进行预览的整体逻辑如下： [详见](https://github.com/alibaba/lowcode-demo/blob/main/demo-lowcode-component/src/preview.tsx)：
6161
```ts
6262
import ReactDOM from 'react-dom';
@@ -125,7 +125,7 @@ const SamplePreview = () => {
125125
ReactDOM.render(<SamplePreview />, document.getElementById('ice-container'));
126126
```
127127

128-
从资产包中解析 react 组件列表的逻辑如下, [详见](https://github.com/alibaba/lowcode-demo/blob/main/demo-lowcode-component/src/parse-assets.ts)：
128+
从资产包中解析 react 组件列表的逻辑如下，[详见](https://github.com/alibaba/lowcode-demo/blob/main/demo-lowcode-component/src/parse-assets.ts)：
129129
```ts
130130
import { ComponentDescription, ComponentSchema, RemoteComponentDescription } from '@alilc/lowcode-types';
131131
import { buildComponents, AssetsJson, AssetLoader } from '@alilc/lowcode-utils';

‎docs/docs/guide/expand/editor/parts/partslcc.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,17 @@ sidebar_position: 2
55
## 什么是低代码组件
66
我们先了解一下什么是低代码组件，为什么要用低代码组件。
77

8-
低代码组件是通过可视化的方式生产的组件，这些组件既可以用于低代码搭建体系，也可以用于ProCode开发体系（后续迭代）。
8+
低代码组件是通过可视化的方式生产的组件，这些组件既可以用于低代码搭建体系，也可以用于 ProCode 开发体系（后续迭代）。
99

1010
那么为什么我们要使用低代码的形式来开发组件：
11-
* <font color="red"><b>首先</b></font>：<b>轻快</b>，低代码组件只需通过浏览器秒级完成初始化工作，不需要ProCode繁重的环境准备；<b>环境一致（低代码环境）</b>，同时能够保证物料的开发环境和真实的运行环境是一致的，不会存在开发和运行环境不一致的问题。
11+
* <font color="red"><b>首先</b></font>：<b>轻快</b>，低代码组件只需通过浏览器秒级完成初始化工作，不需要 ProCode 繁重的环境准备；<b>环境一致（低代码环境）</b>，同时能够保证物料的开发环境和真实的运行环境是一致的，不会存在开发和运行环境不一致的问题。
1212
* <font color="red"><b>其次</b></font>：<b>通用能力可视化方式抽象，提升研发效能</b>，比如获取远程数据、视图开发、依赖管理、生命周期、事件绑定等功能。
1313

14-
<font color="red">低代码组件不是用来替代 ProCode 的开发方式</font>，而是让开发者可以从ProCode中重复的工作脱离出来，抽象更多业务垂直的能力，从而起到提效的作用。
14+
<font color="red">低代码组件不是用来替代 ProCode 的开发方式</font>，而是让开发者可以从 ProCode 中重复的工作脱离出来，抽象更多业务垂直的能力，从而起到提效的作用。
1515

1616
## 创建组件
1717

18-
环境准备：我们可以通过Parts提供的通用[低代码组件开发环境](https://parts.lowcode-engine.cn/material#/)开发。
18+
环境准备：我们可以通过 Parts 提供的通用[低代码组件开发环境](https://parts.lowcode-engine.cn/material#/)开发。
1919

2020
点击开发新组件 --> 填写组件标题 --> 填写组件名称 --> 点击确定，完成组件创建工作。
2121

@@ -29,13 +29,13 @@ sidebar_position: 2
2929

3030
### 依赖管理
3131

32-
依赖管理用于管理低代码组件本身的依赖（类似于dependencies）。步骤：点击添加组件 --> 选择安装的组件 --> 保存并构建 (需要等待几分钟构建)。
32+
依赖管理用于管理低代码组件本身的依赖（类似于 dependencies）。步骤：点击添加组件 --> 选择安装的组件 --> 保存并构建 (需要等待几分钟构建)。
3333

3434
![](https://img.alicdn.com/imgextra/i4/O1CN01wC9JPK1J9dKLca9wK_!!6000000000986-2-tps-1438-819.png)
3535

3636
### 属性定义
3737

38-
用于定义组件接收外部传入的propTypes，组件内部可以通过<font color="red">this.props.${属性名称}</font>的方式获取属性值。
38+
用于定义组件接收外部传入的 propTypes，组件内部可以通过<font color="red">this.props.${属性名称}</font>的方式获取属性值。
3939

4040
属性定义前建议先阅读 [物料描述详解](https://lowcode-engine.cn/site/docs/guide/expand/editor/metaSpec)、[预置设置器](https://lowcode-engine.cn/site/docs/guide/appendix/setters)。
4141

@@ -45,7 +45,7 @@ sidebar_position: 2
4545

4646
### 生命周期
4747

48-
低代码组件的开发支持componentDidMount、componentDidUpdate、componentDidCatch、componentWillUnmount几个生命周期
48+
低代码组件的开发支持 componentDidMount、componentDidUpdate、componentDidCatch、componentWillUnmount 几个生命周期
4949

5050
![](https://img.alicdn.com/imgextra/i4/O1CN010bnrxJ1oLlujlfFqj_!!6000000005209-2-tps-1438-819.png)
5151

@@ -55,7 +55,7 @@ sidebar_position: 2
5555

5656
![](https://img.alicdn.com/imgextra/i2/O1CN01Tk96vp1xrDeNeIUJD_!!6000000006496-2-tps-1438-820.png)
5757

58-
在低代码应用中使用，组件面板 --> 低代码组件， 找到对应的低代码组件拖入画布即可。
58+
在低代码应用中使用，组件面板 --> 低代码组件，找到对应的低代码组件拖入画布即可。
5959

6060
![](https://img.alicdn.com/imgextra/i2/O1CN01oGHLea1lzDAhZQQVO_!!6000000004889-2-tps-1438-819.png)
6161

‎docs/docs/guide/expand/editor/parts/prototype.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ sidebar_position: 3
5151
#### 给组件增加物料描述
5252

5353
- 打开左侧 Setter 面板
54-
- 按照组件的属性拖入需要 Setter 类型 （如图中组件的width属性，拖入数字Setter）
54+
- 按照组件的属性拖入需要 Setter 类型（如图中组件的 width 属性，拖入数字 Setter）
5555
- 各种 Setter 的介绍可以参看这篇文档：[预置设置器列表](/site/docs/guide/appendix/setters)
5656
- 配置属性的基本信息（如图所示）
5757
- 配置完成后点击右上角的保存
@@ -104,14 +104,14 @@ sidebar_position: 3
104104
第三步：物料描述发布完成后，接下来我们就需要构建出可用的资产包用于低代码应用中。
105105

106106
#### 资产包构建
107-
有两种方式可以构建资产包:
107+
有两种方式可以构建资产包：
108108
- 一种是通过 [`我的资产包`] 资产包管理模块进行整个资产包生命周期的管理，当然也包括资产包的构建，可参考 [资产包管理](./partsassets)
109109
- 一种是通过 [`我的物料`] 组件物料管理模块的 `资产包构建` 进行构建, 具体操作如下：
110110

111111
- 选择需要构建的组件
112112
- 点击构建资产包按钮
113113
- 选择刚刚的物料描述配置
114-
- 开始构建，构建完成后你将得到一份json文件（里面包含了物料描述和umd包），就可以到项目中使用了
114+
- 开始构建，构建完成后你将得到一份 json 文件（里面包含了物料描述和 umd 包），就可以到项目中使用了
115115

116116
#### 资产包使用
117117
详情请参考 [资产包管理](./partsassets#使用资产包)

‎docs/scripts/getDocsFromDir.js‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,14 @@ module.exports = function getDocsFromDir(dir, cateList) {
88
const baseDir = path.join(__dirname, '../docs/');
99
const docsDir = path.join(baseDir, dir);
1010

11+
function isNil(value) {
12+
return value === undefined || value === null;
13+
}
14+
1115
function getMarkdownOrder(filepath) {
12-
const data = matter(fs.readFileSync(filepath, 'utf-8')).data;
13-
return (data || {}).sidebar_position || 100;
16+
const { data } = matter(fs.readFileSync(filepath, 'utf-8'));
17+
const { sidebar_position } = data || {};
18+
return isNil(sidebar_position) ? 100 : sidebar_position;
1419
}
1520

1621
const docs = glob.sync('*.md?(x)', {
@@ -19,17 +24,17 @@ module.exports = function getDocsFromDir(dir, cateList) {
1924
});
2025

2126
const result = docs
22-
.filter(doc => !/^index.md(x)?$/.test(doc))
23-
.map(doc => {
27+
.filter((doc) => !/^index.md(x)?$/.test(doc))
28+
.map((doc) => {
2429
return path.join(docsDir, doc);
2530
})
2631
.sort((a, b) => {
2732
const orderA = getMarkdownOrder(a);
2833
const orderB = getMarkdownOrder(b);
2934

30-
return orderB - orderA;
35+
return orderA - orderB;
3136
})
32-
.map(filepath => {
37+
.map((filepath) => {
3338
// /Users/xxx/site/docs/guide/basic/router.md => guide/basic/router
3439
const id = path
3540
.relative(baseDir, filepath)
@@ -38,7 +43,7 @@ module.exports = function getDocsFromDir(dir, cateList) {
3843
return id;
3944
});
4045

41-
(cateList || []).forEach(item => {
46+
(cateList || []).forEach((item) => {
4247
const { dir, subCategory, ...otherConfig } = item;
4348
const indexList = glob.sync('index.md?(x)', {
4449
cwd: path.join(baseDir, dir),

0 commit comments

Comments
 (0)