对 Ant Design 如何生成网站的解析(2)

有道云地址: https://note.youdao.com/share/?id=0a949224cda8c696300f49cd914d97ea&type=note#/

E:\学习记录\Nodejs\Example\ant-design-master\site\bisheng.config.js

bisheng.confi

g.js

3KB

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', ‘开始的模板，在这里面导入

inde

x.js

2.25KB

const homeTmpl = './template/Home/index';

const contentTmpl = './template/Content/index';

const redirectTmpl = './template/Redirect';

路由指向三个模板

contentTmpl 指向网站的显示正文

E:\学习记录\Nodejs\Example\ant-design-master\site\theme\template\Content\index.jsx

inde

x.jsx

1.06KB

http://www.ruanyifeng.com/blog/2015/03/react.html

• componentWillUpdate(object nextProps, object nextState)

Content\index.jsx 引入 MainContent.jsx 引入 ComponentDoc.jsx 引入 Demo.jsx

Dem

o.jsx

9.94KB

代码的生成效果 是 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', ‘开始的模板，在这里面导入

在进行载入时,会显示出 ,然后就是根据路由地址选择加载的模板

<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?$/);

https://blog.csdn.net/cauyahui/article/details/79178334

可以使用 require.context() 方法来创建自己的（模块）上下文，这个方法有 3 个参数：要搜索的文件夹目录，是否还应该搜索它的子目录，以及一个匹配文件的正则表达式。

require .context( directory , useSubdirectories = false , regExp = /^\. \//)