对 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.confi

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

inde

x.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);

MainConten

t.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文件夹下,各个组件的Demo

2.如何实现这种,左侧有导航,中间正文,右上角正文的导航,并且正文中,实现各个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. 如何引入代码

Dem

o.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))

)

}

ComponentDo

c.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-cn

pickerGenerator

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

templat

e.html

4.66KB

inde

x.js

2.25KB

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

inde

x.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';

MainConten

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