#  zerod

**Repository Path**: react100/zerod

## Basic Information

- **Project Name**:  zerod
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-11
- **Last Updated**: 2023-12-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# zerod-markdown-webpack

将`src`目录内的`.md`文件编译成生成一个单页面文档，正如所看到当前文档一样。

在`src`目录中可以随意命名`.md`文件。

## 终端命令

> npm run dev 或 npm start ： 启动服务。

> npm run build : 生产打包。

> npm run doc : 当 src 目录每次新增`.md`文件并且新增了@routePath，须执行一次才会触发编译

## 使用

1. npm install
2. 在`src`中添加`.md`写文档
3. npm run dev

## .md 文档编写规则

凡是作为导航页面的`.md`文件内容顶部必须添加如下注释声明 @routePath :

```html
<!-- @routePath: /components/ZbgImage -->
```

> @routePath : 路由路径，必须以"/"开头，与 src/docs.config.js 的 menuData[].path 对应

> 在`npm run dev`服务运行中，每次新增`.md`文件并且新增了@routePath，须执行 `npm run doc`一次才会触发编译

`.md`文件中使用的静态资源如图片等，须放在 `static` 下，在`.md`中引用绝对路径如：`![这个是一张图片](/static/images/banner.png)`

## src/docs.config.js

左侧导航配置的路径按如下注释说明与 @routePath 对应即可

```js
module.exports = {
    publicPath: '/',
    sourceDirs: ['zerod'],
    leftExpandWidth: 280,//侧栏展开时宽度
    author: 'ZGT', //作者
    projectName: 'Zero-desigin', //文档标题
    firstPage: '/start', //强制默认打开的路由地址
    version: '0.0.1', //版本
    //导航配置
    menuData: [
        {
            path: 'start', //一级导航的路径 对应 @routePath: /start
            name: '开始',
            iconClass: 'snippets',
        },

        {
            path: 'components',
            name: '组件',
            iconClass: 'diff',
            children: [
                {
                    path: 'ZbgImage', //二级导航，注：会拼接父节点的path生成 /components/ZbgImage ，好对应 @routePath : /components/ZbgImage
                    name: '图片展示',
                    iconClass: '',
                },
            ],
        },
        {
            path: 'components/Zinfo', //一级导航的路径 对应 @routePath: /components/Zinfo
            name: '信息展示',
            iconClass: 'edit',
        },
    ],
    // 更新日志(以二维数组字符串描述更新日志)
    logs: [],
};
```

## .md 中代码块对应的前端 demo 的编写规则

如果要把`js`或者`jsx`的代码块渲染生成 demo,必须在代码块中添加如下注释,而且必须导出 React 组件(请看代码块内容):

```js
/**
 * @renderMode:inline
 * @componentName: MyComponent
 * @title: demo标题
 * @description : 这是@renderMode:inline的代码块示例
 */
import React from 'react';
//而且必须导出 React 组件
const MyComponent = (props) => {
    return <div>组件内容</div>;
};
export default MyComponent;
```

**注意：切忌在代码块内部出现连续的 ` 符号，如 `` 是会影响截取代码片段的。**

> @renderMode : 渲染组件的位置，可选 inline \| rightModal \| sandbox，当 @renderMode:sandbox 时，会将代码内容放进独立的 iframe 中，适用于写移动端 demo。

> @componentName : export default React 组件的名称，必须以大写首字母开头,当 @componentName : EmptyRender 时不会渲染 demo,只是折叠代码块; 反之,每个代码块的 @componentName 是唯一的，但 @componentName : EmptyRender 可以是多个的。

> @title : demo 的标题。

> @description : demo 的描述 @renderMode:sandbox 中无效。

> @defaultExpanded : 是否默认展开代码块，可选 true \| false

当 @renderMode : rightModal 时还有属性：

> @openBtnName : 按钮的名称

> @scroll : rightModal 内是否启用滚动条，可选 true \| false

如果要在代码块中`import` src 目录的内容，取决于 src/package.json 的"name",如 src/package.json 的"name":"zerod-mypack"，这是 src 目录的别名就是"zerod-mypack"，就可以如下引入 src 目录的资源：

```js
//引入 zerod-mypack 中的资源示例
import mymodule from 'zerod-mypack/mymodule';
import Zform from 'zerod-mypack/components/Zform';
```

## 渲染 demo 的代码块

```jsx
/**
 * @renderMode:rightModal
 * @componentName: MyForm
 * @description : 表单渲染示例
 * @title: 这是@renderMode:rightModal的代码块示例
 */
import React from 'react';
import { Zform, ZcolorPicker, ZpageWrapper } from 'zerod';
import { Input, message, InputNumber, Button } from 'antd';
let hasHide = false;
export default class MyForm extends React.PureComponent {
    items = [
        {
            key: 'serviceCode',
            label: '服务编码',
            render: (form) => {
                return new Promise((resolve) => {
                    setTimeout(() => {
                        resolve(<Input placeholder="请输入服务编码" />);
                    }, 5000);
                });
            },
            //antd的 form.getFieldDecorator的options
            options: () => ({
                //验证规则
                rules: [
                    {
                        required: true,
                        message: '不能为空。',
                    },
                ],
            }),
        },
        {
            key: 'serviceName',
            label: '服务名称',
            render: (form) => {
                return <Input placeholder="请输入服务名称" />;
            },
            //antd的 form.getFieldDecorator的options
            options: {
                //验证规则
                rules: [
                    {
                        required: true,
                        message: '不能为空。',
                    },
                ],
            },
        },
        {
            key: 'colorValue',
            label: '颜色值',
            render: (form) => {
                return <ZcolorPicker className="z-margin-top-4" />;
            },
            //antd的 form.getFieldDecorator的options
            options: {
                //验证规则
                rules: [
                    {
                        required: true,
                        message: '不能为空。',
                    },
                ],
            },
        },
        {
            key: 'serviceRemark',
            label: '服务说明',
            span: { md: 24 },
            render: (form) => {
                return <Input.TextArea rows={2} placeholder="请输入服务说明" />;
            },
            //antd的 form.getFieldDecorator的options
            options: {
                //验证规则
                rules: [
                    {
                        required: true,
                        message: '不能为空。',
                    },
                ],
            },
        },
        {
            key: 'servicePort',
            label: '端口号',
            labelWidth: '80px',
            render: (form) => {
                return <InputNumber min={11110} max={65535} step={10} />;
            },
            //antd的 form.getFieldDecorator的options
            options: {
                //验证规则
                rules: [
                    {
                        required: true,
                        message: '不能为空。',
                    },
                ],
            },
        },
        {
            key: 'myButton',
            label: '按钮',
            render: (form, changeFormItems) => {
                return (
                    <Button
                        type="primary"
                        onClick={() => {
                            const newItems = this.items.slice(0);
                            newItems.splice(4, 1);
                            changeFormItems(hasHide ? this.items : newItems);
                            hasHide = !hasHide;
                        }}
                    >
                        {hasHide ? '显示' : '不显示'}端口号
                    </Button>
                );
            },
        },
        {
            key: 'confProperty',
            label: '默认配置',
            span: 24,
            render: (form) => {
                return <Input.TextArea rows={15} placeholder="请输入默认配置" />;
            },
            //antd的 form.getFieldDecorator的options
            options: {
                //验证规则
                rules: [
                    {
                        required: true,
                        message: '不能为空。',
                    },
                ],
            },
        },
    ];
    defaultValue = {
        serviceCode: '9999',
        serviceRemark: 'llll',
    };
    render() {
        return (
            <ZpageWrapper pageHeader={{ show: false }}>
                <Zform
                    labelLayout="horizontal"
                    values={this.defaultValue}
                    items={this.items}
                    onSubmit={(values) => {
                        return Promise.resolve().then((re) => {
                            message.success('提交成功：' + JSON.stringify(values));
                        });
                    }}
                />
            </ZpageWrapper>
        );
    }
}
```

```jsx
/**
 * @renderMode: sandbox
 * @componentName: SandboxDemo1
 * @title: 这是@renderMode:sandbox的代码块示例
 */
import React from 'react';
import { render } from 'react-dom';
class SandboxDemo1 extends React.PureComponent {
    render() {
        return <div style={{ textAlign: 'center' }}>demo内容</div>;
    }
}
render(<SandboxDemo1 />, document.querySelector('#app'));
```

## 导入其他.md

当一个`.md`内容庞大时，可以把内容分成 n 个`.md`文件来存储，然后导入其他的`.md`文件；

只需任意位置添加如下注释声明 @import :

```html
<!-- @import: /src/components/ZliveForm/docs/demo.md -->
<!-- @import: ./demo.md -->
```

> @import : 相对路径 \| 从根目录开始的绝对路径。

当其他的`.md`是某个代码块中的代码片段时，需要在 其他`.md`内容顶部声明 @fragment :

```html
<!-- @fragment  -->
...以下是代码片段
```

```js
// @horizonKey : fragmentDemo
// @horizonTitle : 代码片段md
const a = 1;
```

```js
// @horizonKey : fragmentDemo
// @horizonTitle : 在代码块中导入md

// @import: ./a.md

const b = a;
```

```js
// @horizonKey : fragmentDemo
// @horizonTitle : 合并后在文档中的代码

// @import: ./a.md
const a = 1;

const b = a;
```

## 代码块的语言样式

支持的语言请查看 [https://prismjs.com/#supported-languages](https://prismjs.com/#supported-languages)

请在`babel.config.js`如下位置添加支持语言样式,然后重启服务 npm run dev

```json
[
    "prismjs",
    {
        "languages": ["javascript", "jsx", "js", "json", "shell", "yaml"],
        "plugins": ["line-numbers"],
        "theme": "tomorrow",
        "css": true
    }
]
```

## 代码块横向组排

在代码块内加入@horizonKey 的注释，存在相同@horizonKey 值的代码块会横向排列一起，示例：

```js
// @horizonKey : reactDiff
// @horizonTitle : 标题1
function diffFunc() {}
```

```js
// @horizonKey : reactDiff
// @horizonTitle : 标题2
const diffFunc = () => {};
```

以上两个代码块的@horizonKey 都是 reactDiff，所以会排列在一起