对 Ant Design 如何生成网站的解析 1

Ant-Design的安装地址 E:\学习记录\Nodejs\Example\ant-design-master有道云地址: https://note.youdao.com/share/?id=3be6f4a942a0f2e1ca7f0193c7eb89a8&type=note#/

"start": "rimraf _site && node ./scripts/generateColorLess.js && cross-env NODE_ENV=development bisheng start -c ./site/bisheng.config.js", http://localhost:8001/

bisheng.config.js

3KB
module.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',

路由信息 theme: './site/theme/index.js

index.js

2.25KB


/childRoutes: index docs/ changelog compnents






const contentTmpl = './template/Content/index';
BiSheng 一个把 Markdown 转为 React 单页网站的工具import collect from 'bisheng/collect';
在MainContent 里面导入网站对应的 MarkDown文件import MainContent from './MainContent'; import * as utils from '../utils';....
export default collect(async (nextProps) => {.....})(MainContent);

MainContent.jsx

8.97KB

function getModuleData(props) { const { pathname } = props.location; const moduleName = /^\/?components/.test(pathname) ? 'components' : pathname.split('/').filter(item => item).slice(0, 2).join('/');
pathname是否包含 /？components
const moduleData = moduleName === 'components' || moduleName === 'docs/react' || moduleName === 'changelog' || moduleName === 'changelog-cn' ? [...props.picked.components, ...props.picked['docs/react'], ...props.picked.changelog] : props.picked[moduleName];
const excludedSuffix = utils.isZhCN(props.location.pathname) ? 'en-US.md' : 'zh-CN.md'; return moduleData.filter(({ meta }) => !meta.filename.endsWith(excludedSuffix));}
其中 'components' : pathname.split('/').filter(item => item).slice(0, 2).join('/'); 通过 pathnam将路由的IP http://localhost:8001/components/button-cn/变为： 'components' : components/button/E:\学习记录\Nodejs\Example\ant-design-master\components\button\demo\

/

1. MainContent如何引入 Compent文件夹下,各个组件的Demo2.如何实现这种,左侧有导航,中间正文,右上角正文的导航,并且正文中,实现各个JSX的效果 如何在正文中实现JSX的效果
<Affix className="toc-affix" offsetTop={16}> ComponentDoc.jsx <ul id="demo-toc" className="toc"> {jumper} </ul> </Affix> 3.Html的模版在哪里引入的 import ComponentDoc from './ComponentDoc'; { props.demos ? <ComponentDoc {...props} doc={localizedPageData} demos={props.demos} /> : <Article {...props} content={localizedPageData} /> } 4.这个网站的设计思路是 什么
5. 如何引入代码

Demo.jsx

9.92KB在MainContent.jsx 引入 ComponentDoc.jsx ->引入Demo.jsx 通过props中的src引入代码文件的地址 <iframe src={src} height={meta.iframe} title="demo" />
const { state } = this; const { props } = this; const { meta, src, content, preview, highlightedCode, style, highlightedStyle, expand, } = props; if (!this.liveDemo) { this.liveDemo = meta.iframe ? <BrowserFrame><iframe src={src} height={meta.iframe} title="demo" /></BrowserFrame> : preview(React, ReactDOM); }
E:\学习记录\Nodejs\Example\ant-design-master\site\theme\template\Content\ComponentDoc.jsx 如何 中通过prop导入到html中 props.utils.toReactComponent { props.utils.toReactComponent( ['section', { className: 'markdown' }] .concat(getChildren(content)) ) }

ComponentDoc.jsx

4.08KB
将Demo push到 const showedDemo = demos.some(demo => demo.meta.only) ? demos.filter(demo => demo.meta.only) : demos.filter(demo => demo.preview); showedDemo.sort((a, b) => a.meta.order - b.meta.order) .forEach((demoData, index) => { const demoElem = ( <Demo {...demoData} key={demoData.meta.filename} utils={props.utils} expand={expand} location={location} /> ); if (index % 2 === 0 || isSingleCol) { leftChildren.push(demoElem); } else { rightChildren.push(demoElem); } });
{this.liveDemo}
if (!this.liveDemo) { this.liveDemo = meta.iframe ? <BrowserFrame><iframe src={src} height={meta.iframe} title="demo" /></BrowserFrame> : preview(React, ReactDOM); }









添加文件夹Button222





有的地方可以加入
有的地方不可以加入

在我开始认为的路由文件中, 就包含了引入文本的程序module.exports = {.....pick: { components(markdownData) { const { filename } = markdownData.meta; if (!/^components/.test(filename) || /[/\\]demo$/.test(path.dirname(filename))) return;
return { meta: markdownData.meta, }; }, changelog(markdownData) { if (/CHANGELOG/.test(markdownData.meta.filename)) { return { meta: markdownData.meta, }; } }, 'docs/pattern': pickerGenerator('pattern'), 'docs/react': pickerGenerator('react'), 'docs/resource': pickerGenerator('resource'), 'docs/spec': pickerGenerator('spec'), },
不知道这个 pick 是什么写法 if (!/^components/.test(filename) || /[/\\]demo$/.test(path.dirname(filename))) return;一般来说，正则中的^表示开头，$表示结束比如 ^\d+$ 匹配的字符串只能是数字，因为他开头结尾都是数字，那么他就只能匹配： 1 、 12、 123....等等\d+$ 这个就匹配结尾是数字：比如 ：abc123^\d+ 就匹配开头是数字，比如：123abc/e/.test("The best things in life are free!") 返回true这个是JS的正则表达式 !/^components/.test(filename) http://www.runoob.com/js/js-regexp.html
=== 是值和类型都要相等 http://www.runoob.com/js/js-comparisons.html
# 前面的IP修改就找不到 后面的乱改还可以打开页面就是不能正常定位了http://localhost:8001/components/button222-cn/#components1123-button-demo-ghost

_____________________________________________________________________________http://localhost:8001/docs/react/use-with-create-react-app-cnpickerGenerator
http://localhost:8001/docs/spec/cases-cn 路由文件中的 pickerGenerator

if (tester.test(filename) &&

!/\/demo$/.test(path.dirname(filename))) {

return {

meta: markdownData.meta,

};

'docs/pattern': pickerGenerator('pattern'),

'docs/react': pickerGenerator('react'),

'docs/resource': pickerGenerator('resource'),

'docs/spec': pickerGenerator('spec'),

http://localhost:8001/components/button222-cn/http://localhost:8001/components/layout-cn/


http://localhost:8001/changelog-cn

template.html

4.66KB

index.js

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

index.jsx

1.06KB
根据路径读取文件const { pathname } = nextProps.location;

判断 是否是中文 http://localhost:8001/components/grid/ 英文 const locale = utils.isZhCN(pathname) ? 'zh-CN' : 'en-US';


import MainContent from './MainContent';

MainContent.jsx

8.97KB
import Article from './Article';

测试的代码来自:E:\学习记录\Nodejs\Example\ant-design-master\components 中
E:\学习记录\Nodejs\Example\ant-design-master\components\tree\demo\basic.md

阅读更多