Skip to content

Commit

Permalink
modify documents for dt-theme
Browse files Browse the repository at this point in the history
  • Loading branch information
shanshan committed Dec 8, 2020
1 parent e0109ef commit 2fa3016
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 24 deletions.
71 changes: 52 additions & 19 deletions docs/react/develop.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,40 +8,73 @@ title: theme 项目开发指南
项目目录介绍:

```bash
├── bisheng.config.js // bisheng 文档工具基本配置

ant-design-dtinsight-theme
├── components // Components 展示内容
│ └── treeselect // 单个组件 预览文件
│ ├── demo // 代码演示
│ │ ├── basic.md // 单个 demo 文件
│ │ └── shadow.md
│ └── index.zh-CN.md // 组件说明文档
├── docs
│ └── react // 全局说明文档
│ └── react // 全局说明文档
│ ├── change-log.zh-CN.md
│ ├── color.zh-CN.md
│ ├── develop.zh-CN.md
│ ├── font.zh-CN.md
│ └── getting-started.zh-CN.md
└── theme // 本站主题文档
└── dt-theme // 数栈UI规范样式文件
├── breadcrumb.less
├── button.less
├── card.less
├── comm.less
├── const.less
├── const.scss
├── form.less
├── index.less
├── layout.less
├── modal.less
├── notice.less
├── reset.less
├── tab.less
└── table.less
├── theme // 本站主题文档
│ ├── dt-theme // 数栈UI规范样式文件
│ │ ├── dark // 暗黑版规范样式文件
│ │ │ ├── alert.less
│ │ │ ├── button.less
│ │ │ ├── card.less
│ │ │ ├── collapse.less
│ │ │ ├── comm.less
│ │ │ ├── descriptions.less
│ │ │ ├── drawer.less
│ │ │ ├── form.less
│ │ │ ├── index.less
│ │ │ ├── layout.less
│ │ │ ├── list.less
│ │ │ ├── message.less
│ │ │ ├── modal.less
│ │ │ ├── notification.less
│ │ │ ├── popover.less
│ │ │ ├── resetDark.less
│ │ │ ├── steps.less
│ │ │ ├── tab.less
│ │ │ ├── table.less
│ │ │ ├── tree.less
│ │ │ └── upload.less
│ │ ├── default // 基础版规范样式文件
│ │ │ ├── breadcrumb.less
│ │ │ ├── button.less
│ │ │ ├── card.less
│ │ │ ├── comm.less
│ │ │ ├── form.less
│ │ │ ├── index.less
│ │ │ ├── layout.less
│ │ │ ├── modal.less
│ │ │ ├── notice.less
│ │ │ ├── reset.less
│ │ │ ├── tab.less
│ │ │ └── table.less
│ │ ├── const.less // 全局变量文件
│ │ ├── index.less
│ │ └── reset.less // 覆盖antd变量文件
│ ├── static //说明文档样式
│ └── utils
└── bisheng.config.js // bisheng 文档工具基本配置

```

- 以基础版为例

1、 添加样式

规范样式都是放在`/theme/dt-theme`目录下的,可在对应的组件文件或添加新的文件进行样式的添加,特别的新添加的样式文件需要在`/theme/dt-theme/index.less`中导入。(自定义样式名规范见文章末尾)
规范样式都是放在`/theme/dt-theme/default`目录下的,可在对应的组件文件或添加新的文件进行样式的添加,特别的新添加的样式文件需要在`/theme/dt-theme/default/index.less`中导入。(自定义样式名规范见文章末尾)


2、 组件说明文档开发
Expand Down
30 changes: 25 additions & 5 deletions docs/react/getting-started.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,33 +21,53 @@ title: 开发前必读
额外的,依赖的`dt-common`包也需改为升级了 antd 的版本。

> 目前 `未升级dt-common``升级后dt-common` 以及 `ant-design-dtinsight-theme` 版本对应如下:
> - 3.10.3 (未升级 dt-common) -> 4.0.0-alpha.4 (升级后 dt-common) -> 1.0.9 (ant-design-dtinsight-theme) (当前最新版本)
> - 3.10.2 (未升级 dt-common) -> 4.0.0-alpha.3 (升级后 dt-common) -> 1.0.7 (ant-design-dtinsight-theme)
> - 3.10.2 (未升级 dt-common) -> 4.0.0-alpha.2 (升级后 dt-common) -> 1.0.6 (ant-design-dtinsight-theme)
> - 3.10.2 (未升级 dt-common) -> 4.0.0-alpha.1 (升级后 dt-common) -> 1.0.5 (ant-design-dtinsight-theme)
> - 3.10.14 (未升级 dt-common) -> 1.0.9 (ant-design-dtinsight-theme) (当前最新版本)
> - 3.12.1-temp (未升级 dt-common) -> 1.0.9 (ant-design-dtinsight-theme)
> - 4.1.0 (升级后 dt-common) -> 1.0.9 (ant-design-dtinsight-theme)
> - 4.2.1-temp (升级后 dt-common) -> 1.0.9 (ant-design-dtinsight-theme)
##### 1、 package.json 中添加依赖

``` json
{
"dependencies": {
"ant-design-dtinsight-theme": "1.0.2"
"ant-design-dtinsight-theme": "1.0.9"
}
}
```

##### 2、 src/root.tsx 文件中导入 theme/dt-theme 中的 index.less 以及 reset.less

- 其中基础版引入的方式有两种

``` javascript

// 第一种方式
// reset.less中已经引入了antd.less,故在项目中无需再引入antd样式文件
import 'ant-design-dtinsight-theme/theme/dt-theme/reset.less';
import 'ant-design-dtinsight-theme/theme/dt-theme/index.less';

// 第二种方式
// index.less中已经引入了antd.less,故在项目中无需再引入antd样式文件
import 'ant-design-dtinsight-theme/theme/dt-theme/default/index.less';

```

- 如需适配暗黑版样式则引入方式如下

``` javascript

// index.less中已经引入了antd.less,故在项目中无需再引入antd样式文件
import 'ant-design-dtinsight-theme/theme/dt-theme/default/index.less';
import 'ant-design-dtinsight-theme/theme/dt-theme/dark/index.less';

```

**特别的** :数栈子应用中需放弃之前那一套自定义 antd 主题的方式(否则主题样式会被 antd 原样式覆盖),需修改点如下:

- 去掉 css-loader 中关于 antd theme 的相关配置
- 去掉 babel.config 中 antd 样式的按需引入配置
- 基础版本两种引入方式只能存在一种,其中暗黑版本还处于自测阶段,敬请期待

## 可用样式变量

Expand Down
1 change: 1 addition & 0 deletions theme/static/markdown.less
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@
.markdown.dark code {
background: #222433;
border-color: #222433;
color: #ddd;
}

.markdown pre {
Expand Down

0 comments on commit 2fa3016

Please sign in to comment.