有道云地址: https://note.youdao.com/share/?id=0a949224cda8c696300f49cd914d97ea&type=note#/
E:\学习记录\Nodejs\Example\ant-design-master\site\bisheng.config.js
odule.exports = {
port: 8001,
source: {
components: './components',
docs: './docs',
changelog: [
'CHANGELOG.zh-CN.md',
'CHANGELOG.en-US.md',
], 导入文件资源
},
theme: './site/theme', ’ 路由地址
htmlTemplate: './site/theme/static/template.html', ‘开始的模板,在这里面导入
![](https://note.youdao.com/share/images/replace-img.png)
const homeTmpl = './template/Home/index';
const contentTmpl = './template/Content/index';
const redirectTmpl = './template/Redirect';
路由指向三个模板
contentTmpl 指向网站的显示正文
![](https://note.youdao.com/share/images/replace-img.png)
E:\学习记录\Nodejs\Example\ant-design-master\site\theme\template\Content\index.jsx
- componentWillUpdate(object nextProps, object nextState)
![](https://note.youdao.com/share/images/replace-img.png)
Content\index.jsx 引入 MainContent.jsx 引入 ComponentDoc.jsx 引入 Demo.jsx
代码的生成效果 是 Demo.jsx中的 通过 preview(React, ReactDOM)生成
这个preview是E:\学习记录\Nodejs\Example\ant-design-master\site\theme\template\Content\index.jsx中生成的
MainContent中 demos带入preview
const mainContainerClass = classNames('main-container', {
'main-container-component': !!props.demos,
});
!!一般用来将后面的表达式强制转换为布尔类型的数据(boolean),也就是只能是true或者false;
htmlTemplate: './site/theme/static/template.html', ‘开始的模板,在这里面导入
在进行载入时,会显示出 ,然后就是根据路由地址选择加载的模板
![](https://note.youdao.com/share/images/replace-img.png)
![](https://note.youdao.com/share/images/replace-img.png)
<script src="{{ root }}index.js"></script>
// Just import style for https://github.com/ant-design/ant-design/issues/3745
const req = require.context('./components', true, /^\.\/[^_][\w-]+\/style\/index\.tsx?$/);
可以使用 require.context() 方法来创建自己的(模块)上下文,这个方法有 3 个参数:要搜索的文件夹目录,是否还应该搜索它的子目录,以及一个匹配文件的正则表达式。
require
.context(
directory
, useSubdirectories =
false
, regExp = /^\.
\//)
![](https://note.youdao.com/share/images/replace-img.png)