前端文档【免费下载链接】ant-design-landing:mountain_bicyclist: Landing Pages of Ant Design System项目地址https://gitcode.com/gh_mirrors/ant/ant-design-landing点击查看免费下载内容区块是展示型着陆页Landing Page中承载产品功能、特性与相关信息的主体部分。本文以 Ant Design Landing 的设计指引文档 docs/guide/content.md 为骨架逐类拆解全屏式、两栏式、单行/双行多栏式与半屏模板的布局规范、尺寸约束与排版要点并结合仓库中 site/templates/template/element 下 Content0Content13 等真实模板源码讲解每种布局在 React 组件与 dataSource 数据源中的具体落地方式。读完本文你将能依据统一的 1200×375px 半屏基准与 8 倍数栅格体系为 Landing 页面灵活拼装、正确选型内容区块并理解如何通过template.config.js中的数据配置快速产出可运行的区块组件。内容区块的定位与设计基线在 Ant Design Landing 的页面结构里Banner首屏负责在用户进入页面的第一时间传达产品名称与品牌气质见 docs/guide/banner.md而内容页则承担产品功能、特性以及相关信息的介绍。二者共同构成了展示型页面的核心叙事链条。关于内容区块设计指引给出了两条硬性基线可自由取舍展示型页面中可以添加一个或多个内容页组合使用也可以选择不添加完全依据信息密度和转化目标决定。最小设计尺寸每一屏的最小设计尺寸为1200×375px。这个尺寸与 Banner 的半屏尺寸完全一致参考 docs/guide/banner.md 中半屏的设计尺寸为 1200*375px意味着内容区块可以与 Banner 半屏模板在同一栅格体系下无缝拼接。需要特别说明的是设计指引将分点阐述、合作伙伴/客户展示、价格表、团队展示、联系我们等统称为内容区块。这与仓库源码的组织方式完全对应在 site/templates/template/element/template.config.js 中Content0Content13 被统一注册为模板组件同时 Features、Teams、Pricing、Contact 等业务语义组件也复用了 Content 系列的实现例如Teams4: Content8、Contact0: Content10、Feature0: Content0说明内容区块是这些业务组件的共同视觉与代码底座。全屏式以大图撑起整屏叙事全屏式内容区块的典型特征有两点全屏背景图整屏被一张背景大图铺满视觉冲击力最强适合产品发布、活动宣传等需要强氛围的场景内容居中对齐标题、文案和按钮与页面居中对齐形成稳定的视觉中心与 Banner 的单屏布局一全屏背景图 居中排版保持同一套设计语言。在源码层面这类区块通常由整屏容器 居中标题构成。以标题型组件 Content13 为例其渲染结构为OverPack QueueAnim通过QueueAnim typebottom leaveReverse delay{[0, 100]}实现标题整体从底部进入的入场动画配合dataSource.titleWrapper完成标题内容的居中排版而带按钮的版本 Content11 则额外通过TweenOne animation{{ y: 30, opacity: 0, type: from, delay: 300 }}将行动按钮以 300ms 延迟依次带入形成先标题、后按钮的节奏感。两栏式图文分栏的两种镜像布局两栏式是产品介绍中最常见的内容组织方式设计指引将其细分为两个镜像方向两栏式 1图左文右主介绍图位于页面左侧标题文案位于页面右侧标题和文案内容左对齐与左侧大图形成图—文的横向阅读流。两栏式 2图右文左主介绍图位于页面右侧标题文案位于页面左侧标题和文案内容同样左对齐是两栏式 1 的水平镜像。源码中这一对镜像布局分别由 Content1图左文右与 Content2图右文左实现。二者的核心机制值得展开栅格分配以 Content1/template.config.js 为例图片列imgWrapper配置为md: 10, xs: 24文案列textWrapper配置为md: 14, xs: 24即桌面端md按 10:14 分栏移动端xs两列各自独占整行、自动堆叠移动端适配Content2 在渲染时通过{isMobile img}与{!isMobile img}将图片插到文案之前或之后保证移动端始终图在前、文在后的阅读顺序入场动画两栏组件均用TweenOne驱动图片桌面端x: -30/x: 30的位移动画移动端降级为scaleY缩放动画用QueueAnim驱动文案队列typeright/typeleft并统一采用easeOutQuad/easeInQuad缓动函数保证镜像布局的动画节奏对称。单行多栏式栅格均分的横向陈列单行多栏式的设计要点内容区块按栅格均分每个区块宽度相等视觉整齐划一一行可放置34 个并列区块建议不超过 4 个——这是对 Ant Design 24 栅格体系的直接映射3 栏对应md: 84 栏对应md: 6。源码中典型的单行三栏实现是 Content0。它使用 antd 的Row/Col布局配合rc-queue-anim的QueueAnimtypebottom自下而上入场和rc-scroll-anim的OverPack滚动到视口才触发动画playScale: 0.3完成区块陈列。从 Content0/template.config.js 可以看到其数据源结构childWrapper.children下每个block配置md: 8, xs: 24桌面三栏、移动单列每个 block 内部又由image title content三个子节点组成对应设计指引中图标/图 标题 文案的区块范式。单行四栏的典型实现是客户案例组件 Content5其getBlock工厂函数默认给每个区块配置md: 6, xs: 24并预留gutter: 16作为区块间距Content5/index.jsx 中每个区块以a span(img) p(content)结构渲染为可点击的 Logo 墙整组通过TweenOneGroup的enter/leave动画实现增删区块时的平滑过渡。双行多栏式多行多列的密度权衡当需要展示的信息条目较多时可采用双行多栏式双行多栏式 1内容区块按栅格均分一行可放置23 个并列区块建议不超过 3 个——即单块至少占 8 个栅格单位保证图文混排区块如图标 标题 详细说明有足够的横向空间。双行多栏式 2内容区块按栅格均分一行可放置35 个并列内容区建议不超过 5 个——适合只含图/Logo 短文案的轻量区块例如合作伙伴 Logo 墙。建议不超过 N 个的建议值背后有明确的栅格逻辑3 个以内对应md: 8起步5 个以内对应md: 6及以上再往下每个区块将小于 4 个栅格单位文案排版与图片清晰度都会明显受损。仓库中 Content3 是双行、图文混排、可换行的代表实现其getDelay方法((e % b) * 100) (Math.floor(e / b) * 100) (b * 100)会根据每行区块数由24 / item.md计算得出为每一行、每一列计算错峰动画延迟让两行区块依次入场而非同时涌入同时通过clearFloatNum累加item.md在栅格和达到 24 时给该行最后一个区块附加clear-both类解决图文混排中的换行浮动问题对应样式见 Content3/index.less。轻量多列的 Content8 则复用了同一套getDelay错峰策略但区块内部仅保留图片、标题与一段说明更贴合35 个并列内容区的密度要求。半屏设计模板与 Banner 同源的拼接单元半屏模板是内容区块与 Banner 体系衔接的关键半屏的设计尺寸为1200×375px与全屏整屏模板的差异仅在高度上宽度始终对齐 1200px 内容区半屏的排版方式和类别与整屏相同可以继续套用全屏式、两栏式、多栏式等所有布局模式只是单屏承载的信息量减半。这背后是仓库统一的布局容器在 site/templates/static/content.less 中.home-page-wrapper内的.home-page容器被约束为max-width: 1200px且水平居中内部区块统一padding: 128px 24px移动端降为56px 24px。这与 docs/guide/layout.md 中像素类型布局的规范一致以 1200px 为内容最大宽度外侧再保留 24px 边距避免小屏贴边。因此无论是整屏还是半屏区块只要遵循容器 1200px 宽 栅格均分的规则就能在页面中任意拼接而不破坏整体栅格。半屏模板的拼接能力在源码中体现为组件的数据驱动特性每个模板组件如 Content0Content13都由template.config.js导出的dataSource驱动渲染而页面最终的区块顺序则由 site/templates/template/layout.jsx 中的template数组决定——该数组按顺序记录每个区块的组件名如Content0、Content1布局时逐个查找webData[componentName]并注入数据源渲染。这意味着多个半屏区块自由拼接在实现上只是向template数组追加对应组件键名的问题无需改动任何组件代码。内容区块的选型与落地建议综合设计指引与仓库实现落地内容区块时可遵循以下选型逻辑信息结构推荐布局栅格映射仓库对应模板单一强烈卖点 氛围背景全屏式整屏Content13、Content11一张主图 一段介绍两栏式 1 / 210:14 或镜像Content1、Content234 项能力并列单行多栏式md: 8/md: 6Content0、Content5多项图文混排双行多栏式每行 25 栏Content3、Content8与 Banner 同高拼接半屏模板1200×375px上述任一组件复用除表格中的基础形态外仓库还提供了若干扩展型内容区块视频介绍区块 Content4桌面端用react-sublime-video播放、移动端降级为原生video并依据资源后缀自动推断video/*MIME 类型、时间线/历程区块 Content9、地图/地点区块 Content10悬停弹出信息卡、Logo 墙 Content12以及轮播切换的数字指标 Feature6 等。它们均可在需要时作为半屏单元加入页面。小结Ant Design Landing 的内容区块设计本质上是一套尺寸有约束、栅格有依据、组件可复用的模块化体系以 1200×375px 为最小拼接单元以 Ant Design 24 栅格为均分基准通过全屏、两栏、单行多栏、双行多栏、半屏等有限几种布局模式覆盖绝大多数内容展示需求。在实现层面所有布局模式都收敛于 site/templates/template/element 中 Content 系列组件及其template.config.js数据源开发者只需修改dataSource中的md/xs栅格值与区块内容即可在统一的设计基线内完成页面拼装。赞分享前端文档【免费下载链接】ant-design-landing:mountain_bicyclist: Landing Pages of Ant Design System项目地址https://gitcode.com/gh_mirrors/ant/ant-design-landing点击查看免费下载相关推荐HsMod终极指南55项炉石传说插件功能完全解锁与快速安装教程HsMod终极指南55项炉石传说插件功能完全解锁与快速安装教程 你是否厌倦了炉石传说繁琐的游戏流程是否想要更高效地完成日常任务HsMod插件正是为你量身打游戏开发Ant Design Landing骨架屏设计原则提升用户体验的终极指南Ant Design Landing骨架屏设计原则提升用户体验的终极指南 在现代Web应用开发中页面加载速度直接影响用户体验。Ant Design Land前端文档如何用AI对话生成专业图表Next AI Draw.io终极指南如何用AI对话生成专业图表Next AI Draw.io终极指南 还在为绘制复杂的系统架构图而头疼吗还在花费数小时手动调整每个图形元素吗Next AI DAI 应用大模型前端后端MCP 服务上一篇Sketchfab 3D模型下载平台Firefox专属的数字资产获取能力图谱下一篇Firefox用户专属三步解锁Sketchfab模型离线保存的隐藏秘籍创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Ant Design Landing 内容区块设计指南：从全屏式到半屏模板的落地实践
前端文档【免费下载链接】ant-design-landing:mountain_bicyclist: Landing Pages of Ant Design System项目地址https://gitcode.com/gh_mirrors/ant/ant-design-landing点击查看免费下载内容区块是展示型着陆页Landing Page中承载产品功能、特性与相关信息的主体部分。本文以 Ant Design Landing 的设计指引文档 docs/guide/content.md 为骨架逐类拆解全屏式、两栏式、单行/双行多栏式与半屏模板的布局规范、尺寸约束与排版要点并结合仓库中 site/templates/template/element 下 Content0Content13 等真实模板源码讲解每种布局在 React 组件与 dataSource 数据源中的具体落地方式。读完本文你将能依据统一的 1200×375px 半屏基准与 8 倍数栅格体系为 Landing 页面灵活拼装、正确选型内容区块并理解如何通过template.config.js中的数据配置快速产出可运行的区块组件。内容区块的定位与设计基线在 Ant Design Landing 的页面结构里Banner首屏负责在用户进入页面的第一时间传达产品名称与品牌气质见 docs/guide/banner.md而内容页则承担产品功能、特性以及相关信息的介绍。二者共同构成了展示型页面的核心叙事链条。关于内容区块设计指引给出了两条硬性基线可自由取舍展示型页面中可以添加一个或多个内容页组合使用也可以选择不添加完全依据信息密度和转化目标决定。最小设计尺寸每一屏的最小设计尺寸为1200×375px。这个尺寸与 Banner 的半屏尺寸完全一致参考 docs/guide/banner.md 中半屏的设计尺寸为 1200*375px意味着内容区块可以与 Banner 半屏模板在同一栅格体系下无缝拼接。需要特别说明的是设计指引将分点阐述、合作伙伴/客户展示、价格表、团队展示、联系我们等统称为内容区块。这与仓库源码的组织方式完全对应在 site/templates/template/element/template.config.js 中Content0Content13 被统一注册为模板组件同时 Features、Teams、Pricing、Contact 等业务语义组件也复用了 Content 系列的实现例如Teams4: Content8、Contact0: Content10、Feature0: Content0说明内容区块是这些业务组件的共同视觉与代码底座。全屏式以大图撑起整屏叙事全屏式内容区块的典型特征有两点全屏背景图整屏被一张背景大图铺满视觉冲击力最强适合产品发布、活动宣传等需要强氛围的场景内容居中对齐标题、文案和按钮与页面居中对齐形成稳定的视觉中心与 Banner 的单屏布局一全屏背景图 居中排版保持同一套设计语言。在源码层面这类区块通常由整屏容器 居中标题构成。以标题型组件 Content13 为例其渲染结构为OverPack QueueAnim通过QueueAnim typebottom leaveReverse delay{[0, 100]}实现标题整体从底部进入的入场动画配合dataSource.titleWrapper完成标题内容的居中排版而带按钮的版本 Content11 则额外通过TweenOne animation{{ y: 30, opacity: 0, type: from, delay: 300 }}将行动按钮以 300ms 延迟依次带入形成先标题、后按钮的节奏感。两栏式图文分栏的两种镜像布局两栏式是产品介绍中最常见的内容组织方式设计指引将其细分为两个镜像方向两栏式 1图左文右主介绍图位于页面左侧标题文案位于页面右侧标题和文案内容左对齐与左侧大图形成图—文的横向阅读流。两栏式 2图右文左主介绍图位于页面右侧标题文案位于页面左侧标题和文案内容同样左对齐是两栏式 1 的水平镜像。源码中这一对镜像布局分别由 Content1图左文右与 Content2图右文左实现。二者的核心机制值得展开栅格分配以 Content1/template.config.js 为例图片列imgWrapper配置为md: 10, xs: 24文案列textWrapper配置为md: 14, xs: 24即桌面端md按 10:14 分栏移动端xs两列各自独占整行、自动堆叠移动端适配Content2 在渲染时通过{isMobile img}与{!isMobile img}将图片插到文案之前或之后保证移动端始终图在前、文在后的阅读顺序入场动画两栏组件均用TweenOne驱动图片桌面端x: -30/x: 30的位移动画移动端降级为scaleY缩放动画用QueueAnim驱动文案队列typeright/typeleft并统一采用easeOutQuad/easeInQuad缓动函数保证镜像布局的动画节奏对称。单行多栏式栅格均分的横向陈列单行多栏式的设计要点内容区块按栅格均分每个区块宽度相等视觉整齐划一一行可放置34 个并列区块建议不超过 4 个——这是对 Ant Design 24 栅格体系的直接映射3 栏对应md: 84 栏对应md: 6。源码中典型的单行三栏实现是 Content0。它使用 antd 的Row/Col布局配合rc-queue-anim的QueueAnimtypebottom自下而上入场和rc-scroll-anim的OverPack滚动到视口才触发动画playScale: 0.3完成区块陈列。从 Content0/template.config.js 可以看到其数据源结构childWrapper.children下每个block配置md: 8, xs: 24桌面三栏、移动单列每个 block 内部又由image title content三个子节点组成对应设计指引中图标/图 标题 文案的区块范式。单行四栏的典型实现是客户案例组件 Content5其getBlock工厂函数默认给每个区块配置md: 6, xs: 24并预留gutter: 16作为区块间距Content5/index.jsx 中每个区块以a span(img) p(content)结构渲染为可点击的 Logo 墙整组通过TweenOneGroup的enter/leave动画实现增删区块时的平滑过渡。双行多栏式多行多列的密度权衡当需要展示的信息条目较多时可采用双行多栏式双行多栏式 1内容区块按栅格均分一行可放置23 个并列区块建议不超过 3 个——即单块至少占 8 个栅格单位保证图文混排区块如图标 标题 详细说明有足够的横向空间。双行多栏式 2内容区块按栅格均分一行可放置35 个并列内容区建议不超过 5 个——适合只含图/Logo 短文案的轻量区块例如合作伙伴 Logo 墙。建议不超过 N 个的建议值背后有明确的栅格逻辑3 个以内对应md: 8起步5 个以内对应md: 6及以上再往下每个区块将小于 4 个栅格单位文案排版与图片清晰度都会明显受损。仓库中 Content3 是双行、图文混排、可换行的代表实现其getDelay方法((e % b) * 100) (Math.floor(e / b) * 100) (b * 100)会根据每行区块数由24 / item.md计算得出为每一行、每一列计算错峰动画延迟让两行区块依次入场而非同时涌入同时通过clearFloatNum累加item.md在栅格和达到 24 时给该行最后一个区块附加clear-both类解决图文混排中的换行浮动问题对应样式见 Content3/index.less。轻量多列的 Content8 则复用了同一套getDelay错峰策略但区块内部仅保留图片、标题与一段说明更贴合35 个并列内容区的密度要求。半屏设计模板与 Banner 同源的拼接单元半屏模板是内容区块与 Banner 体系衔接的关键半屏的设计尺寸为1200×375px与全屏整屏模板的差异仅在高度上宽度始终对齐 1200px 内容区半屏的排版方式和类别与整屏相同可以继续套用全屏式、两栏式、多栏式等所有布局模式只是单屏承载的信息量减半。这背后是仓库统一的布局容器在 site/templates/static/content.less 中.home-page-wrapper内的.home-page容器被约束为max-width: 1200px且水平居中内部区块统一padding: 128px 24px移动端降为56px 24px。这与 docs/guide/layout.md 中像素类型布局的规范一致以 1200px 为内容最大宽度外侧再保留 24px 边距避免小屏贴边。因此无论是整屏还是半屏区块只要遵循容器 1200px 宽 栅格均分的规则就能在页面中任意拼接而不破坏整体栅格。半屏模板的拼接能力在源码中体现为组件的数据驱动特性每个模板组件如 Content0Content13都由template.config.js导出的dataSource驱动渲染而页面最终的区块顺序则由 site/templates/template/layout.jsx 中的template数组决定——该数组按顺序记录每个区块的组件名如Content0、Content1布局时逐个查找webData[componentName]并注入数据源渲染。这意味着多个半屏区块自由拼接在实现上只是向template数组追加对应组件键名的问题无需改动任何组件代码。内容区块的选型与落地建议综合设计指引与仓库实现落地内容区块时可遵循以下选型逻辑信息结构推荐布局栅格映射仓库对应模板单一强烈卖点 氛围背景全屏式整屏Content13、Content11一张主图 一段介绍两栏式 1 / 210:14 或镜像Content1、Content234 项能力并列单行多栏式md: 8/md: 6Content0、Content5多项图文混排双行多栏式每行 25 栏Content3、Content8与 Banner 同高拼接半屏模板1200×375px上述任一组件复用除表格中的基础形态外仓库还提供了若干扩展型内容区块视频介绍区块 Content4桌面端用react-sublime-video播放、移动端降级为原生video并依据资源后缀自动推断video/*MIME 类型、时间线/历程区块 Content9、地图/地点区块 Content10悬停弹出信息卡、Logo 墙 Content12以及轮播切换的数字指标 Feature6 等。它们均可在需要时作为半屏单元加入页面。小结Ant Design Landing 的内容区块设计本质上是一套尺寸有约束、栅格有依据、组件可复用的模块化体系以 1200×375px 为最小拼接单元以 Ant Design 24 栅格为均分基准通过全屏、两栏、单行多栏、双行多栏、半屏等有限几种布局模式覆盖绝大多数内容展示需求。在实现层面所有布局模式都收敛于 site/templates/template/element 中 Content 系列组件及其template.config.js数据源开发者只需修改dataSource中的md/xs栅格值与区块内容即可在统一的设计基线内完成页面拼装。赞分享前端文档【免费下载链接】ant-design-landing:mountain_bicyclist: Landing Pages of Ant Design System项目地址https://gitcode.com/gh_mirrors/ant/ant-design-landing点击查看免费下载相关推荐HsMod终极指南55项炉石传说插件功能完全解锁与快速安装教程HsMod终极指南55项炉石传说插件功能完全解锁与快速安装教程 你是否厌倦了炉石传说繁琐的游戏流程是否想要更高效地完成日常任务HsMod插件正是为你量身打游戏开发Ant Design Landing骨架屏设计原则提升用户体验的终极指南Ant Design Landing骨架屏设计原则提升用户体验的终极指南 在现代Web应用开发中页面加载速度直接影响用户体验。Ant Design Land前端文档如何用AI对话生成专业图表Next AI Draw.io终极指南如何用AI对话生成专业图表Next AI Draw.io终极指南 还在为绘制复杂的系统架构图而头疼吗还在花费数小时手动调整每个图形元素吗Next AI DAI 应用大模型前端后端MCP 服务上一篇Sketchfab 3D模型下载平台Firefox专属的数字资产获取能力图谱下一篇Firefox用户专属三步解锁Sketchfab模型离线保存的隐藏秘籍创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考