diff --git a/README-gl_ES.md b/README-gl_ES.md new file mode 100644 index 00000000..f8117c3e --- /dev/null +++ b/README-gl_ES.md @@ -0,0 +1,50 @@ +

+ + + +

+

Ant Design Landing

+ +
+ +Landing Pages of Ant Design System + +[![Dependencies](https://img.shields.io/david/ant-design/ant-design-landing.svg)](https://david-dm.org/ant-design/ant-design-landing) +[![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design-landing.svg)](https://david-dm.org/ant-design/ant-design-landing?type=dev) + +
+ +
English | 简体中文
+ +## Que é Landing? + +Landing é un modelo construído cos compoñentes animación de Ant Motion. Dispón dun fornecido modelo de páxina de inicio, descargando o paquete de código de modelo pódese empregar rapidamente. Tamén podes usar o editor para crear rapidamente a túa propia páxina dedicada. + +
+ Go Editing 📝 +
+ +## Características + +- [Especificacións](https://landing.ant.design/docs/introduce) +- [Descarga](https://landing.ant.design/docs/download) +- [Responsivo](https://landing.ant.design/docs/guide/layout) + +## Templates + +Hai unha abundante variedade de modelos de páxina para descargar. + +[![](https://user-images.githubusercontent.com/6802825/47977555-ac77b080-e0f3-11e8-90f3-6aa04cce5351.jpg)](http://landing.ant.design) + +## Módulos + +Diversos módulos, para poder configurar de xeito rápido e flexible a plantilla de páxina que desexes. + +
+ +
+ +## Exemplo de angarellos - scaffolding + +- [dva-cli-example](https://github.com/ant-motion/ant-motion-dva-cli-example) +- [umi-example](https://github.com/ant-motion/landing-umi-example) diff --git a/README.md b/README.md index a506b4a1..4e04748c 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@

Ant Design Landing

- + Landing Pages of Ant Design System [![Dependencies](https://img.shields.io/david/ant-design/ant-design-landing.svg)](https://david-dm.org/ant-design/ant-design-landing) diff --git a/docs/cases.gl-ES.md b/docs/cases.gl-ES.md new file mode 100644 index 00000000..b14ad600 --- /dev/null +++ b/docs/cases.gl-ES.md @@ -0,0 +1,22 @@ +--- +order: 3 +title: + zh-CN: 实践案例 + en-US: Case + gl-ES: Caso de estudo +--- + +Actualmente, existen moitos produtos externos creados, se queres tamén podes mostrar túa páxina aquí,，[Mensaxe de benvida](https://github.com/ant-design/ant-motion/issues/30)。 + +```__react +const casesData = [ + { title: 'Ant Technology official website', content: 'Ant fintech，New Forces of Digital Finance', url: 'https://tech.antfin.com/', img: 'https://gw.alipayobjects.com/zos/rmsportal/vHQCWlZGnFSYiPOnbluw.jpg' }, + { title: 'Ant Design Official website', content: 'Sistema de deseño de servizos para produtos empresariais.', url: 'https://ant.design/', img: 'https://gw.alipayobjects.com/zos/rmsportal/yYQUqTuAxwHzSgGEGqkE.jpg' }, + { title: 'Morpho Butterfly', content: 'Ofrecer servizos profesionais de construción de estacións en nube para satisfacer as necesidades individuais de distintas industrias', url: 'https://morpho.alipay.com/domain-intro', img: 'https://gw.alipayobjects.com/mdn/rms_ae7ad9/afts/img/A*YHa3S5yO6EsAAAAAAAAAAABkARQnAQ' }, + { title: 'Plataforma intelixente de deseño de materiais', content: 'Pasa menos tempo facendo máis materiais profesionais', url: 'https://chitu.alipay.com/', img: 'https://gw.alipayobjects.com/zos/rmsportal/aBwXHHpGMhIrnhUPUYVW.jpg' }, +]; + +import React from 'react'; +import Demo from '../site/theme/template/Other/Cases'; +ReactDOM.render(, mountNode); +``` diff --git a/docs/cases.md b/docs/cases.zh-CN.md similarity index 100% rename from docs/cases.md rename to docs/cases.zh-CN.md diff --git a/docs/download.gl-ES.md b/docs/download.gl-ES.md new file mode 100644 index 00000000..bee98c3e --- /dev/null +++ b/docs/download.gl-ES.md @@ -0,0 +1,21 @@ +--- +order: 4 +title: + zh-CN: 设计资源 + en-US: Download Sketch + gl-ES: Descargar bosquexo +--- + +Aquí están os recursos de deseño relacionados coas especificacións de deseño de **Ant Design**. Máis e mellores recursos de deseño están sendo creados e mellorados. + +```__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/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' }, +]; + +import React from 'react'; +import Demo from '../site/theme/template/Other/Download'; +ReactDOM.render(, mountNode); +``` diff --git a/docs/download.md b/docs/download.zh-CN.md similarity index 100% rename from docs/download.md rename to docs/download.zh-CN.md diff --git a/docs/edit/edit-block.gl-ES.md b/docs/edit/edit-block.gl-ES.md new file mode 100644 index 00000000..6acf08d2 --- /dev/null +++ b/docs/edit/edit-block.gl-ES.md @@ -0,0 +1,155 @@ +--- +order: 0 +category: + zh-CN: 编辑器教程 + en-US: Edit-help + gl.ES: Titoría do Editor +title: + zh-CN: 编辑器使用介绍 + en-US: Editor help + gl-ES: Introdución ao uso do Editor +--- + +这里我们将介绍如何使用编辑器与编辑器里的几块功能，如果在编辑过程中遇到任何问题，都可以在我们的 [issue](https://github.com/ant-design/ant-design-landing/issues) 或 `Hotjar` 里反馈。 + +## 区块介绍 + +主要分为四个编辑区块： + +右上角功能条 + +**顶部操作区块** +- 保存：对你当前编辑的代码进行保存。（注：数据库流量有限，请不要时时保存，编辑数据在本地会时时保存） +- 预览：时时查看你当前编辑 +- 下载代码：下载当前编辑的区块代码，我们提供一个 `Home` 的文件包，详细可参考[开始使用](/docs/use/getting-started) +- 编辑数据：保存或粘帖你的编辑 json 数据 +- 新建页面：新建页面或切换你以往新建的页面，下拉菜单上两个按钮功能： + - 直接删除本地数据，更新为线上最后一次保存数据，不同机子上编辑时使用。 + - 删除当前数据。 + +**添加内容区块** +- 添加内容：选择你需要的模块 +- 编辑加密：对编辑器加密（加密功能需要保存，不然无效），加密后将编辑 ID 发送给别人，别人需输入密码才可编辑。 +- 实例 +- 视频教程 +- 查看帮助 + +**内容编辑区块** +- PC 与无线端切换 +- 内容区块编辑：主要编辑区域 + +**样式或其它编辑区块** +- Child、Props 和样式管理编辑: 详细查看下方 +- 其它功能：整屏滚动与锚点 + +## 编辑区域功能介绍 + +### 选中元素后，右上角出现的功能条 + +右上角功能条 + +- select 功能： 展示当前选择元素 ID， 下拉里展示当前元素树状父级元素（可选择）。 +- Icon 区域，我们提供了 7 种 icon 编辑 + + + +```__react +import React from 'react'; +import { Icon } from 'antd'; + +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 地址编辑。' }, +]; + +function Demo() { + return ( +
+
    + {iconData.map((item, i) => ( +
  • + + {item.isText ? item.icon : } + + {' '} + {item.content} +
    • + ))} +
+
+ ); +} +ReactDOM.render(, mountNode); +``` + +### 切换功能条 + +切换功能条 + +切换区块功能，在多图 banner 和多模块介绍里使用，主要功能：切换至下一屏，添加删除与排序区块。 + +### 移动区块功能条 + +移动区块功能条 + +将区块移动到上一屏或下一屏的功能，并且可删除整个区块。 + +## 样式编辑区域功能介绍 + +### 子级内容编辑 + +子级可增删的时候出现在右侧的功能； + +#### 基本子级编辑 + +子级增删 + +添加时默认增加最后一条相同的数据。 + +#### 可选择添加类型 + +子级增删 + +带添加类型的添加功能，此功能只限制于标题上使用。 + +### Props 编辑 + +如果是选择的元素是组件型式，我们提供相关的 props 编辑。 + +props 编辑 + +如 antd 的 Col 组件，可调整栅格大小。 + +### 样式编辑 + +样式编辑 + +调整当前元素的样式可视化编辑。提供主流功能，如没有你想要的功能可以在 `样式代码编辑` 里直接添加 css 样式，必需要添加正确的 css 格式内容，否则下载时将会出现代码格式化错误。 + +### 其它功能 + +其它功能 + +主要提供：页面锚点功能（`Link 导航` 与此功能相同）和整屏滚动。 diff --git a/docs/edit/edit-block.md b/docs/edit/edit-block.zh-CN.md similarity index 100% rename from docs/edit/edit-block.md rename to docs/edit/edit-block.zh-CN.md diff --git a/docs/edit/video.gl-ES.md b/docs/edit/video.gl-ES.md new file mode 100644 index 00000000..1342af91 --- /dev/null +++ b/docs/edit/video.gl-ES.md @@ -0,0 +1,23 @@ +--- +order: 1 +category: + zh-CN: 编辑器教程 + en-US: Edit-help + gl-ES: Axuda do editor +title: + zh-CN: 视频教程 + en-US: Video help + gl-ES: Vídeo Axuda +--- + +```__react +import React from 'react'; +function Demo(){ + return ( +
+
+ ) +} +ReactDOM.render(, mountNode); +``` diff --git a/docs/edit/video.md b/docs/edit/video.zh-CN.md similarity index 100% rename from docs/edit/video.md rename to docs/edit/video.zh-CN.md diff --git a/docs/guide/banner.gl-ES.md b/docs/guide/banner.gl-ES.md new file mode 100644 index 00000000..f85f3fb9 --- /dev/null +++ b/docs/guide/banner.gl-ES.md @@ -0,0 +1,65 @@ +--- +order: 3 +category: + zh-CN: 设计指引 + en-US: Guide + gl-ES: Guía +title: + zh-CN: Banner 首屏 + en-US: Banner + gl-ES: Banner inicial +--- + +O Banner é unha das partes máis importantes que se amosan na páxina. Normalmente amosa o nome do produto, o presenta e reflicte a tendencia xeral do estilo da marca. + +高度为 750px 为例： Banner 一屏的设计尺寸为 1200\*750px，半屏的设计尺寸为 1200\*375px（多用于技术类的产品），主要由单屏和多屏滚动两种类型： +Por exemplo, a altura é de 750 px: o tamaño do deseño da pantalla Banner é de 1200\*750px, e o tamaño da pantalla media é de 1200\*375px (usado principalmente para produtos técnicos). Hai dous tipos de desprazamento -scroll- nunha pantalla e en varias pantallas: + +## Esquema de pantalla única + +Esquema de pantalla única + +1）Imaxe de fondo de pantalla completa; + +2）Os títulos, a redacción e os botóns están centrados na páxina; + +## Esquema de pantalla única 2 + +Esquema de pantalla única 2 + +1）A imaxe principal está no lado esquerdo da páxina, e o título, textos e botóns están no lado dereito da páxina; + +2）Recoméndase que as seccións de copia e botón se deixen aliñadas; + +## Esquema de pantalla única 3 + +Esquema de pantalla única 3 + +1）A imaxe principal está no lado dereito da páxina, e o título, textos e botóns están no lado esquerdo da páxina; + +2）Recoméndase que as seccións de copia e botón se deixen aliñadas; + +## Esquema de pantalla única 4 + +Esquema de pantalla única 4 + +1）A imaxe principal está ao final da páxina; + +2）O título, copia e botón están centrados na páxina; + +## Clase de desprazamento multi-pantalla + +Clase de desprazamento multi-pantalla + +1）Combinación de cabeceiras -Headers- multi-pantalla con carrusel de desprazamento na parte inferior； + +2）Non se recomendan máis de 5 pantallas de desprazamento； + + +## Tipo medio de pantalla + +Tipo medio de pantalla + +1）O tamaño do deseño da pantalla media é 1200*375px； + +2）A disposición e categoría son as mesmas que a pantalla completa（Enumera un deles aquí； diff --git a/docs/guide/banner.md b/docs/guide/banner.zh-CN.md similarity index 100% rename from docs/guide/banner.md rename to docs/guide/banner.zh-CN.md diff --git a/docs/guide/content.gl-ES.md b/docs/guide/content.gl-ES.md new file mode 100644 index 00000000..6b0d15c8 --- /dev/null +++ b/docs/guide/content.gl-ES.md @@ -0,0 +1,77 @@ +--- +order: 4 +category: + zh-CN: 设计指引 + en-US: Guide + gl-ES: Guía +title: + zh-CN: 内容区块 + en-US: Content + gl-ES: Contido +--- + +As páxinas de contido úsanse xeralmente para introducir características, características e información relacionada. Na páxina de visualización pódense seleccionar páxinas de contido (ou unha combinación de varias páxinas de contido)，tamén se pode optar por non engadilo. + +O tamaño mínimo de deseño de cada pantalla é 1200*375px e pódese escoller de xeito libre e flexible varias plantillas para combinar. + +> Referímonos colectivamente a descricións de puntos, socios/clientes, listas de prezos, presentacións de equipos, contactar connosco, etc. como bloques de contido. + + +## Pantalla completa + +Pantalla completa + +1）Imaxe de fondo de pantalla completa； + +2）O título, textos e botón están centrados na páxina； + +## Con dúas columnas 1 + +Con dúas columnas + +1）A imaxe principal de introdución está no lado esquerdo da páxina e a copia do título está no lado dereito da páxina + +2）Título e copia de contido aliñado á esquerda + +## Con dúas columnas 2 + +Con dúas columnas 2 + +1）A imaxe principal de introdución está no lado dereito da páxina e a copia do título está no lado esquerdo da páxina; + +2）O título e o contido da copia quedan aliñados; + +## Líña simple multicolumna + +Líña simple multicolumna + +1）Os bloques de contido divídense uniformemente por cuadrícula； + +2）Pódese colocar unha liña de 3~4 bloques paralelos (non se recomenda máis de 4)； + +## Multi-columna de dúas filas 1 + +Multi-columna de dúas filas 1 + +1）Os bloques de contido divídense uniformemente por cuadrícula； + +2）Pódese colocar unha liña de 2~3 bloques paralelos (non se recomenda máis de 3)； + +## Multi-columna de dúas filas 2 + +Multi-columna de dúas filas 2 + +1）Os bloques de contido divídense uniformemente por cuadrícula； + +2）Pódense colocar de xeito consecutivo entre 3 e 5 áreas de contido (non se recomendan máis de 5)； + + +## Modelo de deseño de media pantalla + +Modelo de deseño de media pantalla + +1）O tamaño medio do deseño de pantalla é 1200*375px； + +2）A disposición e categoría son as mesmas que a pantalla completa (Listando dous deles de novo)； + +Modelo de deseño de media pantalla diff --git a/docs/guide/content.md b/docs/guide/content.zh-CN.md similarity index 100% rename from docs/guide/content.md rename to docs/guide/content.zh-CN.md diff --git a/docs/guide/examples.gl-ES.md b/docs/guide/examples.gl-ES.md new file mode 100644 index 00000000..997e54a8 --- /dev/null +++ b/docs/guide/examples.gl-ES.md @@ -0,0 +1,58 @@ +--- +order: 5 +category: + zh-CN: 设计指引 + en-US: Guide + gl-ES: Guía +title: + zh-CN: 组合示例 + en-US: Examples + gl-ES: Exemplos +--- + +## Exemplos + +Integramos os modelos anteriores en tres modelos de referencia: + +
+
+ +

Exemplo 1

+
+
+ +

Exemplo 2

+
+
+ +

Exemplo 3

+
+
+ + diff --git a/docs/guide/examples.md b/docs/guide/examples.zh-CN.md similarity index 100% rename from docs/guide/examples.md rename to docs/guide/examples.zh-CN.md diff --git a/docs/guide/header-footer.gl-ES.md b/docs/guide/header-footer.gl-ES.md new file mode 100644 index 00000000..3d70c401 --- /dev/null +++ b/docs/guide/header-footer.gl-ES.md @@ -0,0 +1,60 @@ +--- +order: 2 +category: + zh-CN: 设计指引 + en-US: Guide + gl-ES: Guía +title: + zh-CN: 页头与页尾 + en-US: Header and Footer + gl-ES: Cabezallo e Pé de paxina +--- + +页头承载的是品牌信息与整个网站的结构信息，明确的告知我们网站里最主要的几块内容。 + +页尾则是一个网站的落款，提供的相关的产品信息、友情链接与版权信息。 + +## 顶部页头导航 + +顶部导航高度为 64px, 主要展示 logo、基本导航内容、用户相关信息。 我们提供了三种示例供调选： + +### 基本型页头导航 + +基本型页头导航 + +由 logo 与基本导航内容组成。 + +### 用户信息页头导航 + +用户信息页头导航 + +如果有登录信息或其它信息需要在导航展现时，我们可以在导航基本内容右侧添加其它信息。 + +### 单 logo 页头 + +单 logo 页头 + +如果不需要导航时，我们建议将背景设为透明，将 logo 融入首屏里。此处只展示类型。 + +## 页脚 + +Footer（页脚）作为展示页中也非常重要的一部分，在页面的最底部，包含的信息内容为：实用导航，语言选择，社交链接，帮助和支持，版权和隐私声明等。 + +### 单版权信息 + +单版权信息 + +页尾不需要任何信息内容时。 + +### 内容较少 + +内容较少 + +页尾内容比较少时。 + + +### 内容较多 + +内容较多 + +页尾内容比较多时。 diff --git a/docs/guide/header-footer.md b/docs/guide/header-footer.zh-CN.md similarity index 100% rename from docs/guide/header-footer.md rename to docs/guide/header-footer.zh-CN.md diff --git a/docs/guide/layout.gl-ES.md b/docs/guide/layout.gl-ES.md new file mode 100644 index 00000000..816d4220 --- /dev/null +++ b/docs/guide/layout.gl-ES.md @@ -0,0 +1,32 @@ +--- +order: 1 +category: + zh-CN: 设计指引 + en-US: Guide + gl-ES: Guía +title: + zh-CN: 布局 + en-US: Layout + gl-ES: Maquetación +--- + +Ant Design 目前提供了两套布局方案: [Layout](https://ant.design/components/layout-cn/) 和 [Grid](https://ant.design/components/grid-cn/), 同样 Landing 的整体布局也是以 8 的倍数来计算。我们以页面宽度来做整体布局，提供以下两种类型: + +--- + +## 百分比类型 + +100% 类型示例 + +100% 类型，内容的宽度为 92%, 左右边距为 4%; + +需要注意： 在 banner 使用百分比类型布局后，导航必需也使用百分比类型； + + +--- + +## 像素类型 + +像素类型示例 + +以 1152px 为最大宽度为例，为在响应式方面保证更好的预览效果，我们在最大宽度外面增加了 24px 的边距, 避免屏幕尺寸在低于 1152px 的时候内容贴边, 于是需要将内容区域的最大宽度改为 1200px，再增加 24px 的内边距 `padding: 0 24px`。 diff --git a/docs/guide/layout.md b/docs/guide/layout.zh-CN.md similarity index 100% rename from docs/guide/layout.md rename to docs/guide/layout.zh-CN.md diff --git a/docs/guide/type.gl-ES.md b/docs/guide/type.gl-ES.md new file mode 100644 index 00000000..0e780b5d --- /dev/null +++ b/docs/guide/type.gl-ES.md @@ -0,0 +1,52 @@ +--- +order: 0 +category: + zh-CN: 设计指引 + en-US: Guide + gl-ES: Guía +title: + zh-CN: 类型 + en-US: Type + gl-ES: Tipoloxía +--- + +展示类页面（Display Page）一般是指当用户进入某个网站时浏览到的第一个页面，也可以当作着陆页（Landing Page）来吸引用户的注意。在此，我们归纳整理了几种最常见的展示类模板，可以用于灵活的搭配组合。 + +我们对 Landing Page 做了以下两种类型： + +--- + +## 分步浏览 + +分步浏览示例 + +分步浏览展示产品的主要信息，通过精彩的视觉，动效，使用户增加产品认知，提升使用兴趣，提供试用机制，进而达到转化目的 +适用产品范围较广。 + +规范： + +1. 分点阐述：数量不宜过多，建议3-5条。 + +2. CTA：此为转化的重要环节，一定要做的显著，且随时随地都可触达且明确告知用户付出与收获。 + +3. 客户证言：用真实信息，建议有真实个人或公司照片。如非有名客户，建议具体说明帮他解决的问题和使用体验。 + +--- + +## 邀请注册 + +邀请注册示例 + +一屏之内展示出产品卖点或价值主张，突出显示 CTA。主要目的在于快速留住游客，是指直接转化为使用者。 + +常用于功能较为单一，属于社交型、服务型等需要获取用户信息，建立用户联系的产品。 + +规范： + +1. USP：一句话阐述核心竞争力，字体较大，不宜过长，力求简单好记。 + +2. 媒体展示：与 USP 内容相关。如用视频，长度建议1~3分钟。 + +3. CTA 登录/注册：尽量优化注册流程，或提供第三方社交账号登录。 + +4. 不建议在注册前就为用户提供较多的价值和内容。 diff --git a/docs/guide/type.md b/docs/guide/type.zh-CN.md similarity index 100% rename from docs/guide/type.md rename to docs/guide/type.zh-CN.md diff --git a/docs/introduce.gl-ES.md b/docs/introduce.gl-ES.md new file mode 100644 index 00000000..1701a1e4 --- /dev/null +++ b/docs/introduce.gl-ES.md @@ -0,0 +1,78 @@ +--- +order: 0 +title: + zh-CN: 介绍 + en-US: Introduce + gl-ES: Presentación +--- + + + + + +Ant Design Landing é unha solución para a páxina de inicio dun produto. Seguimos con [Valoración do deseño] (https://ant.design) (https://ant.design/docs/spec/introduce-cn), estender Con [Ant Design] (https://ant.design) os [Principios de deseño] (http://ant.design/docs/spec/proximity-cn), pode crear rapidamente a páxina de inicio que desexe e mellorala. Eficiencia no traballo. Coa avaliación continua do "diseñador", continuaremos iterando, precipitando e resumindo gradualmente a implementación do código de máis módulos de página de inicio, elaboraremos as mellores prácticas da páxina de inicio (landing page) e agardamos a túa participación e co-construción. + +## Función + +- Estimular o interese dos usuarios por explorar e seguir visitando en profundidade. +- Dirixir aos usuarios a compra de produtos ou servizos directamente. +- Os usuarios obteñen algúns servizos ou versións de proba proporcionando información persoal ou rexistrándose. +- Os usuarios comparten, comentan ou xeran outras interaccións. + +## Elementos constitutivos + +- Navegación global +- Banner explicativo da primeira pantalla: +   > -USP (unique selling proposition - proposta de venda única) Punto de venda de produto ou proposición de valor: logotipo do produto, nome, slogan, visualización de medios (fondo, imaxe, vídeo). +   > -CTA (Call-To-Action - Chamada á acción): botón de acción, iniciar sesión / rexistrarse. +- Punto por punto: +   > -Características/vantaxes do produto. +   > -Como empregar + funcións básicas + solucións +- Socios / Clientes: casos de éxito, presentacións de clientes, testemuños de clientes. +- Lista de prezos +- Fichas do equipo +- Contáctanos +- Pé de páxina global + +### Animación + +Progresar usando animación [Ant Motion] (https://motion.ant.design) con compoñentes básicos de animación e efectos de transición de banners, usando o compoñente de animación de desprazamento -*'scroll-anim'*- como marco básico de animación -*'basic animation framework'*- e completar os efectos de entrada e saída da páxina co desprazamento -'scrolling'-. + + +- [Compoñente de execución de animación dun único elemento](https://motion.ant.design/components/tween-one) +- [Compoñentes de entrada e saída de estilo](https://motion.ant.design/components/animate) +- [Compoñentes de entrada e saída de colas](https://motion.ant.design/components/queue-anim) +- [Compoñente de animación de textos](https://motion.ant.design/components/texty) +- [Compoñentes de efecto activados co desprazamento](https://motion.ant.design/components/scroll-anim) +- [Compoñentes de mudar efecto do Banner](https://motion.ant.design/components/banner-anim) + +## Recursos de deseño + +Con especificacións de deseño completas, coas mellores prácticas e con arquivos de recursos gráficos(Sketch) para axudar ás empresas a deseñar rapidamente prototipos de produtos de alta calidade. + + +## Quen o está a empregar + +Na actualidade, todos os produtos de Ant Design están construídos co Landing. Se ti ou a túa organización empregan este produto, benvido aos Ant Design Landing Users. Deixa unha mensaxe. 留言。 + + +### Para o deseñador + +Se tes un produto ou es deseñador, podes atopar modelos relacionados ou recursos de deseño para cada módulo, o que mellora moito a eficiencia do deseño e a comunicación. + +### Para o desenvolvedor + +Se es enxeñeiro, só precisas substituír a páxina de inicio do teu proxecto co ficheiro "Home" que acabas de descargar. Para máis detalles, consultar [Traballo con documentos](/docs/use/getting-started)。 + + +## Como contribuír + +Damos a benvida a calquera forma de aportación. Se tes algunha suxestión ou comentario, envíanola [pregunta] ().。 diff --git a/docs/introduce.md b/docs/introduce.zh-CN.md similarity index 100% rename from docs/introduce.md rename to docs/introduce.zh-CN.md diff --git a/docs/use/create-react-app.en-US.md b/docs/use/create-react-app.en-US.md new file mode 100644 index 00000000..4e9a5865 --- /dev/null +++ b/docs/use/create-react-app.en-US.md @@ -0,0 +1,325 @@ +--- +order: 1 +category: + zh-CN: 使用教程 + en-US: Tutorial + gl-ES: Tutoría +title: + zh-CN: create-react-app 里使用 + en-US: Use in create-react-app + gl-ES: Usar en create-react-app +--- + +[create-react-app](https://github.com/facebookincubator/create-react-app) is one of the best React application development tools in the industry. This article will use Ant Design Landing template in the project created by create-react-app . + +To use *demo* visit [landing-create-react-app-example](https://github.com/ant-motion/landing-create-react-app-example); + +## Installation and initialization + +For installation and initialization with `create-react-app` please visit [create-react-app](https://github.com/facebook/create-react-app) or visit Ant documents [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); + +After the installation is complete, the 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 +``` + +## File path + +我们直接将从 `Landing` 上下载的 `Home` 文件夹直接拷贝到 `src` 文件包里; +We will directly copy `Home` folder from the downloaded `Landing` to the `src` file package; + +```diff +├── README.md +├── ... +├── public +│ ├── ... +│── src ++ ├── Home ++ │ ├── less ++ │ ├── index.js ++ │ ├── ... +│ ├── App.css +│ ├── App.js +│ ├── App.test.js +│ ├── index.css +│ ├── index.js +│ ├── logo.svg +│ └── serviceWorker.js +``` +## Install dependencies + +For details, refer to [Installation Dependencies in Getting Started](docs/use/getting-started#安装依赖); + +### less 加载 + +``` +npm install react-app-rewired customize-cra less less-loader +``` + +## 配置加载 less + +安装完 `less 加载` 后， 我们还需要修改 package.json 里的启动配置。 + +```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", +} +``` + +### 创建 `config-overrides.js` + +然后在项目根目录创建一个 `config-overrides.js` 用于修改默认配置。 + +```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( + // 按需加载 antd + fixBabelImports('import', { + libraryName: 'antd', + libraryDirectory: 'es', + style: true, + }), + // 添加加载 less 的 javascriptEnabled 和 antd 的主题配置。 + addLessLoader({ + javascriptEnabled: true, + modifyVars: { '@primary-color': '#1DA57A' }, + }), +); +``` + +> 本文只引用 antd 的[高级配置](https://ant.design/docs/react/use-with-create-react-app-cn#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE)，同样 `eject` 不在本文的讨论范围，`eject` 可以参考 [yarn run eject](https://github.com/facebookincubator/create-react-app#converting-to-a-custom-setup)。 + +## 修改入口文件 + +更改的 `src` 里的 `index.js` 页面，打开 `index.js`，引入 `Home` 文件包并渲染。 + +#### src/index.js + +```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(, 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(); + +``` + +## 完成 + +完成以上步骤之后，我们再启动 `npm start` 即可查看在 landing 上下载的模板。 + +
+ +## 额外内容 + +如果是单个页面的不必要往下看。 + +### 多页面路由 + +**带 router 的 demo 地址[landing-create-react-app-example#router](https://github.com/ant-motion/landing-create-react-app-example/tree/router)** + +`create react app` 并没有路由配置，所以我们需要安装 `react-router-dom`。 + + +#### 安装 + +``` +npm install react-router-dom --save +``` + +#### 配置路由 + +> react-router 基本使用方法可参考 [Basic Example](https://reacttraining.com/react-router/web/example/basic); + +将上述的 [修改入口文件](#修改入口文件) 更改回原始状态，然后对 `APP.js` 进行修改, 详细参考: + +##### App.js + +添加 `Router` 入口和提取 `Header` 和 `Footer。` + +```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() { + // 适配手机屏幕; + enquireScreen((b) => { + this.setState({ isMobile: !!b }); + }); + } + render() { + return ( + +
+
+ +
+
+ + ); + } +} + +export default App; +``` + +> 注： 如果觉得 enquireScreen 多次出现比较不舒服，可以选择用 React Context 或其它来传递，[React Context 详细参考](https://reactjs.org/docs/context.html) + +### 添加面页 + +将 `Landing` 上下载的另一个页面换个名称，如 `Page2`, 拷贝到 `src` 文件包里, 注: 不需要 `Nav` 和 `Footer`， 然后再在 `App.js` 增加入口。 + +##### App.js + +```jsx +import React, { Component } from 'react'; +... +import Home from './Home'; ++ import Page2 from './Page2'; + +.... + +class App extends Component { + ... + render() { + return ( + +
+
+ ++ +
+
+ + ); + } +} + +export default App; +``` + +#### 修改 Nav0 相关参数 + +先修改 `Home` 里的 `Nav0` 文件的标签 + +> 也可以将 `Nav0` 和 `Footer0` 提出放至一个文件包里，，如 `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) => ( + +- + {navData[key].a.children} +- ++ + + ... +} + +export default Header; + +``` + +再修改 `data.source.js` 里的 `href` 值; + +```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 完成 + +完成以上步骤之后，我们再启动 `npm start` 即可查看在 landing 上下载的模板, 通过导航切换的可查看多个页面了。 diff --git a/docs/use/create-react-app.gl-ES.md b/docs/use/create-react-app.gl-ES.md new file mode 100644 index 00000000..5ff66b13 --- /dev/null +++ b/docs/use/create-react-app.gl-ES.md @@ -0,0 +1,328 @@ +--- +order: 1 +category: + zh-CN: 使用教程 + en-US: Tutorial + gl-ES: Tutoría +title: + zh-CN: create-react-app 里使用 + en-US: Use in create-react-app + gl-ES: Usar en create-react-app +--- + +[create-react-app](https://github.com/facebookincubator/create-react-app) é unha das mellores ferramentas de desenvolvemento de aplicacións React da industria. Este produto usa modelos Ant Design Landing en proxectos creados con create-react-app. + +Para usar *demo* verificar o enderezo [landing-create-react-app-example](https://github.com/ant-motion/landing-create-react-app-example); + +## Instalación e inicialización + +Para a instalación e inicialización con `create-react-app` por favor visitar [create-react-app](https://github.com/facebook/create-react-app) ou visitar a documentación de Ant [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); + +Estructura do directorio trala instalación: +``` +├── 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 +``` + +## Ruta do arquivo + +Copiaremos directamente o cartafol `Home` descargado de `Landing` no paquete de ficheiros `src`; + +```diff +├── README.md +├── ... +├── public +│ ├── ... +│── src ++ ├── Home ++ │ ├── less ++ │ ├── index.js ++ │ ├── ... +│ ├── App.css +│ ├── App.js +│ ├── App.test.js +│ ├── index.css +│ ├── index.js +│ ├── logo.svg +│ └── serviceWorker.js +``` +## Instalar dependencias + +Para máis detalles, consulte [Instalación de Dependencias nos Primeiro Pasos](docs/use/getting-started#InstalarDependencias); + +For details, refer to [Installation Dependencies in Getting Started] (docs / use / getting-started # Installation Dependencies); + +### Cargando less + +``` +npm install react-app-rewired customize-cra less less-loader +``` + +## Cargando configuración less + +Despois de instalar `less`, tamén necesitamos modificar a configuración de inicio en package.json + +```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", +} +``` + +### Crear `config-overrides.js` + +A continuación, crea un `config-overrides.js` no directorio raíz do proxecto para modificar a configuración predeterminada. + +```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( + // 按需加载 antd + // Load antd on demand + fixBabelImports('import', { + libraryName: 'antd', + libraryDirectory: 'es', + style: true, + }), + // 添加加载 less 的 javascriptEnabled 和 antd 的主题配置 + // Add javascriptEnabled and antd theme configurations that load less. + addLessLoader({ + javascriptEnabled: true, + modifyVars: { '@primary-color': '#1DA57A' }, + }), +); +``` + +> 本文只引用 antd 的[高级配置](https://ant.design/docs/react/use-with-create-react-app-cn#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE)，同样 `eject` 不在本文的讨论范围，`eject` 可以参考 [yarn run eject](https://github.com/facebookincubator/create-react-app#converting-to-a-custom-setup)。 + +## Modificar o arquivo de entrada + +更改的 `src` 里的 `index.js` 页面，打开 `index.js`，引入 `Home` 文件包并渲染。 + +#### src/index.js + +```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(, 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(); + +``` + +## 完成 + +完成以上步骤之后，我们再启动 `npm start` 即可查看在 landing 上下载的模板。 + +
+ +## 额外内容 + +如果是单个页面的不必要往下看。 + +### 多页面路由 + +**带 router 的 demo 地址[landing-create-react-app-example#router](https://github.com/ant-motion/landing-create-react-app-example/tree/router)** + +`create react app` 并没有路由配置，所以我们需要安装 `react-router-dom`。 + + +#### 安装 + +``` +npm install react-router-dom --save +``` + +#### 配置路由 + +> react-router 基本使用方法可参考 [Basic Example](https://reacttraining.com/react-router/web/example/basic); + +将上述的 [修改入口文件](#修改入口文件) 更改回原始状态，然后对 `APP.js` 进行修改, 详细参考: + +##### App.js + +添加 `Router` 入口和提取 `Header` 和 `Footer。` + +```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() { + // 适配手机屏幕; + enquireScreen((b) => { + this.setState({ isMobile: !!b }); + }); + } + render() { + return ( + +
+
+ +
+
+ + ); + } +} + +export default App; +``` + +> 注： 如果觉得 enquireScreen 多次出现比较不舒服，可以选择用 React Context 或其它来传递，[React Context 详细参考](https://reactjs.org/docs/context.html) + +### 添加面页 + +将 `Landing` 上下载的另一个页面换个名称，如 `Page2`, 拷贝到 `src` 文件包里, 注: 不需要 `Nav` 和 `Footer`， 然后再在 `App.js` 增加入口。 + +##### App.js + +```jsx +import React, { Component } from 'react'; +... +import Home from './Home'; ++ import Page2 from './Page2'; + +.... + +class App extends Component { + ... + render() { + return ( + +
+
+ ++ +
+
+ + ); + } +} + +export default App; +``` + +#### 修改 Nav0 相关参数 + +先修改 `Home` 里的 `Nav0` 文件的标签 + +> 也可以将 `Nav0` 和 `Footer0` 提出放至一个文件包里，，如 `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) => ( + +- + {navData[key].a.children} +- ++ + + ... +} + +export default Header; + +``` + +再修改 `data.source.js` 里的 `href` 值; + +```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 完成 + +完成以上步骤之后，我们再启动 `npm start` 即可查看在 landing 上下载的模板, 通过导航切换的可查看多个页面了。 diff --git a/docs/use/create-react-app.md b/docs/use/create-react-app.zh-CN.md similarity index 98% rename from docs/use/create-react-app.md rename to docs/use/create-react-app.zh-CN.md index 6306c056..1d06b0e7 100644 --- a/docs/use/create-react-app.md +++ b/docs/use/create-react-app.zh-CN.md @@ -3,9 +3,11 @@ order: 1 category: zh-CN: 使用教程 en-US: Tutorial -title: + gl-ES: Tutoría +title: zh-CN: create-react-app 里使用 en-US: Use in create-react-app + gl-ES: Usar en create-react-app --- [create-react-app](https://github.com/facebookincubator/create-react-app) 是业界最优秀的 React 应用开发工具之一，本文会在 create-react-app 创建的工程中使用 Ant Design Landing 的模板。 @@ -172,7 +174,7 @@ npm install react-router-dom --save > react-router 基本使用方法可参考 [Basic Example](https://reacttraining.com/react-router/web/example/basic); -将上述的 [修改入口文件](#修改入口文件) 更改回原始状态，然后对 `APP.js` 进行修改, 详细参考: +将上述的 [修改入口文件](#修改入口文件) 更改回原始状态，然后对 `APP.js` 进行修改, 详细参考: ##### App.js @@ -319,4 +321,4 @@ export const Nav00DataSource = { ``` ### Router 完成 -完成以上步骤之后，我们再启动 `npm start` 即可查看在 landing 上下载的模板, 通过导航切换的可查看多个页面了。 \ No newline at end of file +完成以上步骤之后，我们再启动 `npm start` 即可查看在 landing 上下载的模板, 通过导航切换的可查看多个页面了。 diff --git a/docs/use/dva-cli.md b/docs/use/dva-cli.gl-ES.md similarity index 96% rename from docs/use/dva-cli.md rename to docs/use/dva-cli.gl-ES.md index 2dd86f63..1789085a 100644 --- a/docs/use/dva-cli.md +++ b/docs/use/dva-cli.gl-ES.md @@ -3,9 +3,11 @@ order: 3 category: zh-CN: 使用教程 en-US: Tutorial -title: + gl-ES: Tutoría +title: zh-CN: dva-cli 里使用 en-US: Use in dva + gl-ES: Usar en dva --- [dva](https://github.com/dvajs/dva) 脚手架为 ant design 提供的基于 redux、redux-saga 和 react-router 比较完善的轻量级前端框架，具体教程[请查看](https://github.com/sorrycc/blog/issues/18)。 @@ -85,4 +87,4 @@ dva 里使用 `babel-plugin-import` 我们只需要 `.roadhogrc` 文件里添加 ## 完成 -完成以上频骤之后，我们再启动 `npm start` 即可查看在 landing 上下载的模板。 \ No newline at end of file +完成以上频骤之后，我们再启动 `npm start` 即可查看在 landing 上下载的模板。 diff --git a/docs/use/dva-cli.zh-CN.md b/docs/use/dva-cli.zh-CN.md new file mode 100644 index 00000000..1789085a --- /dev/null +++ b/docs/use/dva-cli.zh-CN.md @@ -0,0 +1,90 @@ +--- +order: 3 +category: + zh-CN: 使用教程 + en-US: Tutorial + gl-ES: Tutoría +title: + zh-CN: dva-cli 里使用 + en-US: Use in dva + gl-ES: Usar en dva +--- +[dva](https://github.com/dvajs/dva) 脚手架为 ant design 提供的基于 redux、redux-saga 和 react-router 比较完善的轻量级前端框架，具体教程[请查看](https://github.com/sorrycc/blog/issues/18)。 + +如何使用 demo 地址请查看 [dva-cli-example](https://github.com/ant-motion/ant-motion-dva-cli-example); + +基本配置请查看 [开始使用](docs/use/getting-started); + +## 文件路径 + +[dva-cli](https://github.com/dvajs/dva-cli) 脚手架的文件目录为 `src/routes`, 首先我们需要将下载的 Home 文件包直接复制到 routes 文件夹下。 + +## 修改路由 + +复制完成后，我们需要将主页入口修改成以上复制的文件目录。 + +```jsx +import IndexPage from './routes/Home'; +``` + +## CSS Modules + +dva 默认使用了 `css-modules`，同样我们提供了两套解决方案。 + +### 关闭 css-modules + +如果你当前项目为新项目，且对 `css-modules` 并不是太了解，可以选择关闭 `css-modules`，只需要在 `.roadhogrc` 文件里加上 `"disableCSSModules": true` 即可。 +```json +{ + "entry": "src/index.js", ++ "disableCSSModules": true, // 加在此处 + "env": { + "development": { + "extraBabelPlugins": [ + "dva-hmr", + "transform-runtime" + ] + }, + "production": { + "extraBabelPlugins": [ + "transform-runtime" + ] + } + }, +} +``` + +### 使用 global + +使用 `css-modules` 的 `global`, 在 `index.less` 里添加 `:global`, 将样式不作转换, `global` 具体使用[请查看开始使用](/docs/use/getting-started#样式)。 + + +## 按需加载 + +dva 里使用 `babel-plugin-import` 我们只需要 `.roadhogrc` 文件里添加 `["import", { "libraryName": "antd", "style": true }]` 即可。 + +```json + +{ + "entry": "src/index.js", + "env": { + "development": { + "extraBabelPlugins": [ + "dva-hmr", + "transform-runtime", + ["import", { "libraryName": "antd", "style": true }] + ] + }, + "production": { + "extraBabelPlugins": [ + "transform-runtime", + ["import", { "libraryName": "antd", "style": true }] + ] + } + }, +} +``` + +## 完成 + +完成以上频骤之后，我们再启动 `npm start` 即可查看在 landing 上下载的模板。 diff --git a/docs/use/getting-started.md b/docs/use/getting-started.gl-ES.md similarity index 70% rename from docs/use/getting-started.md rename to docs/use/getting-started.gl-ES.md index 2f191530..826698df 100644 --- a/docs/use/getting-started.md +++ b/docs/use/getting-started.gl-ES.md @@ -3,35 +3,38 @@ order: 0 category: zh-CN: 使用教程 en-US: Tutorial -title: + gl-ES: Tutoría +title: zh-CN: 开始使用 en-US: Getting-started + gl-ES: Escomenzar --- -Landing 编辑器里下载的文件为 Home 文件包，导出的文件为 [React](https://reactjs.org/) 文件 `.jsx`， 样式采用的为 [less](http://lesscss.org/) 文件 `.less`， 如遇到问题时，建议先学习一下相关的语言特性，再前往 [Landing issues](https://github.com/ant-design/ant-design-landing/issues) 提问。 +Os arquivos descargados no editor Landing son paquetes de inicio. O arquivo exportado é un arquivo [React] (https://reactjs.org/) `.jsx`. O estilo é un arquivo [Less] (http://lesscss.org/) `.less`. Se atopas problemas, recoméndase primeiro aprender as características relevantes da(s) linguaxe(s). Inda así poderás ir a [Landing issues] (https://github.com/ant-design/ant-design-landing/issues) para facer preguntas. -## 目录结构 +## Estrutura do directorio ``` |── less | └── index.less -| └── common.less # 通用样式 -| └── content.less # 内容模块通用样式 -| └── custom.less # less 变量文件 -| └── edit.less # 编辑器里编辑后生成的样式 -| └── Banner0.less * # 相关模块样式 +| └── common.less # 通用样式 Estilo universal +| └── content.less # 内容模块通用样式 Módulo de contido estilo común +| └── custom.less # less 变量文件 Arquivo variable +| └── edit.less # 编辑器里编辑后生成的样式 Estilo xerado trala edición no editor +| └── Banner0.less * # 相关模块样式 Estilos de módulos relacionados | └── Content0.less * | ... -|── data.source.js # 内容数据文件 -|── index.js # 主入口 -|── Banner0.jsx * # 相关模块 +|── data.source.js # 内容数据文件 Arquivo de datos de contido +|── index.js # 主入口 Entrada principal +|── Banner0.jsx * # 相关模块 Módulos relacionados |── Content0.jsx * | ... ``` -> 以上加 * 号为可配置内容，当你在编辑器里选择了哪些模块，那么将对应出现相对的文件。 +> Os * asteriscos anteriores son contido configurable. Cando se seleccionan os módulos no editor, a continuación aparecerá o ficheiro correspondente. -### 数据文件 + +### Arquivo de datos - data.source.js ```jsx @@ -98,7 +101,7 @@ npm install babel-plugin-import --save-dev; ``` -## 样式 +## Estilo Ant Design Landing 默认使用 less 作为样式语言，整个文件的 less 没使用 `css-modules` 需直接使用。 diff --git a/docs/use/getting-started.zh-CN.md b/docs/use/getting-started.zh-CN.md new file mode 100644 index 00000000..826698df --- /dev/null +++ b/docs/use/getting-started.zh-CN.md @@ -0,0 +1,122 @@ +--- +order: 0 +category: + zh-CN: 使用教程 + en-US: Tutorial + gl-ES: Tutoría +title: + zh-CN: 开始使用 + en-US: Getting-started + gl-ES: Escomenzar +--- + +Os arquivos descargados no editor Landing son paquetes de inicio. O arquivo exportado é un arquivo [React] (https://reactjs.org/) `.jsx`. O estilo é un arquivo [Less] (http://lesscss.org/) `.less`. Se atopas problemas, recoméndase primeiro aprender as características relevantes da(s) linguaxe(s). Inda así poderás ir a [Landing issues] (https://github.com/ant-design/ant-design-landing/issues) para facer preguntas. + +## Estrutura do directorio + +``` +|── less +| └── index.less +| └── common.less # 通用样式 Estilo universal +| └── content.less # 内容模块通用样式 Módulo de contido estilo común +| └── custom.less # less 变量文件 Arquivo variable +| └── edit.less # 编辑器里编辑后生成的样式 Estilo xerado trala edición no editor +| └── Banner0.less * # 相关模块样式 Estilos de módulos relacionados +| └── Content0.less * +| ... +|── data.source.js # 内容数据文件 Arquivo de datos de contido +|── index.js # 主入口 Entrada principal +|── Banner0.jsx * # 相关模块 Módulos relacionados +|── Content0.jsx * +| ... +``` + +> Os * asteriscos anteriores son contido configurable. Cando se seleccionan os módulos no editor, a continuación aparecerá o ficheiro correspondente. + + +### Arquivo de datos + +- data.source.js +```jsx +import React from 'react'; +export const Banner00DataSource = { + OverPack: { replay: true, playScale: [0.3, 0.1], className: 'banner0' }, + textWrapper: { className: 'banner0-text-wrapper' }, + title: { + className: 'banner0-title', + children: ( + + img + + ), + }, + content: { className: 'banner0-content', children: '一个高效的页面动画解决方案' }, + button: { className: 'banner0-button', children: 'Learn More' }, +}; +``` + +所有的内容都在此文件里编辑，组件里以 `{ ...Banner00DataSource.title }` 续用以上参数，以 `props` 传入。 + +变量名： 请仔细查看里面的变量，变量名为 `模块的名称 + 当前序列 + DataSource`, 如 `Banner00DataSource` 模块名为 `Banner0`， 序列为 `0`。 + +## 脚手架里使用 + +请查看相关的脚手架使用说明。 + +## 安装依赖 + +我们依赖 ant design 的相关组件，动效依赖 ant motion 里相关动效组件，具体查看以下： + +### 基本必要组件依赖 + +``` +npm install antd enquire-js rc-queue-anim rc-scroll-anim rc-tween-one --save; +npm install rc-banner-anim --save;// 如果用的是多屏滑动型的 banner，加上这条。 +``` + +### 按需加载 ant design + +> umi 或 ant design pro 无需安装此项; + +``` +npm install babel-plugin-import --save-dev; +``` + +需要注意： 目前加载了全部的 ant design 的 less, 如使用了 `babel-plugin-import`，请将 `less/custom.less` 里的 `@import "~antd/lib/style/index.less";` 更换成 @import "~antd/lib/style/themes/default.less"; + +详细使用请查看 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) + +## 配置自定义皮肤 + +[参考](https://ant.design/docs/react/customize-theme-cn) 里面的 package.theme（推荐); + +## 配置 html scale + +为更好的响应无线端的使用，Landing 需要你在你的 html 文件的 head 里配置以下代码： +```html + +``` + +## Estilo + +Ant Design Landing 默认使用 less 作为样式语言，整个文件的 less 没使用 `css-modules` 需直接使用。 + +如果你的脚手架使用了 `css-modules` 请在 `index.less` 里加上 `:global`, [global 的使用详细查看](https://github.com/css-modules/css-modules#usage-with-preprocessors) + +```less +:global { + @import './global.less'; + @import './common.less'; + @import './custom.less'; + @import './content.less'; + @import './nav.less'; + @import './content0.less'; + @import './footer.less'; + @import './point.less'; + @import './edit.less'; +} +``` diff --git a/docs/use/pro-1-x.md b/docs/use/pro-1-x.gl-ES.md similarity index 97% rename from docs/use/pro-1-x.md rename to docs/use/pro-1-x.gl-ES.md index 6589bf35..71202440 100644 --- a/docs/use/pro-1-x.md +++ b/docs/use/pro-1-x.gl-ES.md @@ -3,9 +3,11 @@ order: 5 category: zh-CN: 使用教程 en-US: Tutorial -title: + gl-ES: Tutoría +title: zh-CN: pro 1.x 里使用 en-US: Use in pro 1.x + gl-ES: Usar en pro 1.x --- > 蚂蚁金服用户同学可直接查看 [Bigfish 的新增页面](https://docs.antfin.com/basement/bigfish/newpage) @@ -14,7 +16,7 @@ title: 基本配置请查看 [开始使用](docs/use/getting-started); -## 文件路径 +## 文件路径 [Ant Design pro](https://pro.ant.design) 使用的为 dva 脚手架，文件目录同样为 `src/routes`, 首先我们需要将下载的 Home 文件包直接复制到 routes 文件夹下。 @@ -32,7 +34,7 @@ import IndexPage from './routes/Home'; 然后在 pro 的路由上添加 Route, 由于 pro 占了 `/` 主路由，我们将 path 设为 `/home` 即可。 -```jsx +```jsx function RouterConfig({ history, app }) { const routerData = getRouterData(app); const UserLayout = routerData['/user'].component; @@ -41,7 +43,7 @@ function RouterConfig({ history, app }) { -+ {/* 增加在此处 */} ++ {/* 增加在此处 */} ); } -} +} ``` #### router.js 文件地址： `src/router.js`; -将 `AuthorizedRoute` 的 path 改为 `/dashboards`, 新增 `/` 的 `Route` 到自已的 `layout` 文件, 顺便再新增个 404 路由； +将 `AuthorizedRoute` 的 path 改为 `/dashboards`, 新增 `/` 的 `Route` 到自已的 `layout` 文件, 顺便再新增个 404 路由； ```jsx ... diff --git a/docs/use/pro-1-x.zh-CN.md b/docs/use/pro-1-x.zh-CN.md new file mode 100644 index 00000000..71202440 --- /dev/null +++ b/docs/use/pro-1-x.zh-CN.md @@ -0,0 +1,188 @@ +--- +order: 5 +category: + zh-CN: 使用教程 + en-US: Tutorial + gl-ES: Tutoría +title: + zh-CN: pro 1.x 里使用 + en-US: Use in pro 1.x + gl-ES: Usar en pro 1.x +--- + +> 蚂蚁金服用户同学可直接查看 [Bigfish 的新增页面](https://docs.antfin.com/basement/bigfish/newpage) + +[Ant Design pro](https://pro.ant.design) 是 Ant Design 推出的一个开箱即用的中台前端/设计解决方案。 + +基本配置请查看 [开始使用](docs/use/getting-started); + +## 文件路径 + +[Ant Design pro](https://pro.ant.design) 使用的为 dva 脚手架，文件目录同样为 `src/routes`, 首先我们需要将下载的 Home 文件包直接复制到 routes 文件夹下。 + +## 修改路由 + +我们提供了两种方案： 1. 直接新增页面。 2. 更改 pro 的主路由。详细请查看下方； + +### 直接新增页面 + +复制完成后，首页我们在顶部引入 Home, 命名为 IndexPage。 + +```jsx +import IndexPage from './routes/Home'; +``` + +然后在 pro 的路由上添加 Route, 由于 pro 占了 `/` 主路由，我们将 path 设为 `/home` 即可。 + +```jsx +function RouterConfig({ history, app }) { + const routerData = getRouterData(app); + const UserLayout = routerData['/user'].component; + const BasicLayout = routerData['/'].component; + return ( + + + ++ {/* 增加在此处 */} + + } + authority={['admin', 'user']} + redirectPath="/user/login" + /> + + + + ); +} +``` +### 更换 pro 的主路由 + +由于 pro 里没有自定义变量来管理路由，所以需手动修改，首先更改 routerConfig 的路径， 参照以下步骤； + +#### router.js + +文件地址： `src/common/router.js`; + +首先需要修改 `router.js` 里的除 `user` 相关的地址以外的路径，增加个前辍，如 `/dashboards`; +```jsx + const routerConfig = { ++ '/dashboards': { +- '/': { + component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')), + }, ++ '/dashboards/dashboard/analysis': { +- '/dashboard/analysis': { + component: dynamicWrapper(app, ['chart'], () => import('../routes/Dashboard/Analysis')), + }, + ... +``` + +#### menu.js + +文件地址： `src/common/menu.js`; + +将里面的 `path` 除 `user` 相关的地址以外同样前面加上 `dashboards/`; + +```jsx +const menuData = [ + { + name: 'dashboard', + icon: 'dashboard', ++ path: 'dashboards/dashboard', +- path: 'dashboard', + children: [ + { + ... +``` + +#### BasicLaout.js + +文件地址： `src/layout/BasicLaout.js`; + +将 `getBashRedirect` 的路径改为 `'/dashboards'`, 再将 `redirct` 的 `from` 改为 `/dashboards` + +```jsx + ... ++ item => check(routerData[item].authority, item) && item !== '/dashboards' +- item => check(routerData[item].authority, item) && item !== '/' + ... ++ +- + ... +``` + +#### login.js + +文件地址： `src/models/login.js`; + +只需将登录或注册完成后改成 `/dashboards` 即可； + +```jsx + ... + *login({ payload }, { call, put }) { + const response = yield call(fakeAccountLogin, payload); + yield put({ + type: 'changeLoginStatus', + payload: response, + }); + // Login successfully + if (response.status === 'ok') { + reloadAuthorized(); ++ yield put(routerRedux.push('/dashboards')); +- yield put(routerRedux.push('/')); + } + }, + ... +``` + +#### 在 layouts 下增加自已网站的 layout 文件 + +文件地址： `src/layout/PageLayout.js` 新增; + +命名为: `PageLayout.jsx`; 然后在 router.js 上加上 `` layout 上就可以增加网站的内容了。 + +PageLayout.jsx + +```jsx +import React from 'react'; +import Home from '../routes/Home'; + +export default class LandingLayout extends React.Component { + render(){ + return (); + } +} +``` + +#### router.js + +文件地址： `src/router.js`; + +将 `AuthorizedRoute` 的 path 改为 `/dashboards`, 新增 `/` 的 `Route` 到自已的 `layout` 文件, 顺便再新增个 404 路由； + +```jsx + ... ++ import NotFound from './routes/Exception/404'; ++ import PageLayout from './layouts/PageLayout'; + ... ++ const BasicLayout = routerData['/dashboards'].component; +- const BasicLayout = routerData['/'].component; + ... ++ + + } + authority={['admin', 'user']} + redirectPath="/user/login" + /> ++ {/*增加 404*/} + ... +``` + +## CSS Modules + +具体参考 [开如使用里的 global](docs/use/getting-started#样式); diff --git a/docs/use/pro.md b/docs/use/pro.gl-ES.md similarity index 97% rename from docs/use/pro.md rename to docs/use/pro.gl-ES.md index 3124b4c0..9337d9f2 100644 --- a/docs/use/pro.md +++ b/docs/use/pro.gl-ES.md @@ -3,9 +3,11 @@ order: 4 category: zh-CN: 使用教程 en-US: Tutorial -title: + gl-ES: Tutoría +title: zh-CN: pro 2.x 里使用 en-US: Use in pro 2.x + gl-ES: Usar en pro 2.x --- [Ant Design pro](https://pro.ant.design) 是 Ant Design 推出的一个开箱即用的中台前端/设计解决方案。 @@ -89,4 +91,4 @@ export default { - chainWebpack: webpackPlugin, }; -``` \ No newline at end of file +``` diff --git a/docs/use/pro.zh-CN.md b/docs/use/pro.zh-CN.md new file mode 100644 index 00000000..9337d9f2 --- /dev/null +++ b/docs/use/pro.zh-CN.md @@ -0,0 +1,94 @@ +--- +order: 4 +category: + zh-CN: 使用教程 + en-US: Tutorial + gl-ES: Tutoría +title: + zh-CN: pro 2.x 里使用 + en-US: Use in pro 2.x + gl-ES: Usar en pro 2.x +--- + +[Ant Design pro](https://pro.ant.design) 是 Ant Design 推出的一个开箱即用的中台前端/设计解决方案。 + +## 文件路径 + +[Ant Design pro v2.x](https://pro.ant.design) 使用的为 umi 脚手架，文件目录同样为 `src/pages`, 首先我们需要将下载的 Home 文件包直接复制到 `pages` 文件夹下。 + +## 修改路由 + +文件目录： `config/router.config.js`； + +修改 `dashboard` 的路由， 增加 `Home` 路由； + +```js +export default [ ++ { path: '/', component: './Home' }, // 增加 Home 路由 + // user + { + path: '/user', + ... + }, + // app + { +- path: '/', ++ path: '/dashboard', // 更改 dashboard 路由； + component: '../layouts/BasicLayout', + Routes: ['src/pages/Authorized'], + authority: ['admin', 'user'], + ... + }, +]; +``` + +## 安装依赖 + +详细参考[开始使用里的安装依赖](docs/use/getting-started#安装依赖); + +## CSS Modules + +多方案请查看 [umi 里使用的 css module](/docs/use/umi#CSS-Modules); + +这里推荐使用 css-module 的 global; + +antMotionStyle.less 如下 + +``` +:global { + @import './common.less'; + @import './custom.less'; + @import './content.less'; + @import './nav0.less'; + @import './banner0.less'; + ... +} +``` + +## 暂时先删除换肤插件 + +由于换肤插件需要重新 build 全部的 less, 暂时不支持 landing 的 less，所以我们先暂时删除换肤插件。 + +文件目录：`config/config.js`; + +删除 `webpackPlugin` 相关的代码： +```jsx +// https://umijs.org/config/ +import os from 'os'; +import pageRoutes from './router.config'; +- import webpackPlugin from './plugin.config'; +import defaultSettings from '../src/defaultSettings'; + +... + +export default { + // add for transfer to umi + ... + manifest: { + basePath: '/', + }, + +- chainWebpack: webpackPlugin, +}; + +``` diff --git a/docs/use/umi.md b/docs/use/umi.gl-ES.md similarity index 97% rename from docs/use/umi.md rename to docs/use/umi.gl-ES.md index f6c605d5..ac12d85e 100644 --- a/docs/use/umi.md +++ b/docs/use/umi.gl-ES.md @@ -3,9 +3,11 @@ order: 2 category: zh-CN: 使用教程 en-US: Tutorial -title: + gl-ES: Tutoría +title: zh-CN: umi 里使用 en-US: Use in umi + gl-ES: Usar en umi --- [umi](https://umijs.org/) 脚手架为 [ant design](https://ant.design) 提供的可插拔的企业级 react 应用框架，具体教程[请查看](https://www.youtube.com/watch?v=vkAUGUlYm24&feature=youtu.be)。 @@ -22,7 +24,7 @@ title: ``` │── src -│ │── Home +│ │── Home │ │── less │ │── index.js │ └── ... @@ -87,7 +89,7 @@ umi 同样使用了 `css-modules`, 同样我们提供了以下几种解决方案 ### 在全局样式里引用 -在 `src` 里新建一个 `global.less`; 在 `global.less` 里引入 `Home` 样式: +在 `src` 里新建一个 `global.less`; 在 `global.less` 里引入 `Home` 样式: ```less @import './Home/less/antMotionStyle.less'; @@ -135,7 +137,7 @@ export default { ```diff │── src -│ │── Home +│ │── Home │ │── less │ │── index.js │ └── ... @@ -156,7 +158,7 @@ Home/index.js 更改参考 [index.jsx](https://github.com/ant-motion/landing-umi ```diff │── src -│ │── Home +│ │── Home │ │── less - │ │── nav0.less - │ │── footer0.less @@ -178,7 +180,7 @@ Home/index.js 更改参考 [index.jsx](https://github.com/ant-motion/landing-umi + │── data.source.js ``` -#### 再引入 nav0.less 和 footer0.less +#### 再引入 nav0.less 和 footer0.less 如果 `less` 引入是 [在全局样式里引用](#在全局样式里引用) 时，我们需要将 `nav0.less` 和 `footer0.less` 以同样的方法引入; @@ -231,11 +233,11 @@ export default Layout; ```diff │── src -│ │── Home +│ │── Home │ │── less │ │── index.js │ └── ... -+ │── Page2 ++ │── Page2 + │── less + │── index.js + └── ... @@ -319,4 +321,4 @@ export const Nav00DataSource = { ### Router 完成 -完成以上步骤之后，我们再启动 `umi dev` 即可查看在 landing 上下载的模板, 通过导航切换的可查看多个页面了。 \ No newline at end of file +完成以上步骤之后，我们再启动 `umi dev` 即可查看在 landing 上下载的模板, 通过导航切换的可查看多个页面了。 diff --git a/docs/use/umi.zh-CN.md b/docs/use/umi.zh-CN.md new file mode 100644 index 00000000..ac12d85e --- /dev/null +++ b/docs/use/umi.zh-CN.md @@ -0,0 +1,324 @@ +--- +order: 2 +category: + zh-CN: 使用教程 + en-US: Tutorial + gl-ES: Tutoría +title: + zh-CN: umi 里使用 + en-US: Use in umi + gl-ES: Usar en umi +--- + +[umi](https://umijs.org/) 脚手架为 [ant design](https://ant.design) 提供的可插拔的企业级 react 应用框架，具体教程[请查看](https://www.youtube.com/watch?v=vkAUGUlYm24&feature=youtu.be)。 + +使用 demo 地址请查看 [umi-example](https://github.com/ant-motion/landing-umi-example); + +## 文件路径 + +创建文件我们分三步来完成： + +- 首先我们创建一个文件目录，在文件夹里创建一个 `src` 文件夹； +- 使用 umi 的 `umi generate page index` 创建一个 `index` 页； +- 我们将从 `landing` 上下载的 `Home` 文件包和 `pages` 放至 `src` 文件包里； + +``` +│── src +│ │── Home +│ │── less +│ │── index.js +│ └── ... +│ └── pages +│ │── index.js +│ │── index.less +``` + +## 安装依赖 + +安装 `react` 和 `react-dom`, `npm install react react-dom --save`; + +详细参考[开始使用里的安装依赖](docs/use/getting-started-cn#安装依赖); + +这里我们还需要安装 `npm install umi-plugin-react --save-dev`, 再创建 `.umirc.js` 在根目录里, 现在目录结构为： + +``` +│── node_modules +│ └── ... +│── src +│ └── ... +└── .umirc.js +``` + +### 添加 `umi-plugin-react`; + +在 `.umirc.js` 里添加 `plugins` 即可： + +```js +export default { + plugins: [ + [ + 'umi-plugin-react', { + antd: true, + } + ], + ] +} +``` + +## 修改入口文件 + +更改刚才创建的 `index` 页面，打开 `index.js`，引入 `Home` 文件包并渲染。 + +```jsx +- import styles from './index.css'; ++ import Home from '../Home'; + +export default function() { + return ( +-
+-

Page index

+-
++ + ); +} +``` + +## CSS Modules + +umi 同样使用了 `css-modules`, 同样我们提供了以下几种解决方案。 + +### 在全局样式里引用 + +在 `src` 里新建一个 `global.less`; 在 `global.less` 里引入 `Home` 样式: + +```less +@import './Home/less/antMotionStyle.less'; +``` + +如果选择这个方案，我们需要删除 `Home` 的 `index.jsx` 里的 `import './less/antMotionStyle.less';` + +### 使用 css-module 的 global + +使用 `css-modules` 的 `global`, 在 `index.less` 里添加 `:global`, 将样式不作转换, `global` 具体使用[请查看开始使用](/docs/use/getting-started#样式)。 + +### 关闭 css-modules + +如果你当前项目为新项目，且对 `css-modules` 并不是太了解，可以选择关闭 `css-modules`，只需要在 `.umirc.js` 文件里增加 `disableCSSModules: true`。 + +```jsx +export default { ++ disableCSSModules: true, + plugins: [ + [ + 'umi-plugin-react', { + antd: true, + } + ], + ] +} +``` + +## 完成 + +完成以上步骤之后，我们再启动 `umi dev` 即可查看在 landing 上下载的模板。 + +
+ +## 额外内容 + +如果是单个页面的不必要往下看。 + + +### 多页面路由 + +**带 router 的 demo 地址 [umi-example#router](https://github.com/ant-motion/landing-umi-example/tree/router);** + +此块功能不是必要，如果有多个静态页面的情况下，我们可以在 umi 的 src 下新建 `layouts/index.js` 文件，具体可以查看 [umiJS Global Layout](https://umijs.org/guide/router.html#global-layout) + +```diff +│── src +│ │── Home +│ │── less +│ │── index.js +│ └── ... +│ └── pages +│ │── index.js +│ │── index.less ++ └── layouts ++ │── index.js +``` + +#### 先转移 Nav 和 Footer + +将 `Home` 里的 `Header` 和 `Footer` 提取放到 `layouts/index.js` 里即可。然后再将 `Home/index.js` 里跟 `Header` 和 `Footer` 相关的内容全部删除, 再将 `data.source.js` 里跟 `Header` 和 `Footer` 相关的内容全部剪切到 `layouts/data.source.js` 里。 + +> **注：文件转移后，请注意修改 import 相关的内容。** + +Home/index.js 更改参考 [index.jsx](https://github.com/ant-motion/landing-umi-example/blob/router/src/Home/index.jsx) + +```diff +│── src +│ │── Home +│ │── less +- │ │── nav0.less +- │ │── footer0.less +* │── index.js +- │── Nav0.jsx +- │── Footer0.jsx +* │── data.source.js +│ └── ... +│ └── pages +│ │── index.js +│ │── index.less +│ │── page2.js +│ └── layouts +│ │── index.js ++ │── Nav0.jsx ++ │── nav0.less ++ │── Footer0.jsx ++ │── footer0.less ++ │── data.source.js +``` + +#### 再引入 nav0.less 和 footer0.less + +如果 `less` 引入是 [在全局样式里引用](#在全局样式里引用) 时，我们需要将 `nav0.less` 和 `footer0.less` 以同样的方法引入; + + +#### 再添加 `layouts/index.js` 内容 + +```jsx +import React, { Component } from 'react'; +import { enquireScreen } from 'enquire-js'; +import Header from './Nav0'; +import Footer from './Footer0'; + +import { + Nav00DataSource, + Footer00DataSource, +} from './data.source.js'; + +class Layout extends Component { + constructor(props) { + super(props); + this.state = { + isMobile, + }; + } + + componentDidMount() { + // 适配手机屏幕; + enquireScreen((b) => { + this.setState({ isMobile: !!b }); + }); + } + + render() { + return ( + <> +
+ {this.props.children} +