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.1
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,280 additions and 712 deletions.
  1. +6 −2 .eslintrc.js
  2. +20 −10 docs/edit/edit-block.md
  3. +302 −0 docs/use/create-react-app.en-US.md
  4. +8 −10 docs/use/{create-react-app.md → create-react-app.zh-CN.md}
  5. +58 −0 docs/use/dumi.md
  6. +2 −1 docs/use/getting-started.md
  7. +2 −2 docs/use/pro.md
  8. +25 −9 docs/use/umi.md
  9. +2 −2 index.text
  10. +18 −17 package.json
  11. +35 −7 site/bisheng.common.config.js
  12. +2 −4 site/bisheng.edit.config.js
  13. +2 −3 site/bisheng.index.config.js
  14. +2 −3 site/bisheng.templates.config.js
  15. +22 −0 site/edit/static/common.less
  16. +1 −1 site/edit/static/edit-influence.less
  17. +2 −2 site/edit/static/edit-list/collapse.less
  18. +49 −35 site/edit/static/edit-list/common.less
  19. +2 −0 site/edit/static/edit-stage.less
  20. +4 −1 site/edit/static/index.less
  21. +19 −0 site/edit/static/login-controller.less
  22. +1 −1 site/edit/static/side-menu.less
  23. +4 −4 site/edit/template/components/EditInfluence.jsx
  24. +5 −4 site/edit/template/components/EditListController.jsx
  25. +41 −94 site/edit/template/components/EditStageController.jsx
  26. +3 −0 site/edit/template/components/Iframe.jsx
  27. +2 −2 site/edit/template/components/ListComponents/CheckboxGroup.jsx
  28. +16 −10 site/edit/template/components/ListComponents/ChildComp.jsx
  29. +3 −3 site/edit/template/components/ListComponents/EditorComp.jsx
  30. +8 −5 site/edit/template/components/ListComponents/EditorOther.jsx
  31. +3 −2 site/edit/template/components/ListComponents/InputGroup.jsx
  32. +28 −19 site/edit/template/components/ListComponents/PropsComp.jsx
  33. +2 −2 site/edit/template/components/MediumEditor.jsx
  34. +10 −6 site/edit/template/components/NavController/HistoryButton.jsx
  35. +8 −4 site/edit/template/components/NavController/NewFileButton.jsx
  36. +66 −46 site/edit/template/components/NavController/PublishModal.jsx
  37. +23 −15 site/edit/template/components/NavController/index.jsx
  38. +51 −47 site/edit/template/components/SideMenu.jsx
  39. +1 −1 site/edit/template/components/StateComponents/ButtonViewComponent/ContentEditView.jsx
  40. +5 −2 site/edit/template/components/StateComponents/ButtonViewComponent/ContentWrapper.jsx
  41. +5 −2 site/edit/template/components/StateComponents/ButtonViewComponent/ImageComp.jsx
  42. +7 −3 site/edit/template/components/StateComponents/ButtonViewComponent/LinkComp.jsx
  43. +3 −2 site/edit/template/components/StateComponents/ButtonViewComponent/MenuComp.jsx
  44. +14 −7 site/edit/template/components/StateComponents/ButtonViewComponent/MenuEditView.jsx
  45. +5 −2 site/edit/template/components/StateComponents/ButtonViewComponent/VideoComp.jsx
  46. +9 −6 site/edit/template/components/StateComponents/EditButtonView.jsx
  47. +2 −3 site/edit/template/components/StateComponents/ListSort.jsx
  48. +13 −7 site/edit/template/components/StateComponents/SwitchSlideView.jsx
  49. +12 −12 site/edit/template/components/saveJsZip.jsx
  50. +57 −66 site/edit/template/layout.jsx
  51. +4 −4 site/edit/template/utils.jsx
  52. +1 −2 site/shared/defaultTemplate.js
  53. +1 −0 site/shared/leancloud.js
  54. +2 −2 site/shared/localStorage.js
  55. +5 −5 site/shared/redux/actions.js
  56. +0 −1 site/shared/redux/reducers/historyEdit.js
  57. +17 −18 site/shared/redux/saga.js
  58. +25 −2 site/shared/utils.js
  59. +0 −1 site/templates/index.js
  60. +19 −1 site/templates/static/common.less
  61. +8 −5 site/templates/template/BottomBar.jsx
  62. +5 −2 site/templates/template/element/Banner0/index.jsx
  63. +0 −1 site/templates/template/element/Banner0/index.less
  64. +5 −2 site/templates/template/element/Banner1/index.jsx
  65. +0 −2 site/templates/template/element/Banner1/template.config.js
  66. +5 −2 site/templates/template/element/Banner2/index.jsx
  67. +0 −1 site/templates/template/element/Content0/index.jsx
  68. +0 −1 site/templates/template/element/Content0/template.config.js
  69. +0 −1 site/templates/template/element/Content10/index.jsx
  70. +0 −2 site/templates/template/element/Content10/template.config.js
  71. +0 −1 site/templates/template/element/Content11/template.config.js
  72. +1 −2 site/templates/template/element/Content12/index.jsx
  73. +1 −2 site/templates/template/element/Content12/template.config.js
  74. +0 −1 site/templates/template/element/Content13/template.config.js
  75. +0 −1 site/templates/template/element/Content2/template.config.js
  76. +0 −1 site/templates/template/element/Content3/index.jsx
  77. +1 −1 site/templates/template/element/Content3/template.config.js
  78. +1 −1 site/templates/template/element/Content4/index.jsx
  79. +8 −4 site/templates/template/element/Content5/index.jsx
  80. +1 −0 site/templates/template/element/Content5/index.less
  81. +1 −1 site/templates/template/element/Content5/template.config.js
  82. +2 −4 site/templates/template/element/Content6/index.jsx
  83. +2 −1 site/templates/template/element/Content7/index.jsx
  84. +0 −2 site/templates/template/element/Content7/template.config.js
  85. +0 −1 site/templates/template/element/Content8/index.jsx
  86. +0 −2 site/templates/template/element/Content8/template.config.js
  87. +0 −1 site/templates/template/element/Content9/index.jsx
  88. +0 −2 site/templates/template/element/Content9/template.config.js
  89. +12 −11 site/templates/template/element/Feature6/index.jsx
  90. +0 −1 site/templates/template/element/Feature6/template.config.js
  91. +0 −1 site/templates/template/element/Feature7/index.jsx
  92. +0 −1 site/templates/template/element/Feature7/template.config.js
  93. +0 −1 site/templates/template/element/Feature8/template.config.js
  94. +0 −1 site/templates/template/element/Footer0/template.config.js
  95. +1 −1 site/templates/template/element/Footer1/index.jsx
  96. +0 −2 site/templates/template/element/Footer1/template.config.js
  97. +1 −2 site/templates/template/element/Nav0/index.jsx
  98. +4 −4 site/templates/template/element/Nav1/index.jsx
  99. +1 −2 site/templates/template/element/Nav2/index.jsx
  100. +6 −1 site/templates/template/element/Nav2/template.config.js
  101. +1 −2 site/templates/template/element/Nav3/index.jsx
  102. +34 −17 site/templates/template/element/Pricing1/index.jsx
  103. +6 −6 site/templates/template/element/Pricing2/index.jsx
  104. +1 −2 site/templates/template/element/Teams1/index.jsx
  105. +0 −1 site/templates/template/element/Teams1/template.config.js
  106. +1 −2 site/templates/template/element/Teams2/index.jsx
  107. +0 −1 site/templates/template/element/Teams2/template.config.js
  108. +2 −3 site/templates/template/element/Teams3/index.jsx
  109. +0 −1 site/templates/template/element/Teams3/template.config.js
  110. +6 −4 site/templates/template/layout.jsx
  111. +1 −1 site/templates/template/other/Point.jsx
  112. +1 −1 site/templates/template/other/otherToString.jsx
  113. +3 −1 site/theme/en-US.js
  114. +1 −1 site/theme/static/antd.less
  115. +18 −0 site/theme/static/common.less
  116. +1 −1 site/theme/static/home/page2.less
  117. +3 −4 site/theme/template/Content/Article.jsx
  118. +3 −2 site/theme/template/Content/EditButton.jsx
  119. +8 −8 site/theme/template/Content/MainContent.jsx
  120. +1 −1 site/theme/template/Home/Page3.jsx
  121. +4 −3 site/theme/template/Home/component/Templates.jsx
  122. +1 −1 site/theme/template/Home/component/WaterfallLayout.jsx
  123. +0 −2 site/theme/template/Home/utils.jsx
  124. +5 −0 site/theme/template/Layout/Footer.jsx
  125. +21 −2 site/theme/template/Layout/Header.jsx
  126. +1 −1 site/theme/template/Other/Cases.jsx
  127. +1 −1 site/theme/template/Other/Download.jsx
  128. +3 −7 site/theme/template/utils.jsx
  129. +3 −1 site/theme/zh-CN.js
  130. +20 −38 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;
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