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

最新推荐文章于 2024-07-25 16:33:55 发布

原创最新推荐文章于 2024-07-25 16:33:55 发布 · 475 阅读

CC 4.0 BY-SA版权

文章标签：

本文档详细介绍了 Ant Design 的配置文件 bisheng.config.js 的各项设置，包括服务器端口、组件路径、文档路径等，并深入探讨了如何利用特定模板实现页面展示，以及通过预览功能展示组件的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 有道云地址: 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 

 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.youkuaiyun.com/cauyahui/article/details/79178334

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

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