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

有道云地址: https://note.youdao.com/share/?id=0a949224cda8c696300f49cd914d97ea&type=note#/E:\学习记录\Nodejs\Example\ant-design-master\site\bisheng.config.js

bisheng.config.js

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

index.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

index.jsx

1.06KB
https://www.geek-share.com/detail/2750754860.html

• componentWillUpdate(object nextProps, object nextState)

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

Demo.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://www.geek-share.com/detail/2728016619.html

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

require.context(directory, useSubdirectories = false, regExp = /^\.\//)
阅读更多