前端文档【免费下载链接】ant-design-landing:mountain_bicyclist: Landing Pages of Ant Design System项目地址https://gitcode.com/gh_mirrors/antd/ant-design-landing点击查看免费下载Ant Design Landingant-design-landing是一套基于 Ant Design 设计规范的 Landing Page 模板与设计资源平台。在仓库的官方文档中docs/download.md 是设计资源Download Sketch页面的内容源它集中发布了按 Ant Design 规范产出的 Sketch 设计源文件本文将以该文档为主体结合仓库内真实的渲染组件、样式与页面集成配置完整讲解设计资源页面的资源清单、数据模型、前端实现原理以及下载后的工程接入方式帮助读者既能在平台上拿到设计源文件也能理解这一页面在项目中的技术落地细节。一、设计资源页面一览根据 docs/download.md 的说明该页面提供以 Ant Design 设计规范完成的相关设计资源并注明更多设计资源正在整理和完善中。页面目前发布三个 Sketch 设计源文件对应三个资源卡片见下表资源名称内容说明资源标识name文件包基础模板百搭型产品 Landing 模板拼搭自己的专属产品 Landing PagebasicAnt.Design.Landing.Template.sketchAnt Design Home 3.0Ant Design 首页的源文件antdAnt.Design.home-3.0.sketchAnt Design LandingAnt Design Landing 首页的源文件landingAnt.Design.Landings.home.noImg.sketch三个资源均为.sketch格式的设计源文件可通过文档源文件 docs/download.md 中downloadData数组的url字段获取官方下载地址附件由 ant-design 仓库的 Release 提供。其中基础模板面向需要快速拼搭 Landing Page 的产品团队而另外两份则是 Ant Design 与 Ant Design Landing 官网首页的原始设计稿适合作为视觉与布局规范的参考样板。二、资源数据模型解析设计资源页的核心数据定义在 docs/download.md 的__react代码块中它通过 bisheng 的实时渲染能力直接在 Markdown 内执行 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(Demo data{downloadData}/, mountNode);每个资源对象包含五个字段其含义与用途如下title资源名称渲染为卡片标题h3content一句话内容说明渲染为卡片描述pname英文标识不直接展示在界面上而是用于统计埋点的事件命名详见下文 Download.jsx 分析urlSketch 设计源文件的下载地址渲染为卡片a标签的hrefimg资源预览图地址渲染为卡片图片区。值得注意的是文档中__react块通过ReactDOM.render(Demo data{downloadData}/, mountNode)将数据传入Demo组件而Demo即仓库中真正的页面实现组件 site/theme/template/Other/Download.jsx。这种文档只写数据、组件只负责渲染的结构正是 bisheng 文档引擎参见 site/bisheng.common.config.js支持将 Markdown 内 React 代码实时渲染为页面的典型用法。三、渲染组件实现Download.jsx设计资源卡片的实际渲染逻辑位于 site/theme/template/Other/Download.jsx组件接收data属性并遍历渲染export default function Download({ data }) { return ( Row gutter{24} {data.map((item) ( Col key{item.title} sm{24} md{12} xxl{8} classNameresource-wrapper a classNameresource-cards href{item.url} target_blank onClick{() { if (!location.port window.gtag) { window.gtag(event, saveSKetch_${item.name}); } }} ImageLoadComp classNameimg-wrapper src{item.img} / div classNametext-wrapper h3{item.title}/h3 p{item.content}/p /div /a /Col ))} /Row ); }该组件在实现上体现了几个关键设计响应式栅格布局基于 antd 的Row/Colsm{24}小屏单列、md{12}中屏两列、xxl{8}超大屏三列保证资源卡片在手机、平板与宽屏显示器上均有合理的排布。整卡可点击外层a直接包裹图片与文字target_blank新窗口打开下载地址整张卡片即下载入口。下载埋点onClick中通过window.gtag上报saveSKetch_${item.name}事件如saveSKetch_basic并以!location.port判断仅在正式域名环境非本地开发端口下上报——这正是数据模型中name字段的实际用途。与之类似的结构也出现在实践案例页面组件 site/theme/template/Other/Cases.jsx 中二者的差异在于 Cases 组件使用xl{12} sm{24} xs{24}布局且直接输出img而设计资源组件使用ImageLoadComp做图片加载优化。四、卡片样式download.less资源卡片的样式定义在 site/theme/template/Other/download.less 中头部引入antd.less与default.less两个主题变量文件。核心样式要点.resource-wrapper { margin-bottom: 24px; } .resource-cards { padding: 10px; background: #fff; border-radius: 4px; border: 1px solid #f0f0f0; .mouseHover(#999); display: block; .img-wrapper { border-radius: 2px; overflow: hidden; height: 310px; background-size: 100% auto; background-repeat: no-repeat; background-position: top center; background-color: #f0f0f0; } .text-wrapper { h3 { margin: 16px auto 8px; line-height: 1.5; } p { font-size: 12px; margin: auto; color: fade(text-color, 75); } } }样式细节值得注意卡片为白底圆角4px加浅灰边框#f0f0f0与整体文档风格保持一致.mouseHover(#999)是 site/theme/static/default.less 中定义的通用 hover 动效 mixin默认box-shadow: 0 0 0hover 时卡片上浮translateY(-4px)并带出阴影过渡提升交互反馈预览图区域固定高度310px以background-size: 100% autobackground-position: top center的方式展示占位底色为#f0f0f0避免图片未加载时卡片塌陷标题h3与描述p使用text-color见 site/bisheng.common.config.js 中modifyVars注入的#314659并按透明度淡化的方式呈现。五、图片加载与动效组件ImageLoadComp预览图并非简单img而是复用首页模板组件 site/theme/template/Home/component/ImageLoadComp.jsx。该组件是React.PureComponent其实现包含了三层能力加载态与缓存通过模块级对象imgLoadData记录已加载完成的图片地址未加载时外层包裹 antdSpin显示加载动画onImageLoad回调在隐藏的img加载成功后更新状态并写入缓存避免同一资源反复请求。背景图渲染可见元素使用TweenOne渲染backgroundImage: url(${src})配合容器固定高度实现预览图铺陈。悬停视差动效onEnter时设置backgroundPositionY从0%到100%再到0%的循环动画各4000msonLeave时复位鼠标移入预览图会产生上下滚动的视差效果。这套加载缓存 背景动画的实现让设计资源页的预览图体验与首页模板如 site/theme/template/Home/component/data.json 中模板列表的预览保持一致。六、页面集成路由、国际化与首页入口设计资源页面并不是孤立文档它在站点中通过多处配置完成集成文档分类排序在 site/bisheng.index.config.js 的themeConfig.categoryOrder中设计资源被排在第 5 位介绍、设计指引、编辑器教程、使用教程、实践案例之后决定其在文档导航中的位置。中英文页面映射site/bisheng.common.config.js 的filePathMapper会把/docs/download.html同时映射为/docs/download-cn.html配合文档 frontmatter 中title: zh-CN 设计资源 / en-US Download Sketch实现中英文双版本页面。首页入口首页三大特征区块的入口定义在 site/theme/template/Home/Page1.jsx其中第二项Sketch 资源包通过link: /docs/download${isCN ? -cn : }跳转到设计资源页对应的文案在 site/theme/zh-CN.js 中为app.home.fatures.sketch: Sketch 资源包。通用下载埋点site/theme/template/Content/Article.jsx 在文档正文渲染时对.resource-card类元素统一委托上报Download/resource的ga事件与组件内的gtag埋点共同构成下载行为的数据链路。七、下载后的工程接入设计资源页提供的是设计源文件而平台上的模板代码包则由首页模板区块统一分发在 site/theme/template/Home/component/data.json 中type: download的模板如 ant design 3.0 官网、ant design pro、蚂蚁体验云、ant-v、云凤蝶等通过各自的模板仓库提供完整 Landing Page 代码包。拿到模板代码包后的接入方式可参考仓库的开始使用文档 docs/use/getting-started.md其核心要点包括文件结构模板包包含less/目录index.less、common.less、content.less、custom.less、edit.less及按模块生成的Banner0.less、Content0.less等、数据文件data.source.js、主入口index.js与按需生成的模块Banner0.jsx、Content0.jsx等。数据驱动所有内容集中在data.source.js变量命名遵循模块名 序列 DataSource如Banner00DataSource组件中以{ ...Banner00DataSource.title }方式通过 props 消费。依赖安装基本依赖为antd、enquire-js、rc-queue-anim、rc-scroll-anim、rc-tween-one多屏滑动 Banner 需追加rc-banner-anim使用 Content7 模块需追加ant-design/compatible。响应式配置需要在页面head中配置meta nameviewport contentwidthdevice-width, initial-scale1.0以适配移动端展示。至此从 docs/download.md 的数据定义到 site/theme/template/Other/Download.jsx 的渲染实现、site/theme/template/Other/download.less 的视觉呈现再到 site/bisheng.index.config.js 的站点集成设计资源页的完整链路已经清晰它既是 Ant Design Landing 面向设计者输出 Sketch 源文件的入口也是文档驱动组件渲染这一站点架构的典型示例读者既可以在页面上获取设计资产也可以把其中的数据模型、组件拆分与埋点方案复用到自己的资源型页面上。赞分享前端文档【免费下载链接】ant-design-landing:mountain_bicyclist: Landing Pages of Ant Design System项目地址https://gitcode.com/gh_mirrors/antd/ant-design-landing点击查看免费下载相关推荐Ant Design Landing 设计资源下载指南Sketch 源文件清单与站点下载实现解析Ant Design Landing 设计资源下载指南Sketch 源文件清单与站点下载实现解析 Ant Design Landing 是 Ant Desig前端文档全面解析Guardrails为LLM添加智能护栏的核心原理全面解析Guardrails为LLM添加智能护栏的核心原理 你是否在使用大语言模型 LLM 时遇到过输出格式混乱、内容偏离主题或包含敏感信息的问题Guard前端文档Ant Design Landing 设计资源下载指南Sketch 源文件的构成、渲染实现与落地使用Ant Design Landing 设计资源下载指南Sketch 源文件的构成、渲染实现与落地使用 Ant Design Landing 项目在 docs/前端文档上一篇深度确定性策略梯度DDPG算法全解析从连续动作控制到 TD3 与 D4PGEasy-RL 蘑菇书第12章下一篇5分钟实现智能视频PPT提取开源工具实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考