Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: ant-design/ant-design-landing
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 3.0.0
Choose a base ref
...
head repository: ant-design/ant-design-landing
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
Loading
Showing with 1,825 additions and 21,858 deletions.
  1. +6 −2 .eslintrc.js
  2. +1 −1 docs/cases.md
  3. +1 −1 docs/download.md
  4. +20 −10 docs/edit/edit-block.md
  5. +302 −0 docs/use/create-react-app.en-US.md
  6. +8 −10 docs/use/{create-react-app.md → create-react-app.zh-CN.md}
  7. +58 −0 docs/use/dumi.md
  8. +2 −1 docs/use/getting-started.md
  9. +2 −2 docs/use/pro.md
  10. +25 −9 docs/use/umi.md
  11. +2 −2 index.text
  12. +0 −20,679 package-lock.json
  13. +21 −20 package.json
  14. +35 −7 site/bisheng.common.config.js
  15. +2 −4 site/bisheng.edit.config.js
  16. +2 −3 site/bisheng.index.config.js
  17. +2 −3 site/bisheng.templates.config.js
  18. +3 −7 site/edit/en-US.js
  19. +22 −0 site/edit/static/common.less
  20. +1 −1 site/edit/static/edit-influence.less
  21. +2 −2 site/edit/static/edit-list/collapse.less
  22. +51 −37 site/edit/static/edit-list/common.less
  23. +2 −0 site/edit/static/edit-stage.less
  24. +4 −1 site/edit/static/index.less
  25. +19 −0 site/edit/static/login-controller.less
  26. +1 −1 site/edit/static/side-menu.less
  27. +4 −4 site/edit/template/components/EditInfluence.jsx
  28. +18 −14 site/edit/template/components/EditListController.jsx
  29. +91 −118 site/edit/template/components/EditStageController.jsx
  30. +24 −5 site/edit/template/components/Iframe.jsx
  31. +2 −2 site/edit/template/components/ListComponents/CheckboxGroup.jsx
  32. +21 −15 site/edit/template/components/ListComponents/ChildComp.jsx
  33. +5 −4 site/edit/template/components/ListComponents/EditorComp.jsx
  34. +8 −5 site/edit/template/components/ListComponents/EditorOther.jsx
  35. +3 −2 site/edit/template/components/ListComponents/InputGroup.jsx
  36. +28 −20 site/edit/template/components/ListComponents/PropsComp.jsx
  37. +8 −6 site/edit/template/components/MediumEditor.jsx
  38. +23 −27 site/edit/template/components/NavController/HistoryButton.jsx
  39. +25 −19 site/edit/template/components/NavController/NewFileButton.jsx
  40. +71 −56 site/edit/template/components/NavController/PublishModal.jsx
  41. +31 −33 site/edit/template/components/NavController/index.jsx
  42. +52 −53 site/edit/template/components/SideMenu.jsx
  43. +1 −1 site/edit/template/components/StateComponents/ButtonViewComponent/ContentEditView.jsx
  44. +1 −1 site/edit/template/components/StateComponents/ButtonViewComponent/ContentEditViewItem.jsx
  45. +5 −2 site/edit/template/components/StateComponents/ButtonViewComponent/ContentWrapper.jsx
  46. +5 −2 site/edit/template/components/StateComponents/ButtonViewComponent/ImageComp.jsx
  47. +7 −3 site/edit/template/components/StateComponents/ButtonViewComponent/LinkComp.jsx
  48. +3 −2 site/edit/template/components/StateComponents/ButtonViewComponent/MenuComp.jsx
  49. +14 −7 site/edit/template/components/StateComponents/ButtonViewComponent/MenuEditView.jsx
  50. +5 −2 site/edit/template/components/StateComponents/ButtonViewComponent/VideoComp.jsx
  51. +9 −6 site/edit/template/components/StateComponents/EditButtonView.jsx
  52. +15 −11 site/edit/template/components/StateComponents/ListSort.jsx
  53. +13 −7 site/edit/template/components/StateComponents/SwitchSlideView.jsx
  54. +15 −14 site/edit/template/components/saveJsZip.jsx
  55. +6 −6 site/edit/template/index.jsx
  56. +71 −83 site/edit/template/layout.jsx
  57. +4 −4 site/edit/template/utils.jsx
  58. +3 −7 site/edit/zh-CN.js
  59. +1 −2 site/shared/defaultTemplate.js
  60. +2 −1 site/shared/leancloud.js
  61. +2 −50 site/shared/localStorage.js
  62. +4 −0 site/shared/redux/actionTypes.js
  63. +20 −5 site/shared/redux/actions.js
  64. +23 −0 site/shared/redux/reducers/historyEdit.js
  65. +2 −0 site/shared/redux/reducers/index.js
  66. +40 −21 site/shared/redux/saga.js
  67. +25 −4 site/shared/utils.js
  68. +0 −1 site/templates/index.js
  69. +23 −1 site/templates/static/common.less
  70. +8 −5 site/templates/template/BottomBar.jsx
  71. +5 −2 site/templates/template/element/Banner0/index.jsx
  72. +0 −1 site/templates/template/element/Banner0/index.less
  73. +31 −23 site/templates/template/element/Banner1/index.jsx
  74. +0 −2 site/templates/template/element/Banner1/template.config.js
  75. +5 −2 site/templates/template/element/Banner2/index.jsx
  76. +1 −1 site/templates/template/element/Banner2/index.less
  77. +0 −1 site/templates/template/element/Content0/index.jsx
  78. +0 −1 site/templates/template/element/Content0/template.config.js
  79. +0 −1 site/templates/template/element/Content10/index.jsx
  80. +0 −2 site/templates/template/element/Content10/template.config.js
  81. +0 −1 site/templates/template/element/Content11/template.config.js
  82. +1 −2 site/templates/template/element/Content12/index.jsx
  83. +1 −2 site/templates/template/element/Content12/template.config.js
  84. +0 −1 site/templates/template/element/Content13/template.config.js
  85. +0 −1 site/templates/template/element/Content2/template.config.js
  86. +0 −1 site/templates/template/element/Content3/index.jsx
  87. +1 −1 site/templates/template/element/Content3/template.config.js
  88. +1 −1 site/templates/template/element/Content4/index.jsx
  89. +8 −4 site/templates/template/element/Content5/index.jsx
  90. +1 −0 site/templates/template/element/Content5/index.less
  91. +1 −1 site/templates/template/element/Content5/template.config.js
  92. +2 −4 site/templates/template/element/Content6/index.jsx
  93. +25 −20 site/templates/template/element/Content7/index.jsx
  94. +0 −2 site/templates/template/element/Content7/template.config.js
  95. +0 −1 site/templates/template/element/Content8/index.jsx
  96. +1 −1 site/templates/template/element/Content8/index.less
  97. +0 −2 site/templates/template/element/Content8/template.config.js
  98. +0 −1 site/templates/template/element/Content9/index.jsx
  99. +3 −0 site/templates/template/element/Content9/index.less
  100. +0 −2 site/templates/template/element/Content9/template.config.js
  101. +13 −12 site/templates/template/element/Feature6/index.jsx
  102. +6 −1 site/templates/template/element/Feature6/template.config.js
  103. +0 −1 site/templates/template/element/Feature7/index.jsx
  104. +0 −1 site/templates/template/element/Feature7/template.config.js
  105. +0 −5 site/templates/template/element/Feature8/index.jsx
  106. +8 −9 site/templates/template/element/Feature8/template.config.js
  107. +0 −1 site/templates/template/element/Footer0/template.config.js
  108. +1 −1 site/templates/template/element/Footer1/index.jsx
  109. +7 −7 site/templates/template/element/Footer1/index.less
  110. +0 −2 site/templates/template/element/Footer1/template.config.js
  111. +1 −2 site/templates/template/element/Nav0/index.jsx
  112. +21 −16 site/templates/template/element/Nav1/index.jsx
  113. +37 −29 site/templates/template/element/Nav2/index.jsx
  114. +6 −1 site/templates/template/element/Nav2/template.config.js
  115. +2 −3 site/templates/template/element/Nav3/index.jsx
  116. +46 −17 site/templates/template/element/Pricing1/index.jsx
  117. +6 −8 site/templates/template/element/Pricing2/index.jsx
  118. +26 −21 site/templates/template/element/Teams0/index.jsx
  119. +1 −2 site/templates/template/element/Teams1/index.jsx
  120. +0 −1 site/templates/template/element/Teams1/template.config.js
  121. +1 −2 site/templates/template/element/Teams2/index.jsx
  122. +0 −1 site/templates/template/element/Teams2/template.config.js
  123. +2 −3 site/templates/template/element/Teams3/index.jsx
  124. +0 −1 site/templates/template/element/Teams3/template.config.js
  125. +31 −20 site/templates/template/layout.jsx
  126. +1 −1 site/templates/template/other/Point.jsx
  127. +1 −1 site/templates/template/other/otherToString.jsx
  128. +4 −2 site/templates/template/utils.jsx
  129. +3 −3 site/theme/en-US.js
  130. +1 −1 site/theme/static/antd.less
  131. +18 −0 site/theme/static/common.less
  132. +1 −1 site/theme/static/home/page2.less
  133. +1 −1 site/theme/static/page/markdown.less
  134. +12 −19 site/theme/template/Content/Article.jsx
  135. +3 −2 site/theme/template/Content/EditButton.jsx
  136. +55 −45 site/theme/template/Content/MainContent.jsx
  137. +1 −1 site/theme/template/Home/Page3.jsx
  138. +4 −3 site/theme/template/Home/component/Templates.jsx
  139. +1 −1 site/theme/template/Home/component/WaterfallLayout.jsx
  140. +0 −2 site/theme/template/Home/utils.jsx
  141. +5 −0 site/theme/template/Layout/Footer.jsx
  142. +21 −2 site/theme/template/Layout/Header.jsx
  143. +5 −6 site/theme/template/Layout/Layout.jsx
  144. +17 −11 site/theme/template/Layout/PhoneNav.jsx
  145. +1 −1 site/theme/template/Other/Cases.jsx
  146. +1 −1 site/theme/template/Other/Download.jsx
  147. +3 −7 site/theme/template/utils.jsx
  148. +3 −3 site/theme/zh-CN.js
  149. +26 −59 site/utils.jsx
8 changes: 6 additions & 2 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -56,7 +56,11 @@ const eslintrc = {
'react/forbid-prop-types': 0,
'react/destructuring-assignment': 0,
'react/no-access-state-in-setstate': 0,
'import/no-cycle': 0
'import/no-cycle': 0,
'react/jsx-props-no-spreading': 0,
'react/state-in-constructor': 0,
'react/static-property-placement': 0,
'react/no-array-index-key': 0,
},
};

@@ -79,4 +83,4 @@ if (process.env.RUN_ENV === 'DEMO') {
});
}

module.exports = eslintrc;
module.exports = eslintrc;
2 changes: 1 addition & 1 deletion docs/cases.md
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@ title:
const casesData = [
{ title: '蚂蚁科技官网', content: '蚂蚁金融科技,数字金融新原力', url: 'https://tech.antfin.com/', img: 'https://gw.alipayobjects.com/zos/rmsportal/vHQCWlZGnFSYiPOnbluw.jpg' },
{ title: 'Ant Design官网', content: '服务于企业级产品的设计体系。', url: 'https://ant.design/', img: 'https://gw.alipayobjects.com/zos/rmsportal/yYQUqTuAxwHzSgGEGqkE.jpg' },
{ title: '云凤蝶', content: '提供专业的云上建站服务,满足不同行业的个性化需求', url: 'https://www.yunfengdie.com/', img: 'https://gw.alipayobjects.com/zos/rmsportal/GezXGXPExUBxdmeOkYvA.jpg' },
{ title: '闪蝶', content: '提供专业的云上建站服务,满足不同行业的个性化需求', url: 'https://morpho.alipay.com/domain-intro', img: 'https://gw.alipayobjects.com/mdn/rms_ae7ad9/afts/img/A*YHa3S5yO6EsAAAAAAAAAAABkARQnAQ' },
{ title: '智能物料设计平台', content: '花更少的时间做更专业的物料', url: 'https://chitu.alipay.com/', img: 'https://gw.alipayobjects.com/zos/rmsportal/aBwXHHpGMhIrnhUPUYVW.jpg' },
];
2 changes: 1 addition & 1 deletion docs/download.md
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@ title:

```__react
const downloadData = [
{ title: '基础模板', content: '百搭型产品 Landing 模板,拼搭自已的专属产品 Landing Page', name: 'basic', url: 'https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Landing.Template.sketch', img: 'https://gw.alipayobjects.com/zos/rmsportal/rTsbUasdHJKVmTgSSWtv.jpg' },
{ title: '基础模板', content: '百搭型产品 Landing 模板,拼搭自已的专属产品 Landing Page', name: 'basic', url: 'https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Landing.Template.sketch', img: 'https://gw.alipayobjects.com/mdn/rms_ae7ad9/afts/img/A*an5vQIKuBLgAAAAAAAAAAABkARQnAQ' },
{ title: 'Ant Design Home 3.0', content: 'Ant Design 首页的源文件', name: 'antd', url: 'https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.home-3.0.sketch', img: 'https://gw.alipayobjects.com/zos/rmsportal/JhuPtNExKmpFjYKxBSZg.jpg' },
{ title: 'Ant Design Landing', content: 'Ant Design Landing 首页的源文件', name: 'landing', url: 'https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Landings.home.noImg.sketch', img: 'https://gw.alipayobjects.com/mdn/rms_ae7ad9/afts/img/A*Ke86RZXx9SkAAAAAAAAAAABjARQnAQ' },
];
30 changes: 20 additions & 10 deletions docs/edit/edit-block.md
Original file line number Diff line number Diff line change
@@ -70,16 +70,21 @@ title:

```__react
import React from 'react';
import { Icon } from 'antd';
import {
PictureOutlined,
PaperClipOutlined,
BarsOutlined,
VideoCameraOutlined,
} from '@ant-design/icons';
const iconData = [
{ icon: 'T', isText: true, content: '编辑当前文字内容。' },
{ icon: 'picture', content: '更改图片' },
{ icon: 'Ty', isText: true, content: 'rc-texty 专属的编辑当前文字内容。' },
{ icon: 'Icon', isText: true, content: 'ant deisgn icon 的编辑,只需输入 icon 的 type。' },
{ icon: 'paper-clip', content: '编辑链接。' },
{ icon: 'bars', content: '导航 Menu 编辑。' },
{ icon: 'video-camera', content: 'video 地址编辑。' },
{ icon: 'T', content: '编辑当前文字内容。' },
{ icon: <PictureOutlined />, content: '更改图片' },
{ icon: 'Ty', content: 'rc-texty 专属的编辑当前文字内容。' },
{ icon: 'Icon', content: 'ant deisgn icon 的编辑,只需输入 icon 的 type。' },
{ icon: <PaperClipOutlined />, content: '编辑链接。' },
{ icon: <BarsOutlined />, content: '导航 Menu 编辑。' },
{ icon: <VideoCameraOutlined />, content: 'video 地址编辑。' },
];
function Demo() {
@@ -89,7 +94,7 @@ function Demo() {
{iconData.map((item, i) => (
<li key={i.toString()}>
<span className="edit-icon-demo">
{item.isText ? item.icon : <Icon type={item.icon} />}
{item.icon}
</span>
{' '}
{item.content}
@@ -150,4 +155,9 @@ ReactDOM.render(<Demo />, mountNode);

<img class="preview-img" align="right" alt="其它功能" src="https://gw.alipayobjects.com/zos/rmsportal/MoOfsnZzXULUYsIOBNlD.jpg">

主要提供:页面锚点功能(`Link 导航` 与此功能相同)和整屏滚动。
主要提供:页面锚点功能(`Link 导航` 与此功能相同)和整屏滚动。


### 导入及导出编辑器内容

如果你需要导入,或者导出编辑器内容,可以点击顶部菜单的小扳手图样,在出来的窗口中。点下载JSON,就是导出编辑数据,然后粘贴JSON数据,实际上就是导入(你之前导出的JSON文件)。
302 changes: 302 additions & 0 deletions docs/use/create-react-app.en-US.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,302 @@
---
order: 1
category: Tutorial
title: Use in create-react-app
---

[create-react-app](https://github.com/facebookincubator/create-react-app) is one of the best tools for React development in the industry. This article shows how to use Ant Design Landing templates inside a project created with create-react-app.

Check out an example project here: [ant-motion/landing-create-react-app-example](https://github.com/ant-motion/landing-create-react-app-example).

## Installation and app creation
To install and start using `create-react-app`, see [create-react-app](https://github.com/facebook/create-react-app) or see antd's [use-with-create-react-app](https://ant.design/docs/react/use-with-create-react-app-cn#%E5%AE%89%E8%A3%85%E5%92%8C%E5%88%9D%E5%A7%8B%E5%8C%96).

The app will have this directory structure:
```
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
│── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── serviceWorker.js
```

## Combining the directories
Copy the `Home` folder from `Landing` directly into the `src` folder of the newly created app:

```diff
├── README.md
├── ...
├── public
│ ├── ...
│── src
+ ├── Home
+ │ ├── less
+ │ ├── index.js
+ │ ├── ...
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── serviceWorker.js
```

## Dependencies
See [Getting Started: Dependencies](docs/use/getting-started#安装依赖) for more details.

### Adding support for `less`
```
npm install react-app-rewired customize-cra less less-loader
```

## Configuring `less-loader`
After installing `less-loader`, change the initialization configuration in the `package.json` file.

```diff
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}
```

## Create `config-overrides.js`
Create a file called `config-overrides.js` at the root of the project to modify its default configuration.

```diff
├── README.md
├── node_modules
├── package.json
├── .gitignore
+── config-overrides.js
├── public
│ ├── ...
│── src
│ ├── Home
│ └── ...
```

### `config-overrides.js`
```js
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
// Load antd
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
// Add `javascriptEnabled` and antd theme configuration
// to the Less loader
addLessLoader({
lessOptions: {
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
}
}),
);
```

> For more advanced configurations, check [antd's advanced configuration](https://ant.design/docs/react/use-with-create-react-app-cn#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE). `eject` is also outside the scope of this article, you can read more about it at the official documentation: [`yarn run eject`](https://github.com/facebookincubator/create-react-app#converting-to-a-custom- setup).
## Modify the entrypoint

Open the `src/index.js` file and import and render the `Home` package.

```diff
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
- import App from './App';
+ import App from './Home';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

```

## All set!
After completing the steps above, run `npm start` to view a live version of the downloaded template.

<div style="width: 100%; height: 1px; background: #e9e9e9"></div>

## Extras
There's no need to follow the next instructions if working on a single-page app.

### Routing

**Example project showcasing a router: [ant-motion/landing-create-react-app-example#router](https://github.com/ant-motion/landing-create-react-app-example/tree/)**

`create-react-app` doesn't provide routes, so we need to install `react-router-dom`.

#### Installation
```
npm install react-router-dom --save
```

#### Configuring the routes
> An example of a basic router can be found at [React Router: Basic Example](https://reacttraining.com/react-router/web/example/basic).
Revert the changes indicated in [Modify the entrypoint](#Modify the entrypoint) and modify `App.js`:

##### `App.js`
Add code for the `Router` and import the `Header` and `Footer` components.

```jsx
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { enquireScreen } from 'enquire-js';
import Header from './Home/Nav0';
import Footer from './Home/Footer0';
import Home from './Home';

import {
Nav00DataSource,
Footer00DataSource,
} from './Home/data.source.js';

let isMobile;
enquireScreen((b) => {
isMobile = b;
});

class App extends Component {
constructor(props) {
super(props);
this.state = {
isMobile,
};
}
componentDidMount() {
// Support for mobile resolutions
enquireScreen((b) => {
this.setState({ isMobile: !!b });
});
}
render() {
return (
<Router>
<div>
<Header dataSource={Nav00DataSource} isMobile={this.isMobile} />
<Route exact path="/" component={Home} />
<Footer dataSource={Footer00DataSource} isMobile={this.isMobile} />
</div>
</Router>
);
}
}

export default App;
```

> Note: instead of using `enquireScreen` as shown above, you can use React Context: [React Context Reference](https://reactjs.org/docs/context.html).
### Adding pages
Download another template from Ant Design Landing and rename its folder, so it doesn't collide with the previous one (`Home`); in the example we use `Page2`. Copy it to `src` (you can remove the `Nav` and `Footer` components from this new folder). Add an entry for this new page at `App.js`:

##### `App.js`
```jsx
import React, { Component } from 'react';
...
import Home from './Home';
+ import Page2 from './Page2';

....

class App extends Component {
...
render() {
return (
<Router>
<div>
<Header dataSource={Nav00DataSource} isMobile={this.isMobile} />
<Route exact path="/" component={Home} />
+ <Route exact path="/page2" component={Page2} />
<Footer dataSource={Footer00DataSource} isMobile={this.isMobile} />
</div>
</Router>
);
}
}

export default App;
```

#### Configuring `Nav0` properties
First modify the `Nav0` file from the `Home` folder.
> You can also put `Nav0` and `Footer0` into a new folder named `Layout`.
##### `./src/Home/Nav0`
```diff
import React from 'react';
...
import { Menu } from 'antd';
+import { Link } from "react-router-dom";

const Item = Menu.Item;

class Header extends React.Component {
....
const navChildren = Object.keys(navData).map((key, i) => (
<Item key={i.toString()} {...navData[key]}>
- <a
+ <Link
{...navData[key].a}
+ href={navData[key].a.href}
+ to={navData[key].a.href}
target={navData[key].a.target}
>
{navData[key].a.children}
- </a>
+ </Link>
</Item>
...
}

export default Header;

```

Modify the value of the property `href` in `data.source.js`:
```diff
export const Nav00DataSource = {
...
Menu: {
className: 'header0-menu',
children: [
- { name: 'item0', a: { children: '导航一', href: '' } },
+ { name: 'item0', a: { children: '导航一', href: '/' } },
- { name: 'item1', a: { children: '导航二', href: '' } },
+ { name: 'item1', a: { children: '导航二', href: '/page2' } },
{ name: 'item2', a: { children: '导航三', href: '' } },
{ name: 'item3', a: { children: '导航四', href: '' } },
],
},
...
};
```

### Router set!
After completing the steps above, run `npm start` again to view a live version of the downloaded template. We can now navigate to different pages.
Loading