企业官网建设流程全解析

• 前端
• 文档

本文档源自仓库中的设计指引文档 docs/guide/header-footer.md，该文档定义了 Landing Page 中页头（Header）与页尾（Footer）的定位、信息层级与三类典型形态。本文在此基础上，结合仓库site/templates/template/element/目录下 Nav0～Nav3 与 Footer0～Footer2 六个组件的真实源码与template.config.js配置，展开实现层面的讲解，帮助你在使用 ant-design-landing 搭建落地页时，正确选择并配置页头与页尾组件。

页头承载的是品牌信息与整个网站的结构信息，明确告知用户网站里最主要的几块内容；页尾则是网站的"落款"，提供产品信息、友情链接与版权信息。二者共同构成落地页的"骨架"，决定了用户对网站整体结构的第一印象。

顶部页头导航（Header）

顶部导航高度为 64px，主要展示 logo、基本导航内容、用户相关信息。仓库为此提供了三种示例形态供挑选，并分别对应可复用的源码组件（见 element 目录）。

基本型页头导航：logo + 基本导航

由 logo 与基本导航内容组成，这是最常见、最轻量的页头形态。对应源码为 Nav0/index.jsx，配置位于 Nav0/template.config.js。

Nav0 的dataSource结构如下：

• wrapper：外层容器，类名header0 home-page-wrapper，承载深色背景（@template-nav-bg-color）与底部阴影；
• page：内容容器，类名home-page，两侧padding: 0 24px；
• logo：logo 区域，宽度 150px、行高 64px，children为 logo 图片地址；
• Menu：导航数据，children数组中的每一项是一个菜单项item0、item1……每项包含className、children（锚点href与文本children），以及可选的subItem（用于渲染带子菜单的下拉导航）；
• mobileMenu：移动端汉堡菜单按钮，类名header0-mobile-menu。

支持子菜单是 Nav0 的显著能力：当某菜单项带有subItem时，组件会用 antd 的SubMenu渲染下拉子菜单，且每个子菜单项内部可同时包含图片、标题、描述三部分（如 template.config.js 中item-sub-item下的image0、title、content）。这是"基本型"里最常用的配置。

在移动端（宽度 ≤ 767px），Nav0 的样式切换逻辑见 Nav0/index.less：logo 上浮到z-index: 101，菜单由float: right改为全宽下拉，汉堡按钮由三条<em>横线组成，展开时通过 transform 旋转成"×"形关闭图标。

用户信息页头导航：在基本内容右侧添加用户信息

如果有登录信息或其它信息需要在导航中展现，可以在导航基本内容右侧添加其它信息（如帮助入口、用户头像与菜单）。对应源码为 Nav1/index.jsx，配置位于 Nav1/template.config.js。

Nav1 与 Nav0 的差异点集中在render()中追加的两个导航项：

• help：一个带问号图标（QuestionCircleOutlined）的"帮助"入口，配置见 Nav1/template.config.js；
• user：用户头像（dataSource.user.img）与用户名组成的SubMenu，展开后包含"用户中心 / 修改密码 / 登出"等常规账号操作项。

从源码看（Nav1/index.jsx），userTitle渲染为"头像 + 用户名"的复合标题，并通过navChildren.push(...)追加到导航末尾，注释明确提示"user 涉及到数据，请自行替换"。同时 Nav1 的菜单在移动端使用theme: dark、桌面端使用theme: default，与 Nav0 固定theme="dark"形成对比，适合浅色页面。

单 logo 页头：不需要导航时

如果页面不需要导航，建议将背景设为透明，把 logo 融入首屏。仓库提供两个可复制的变体：

• Nav2：配置见 Nav2/template.config.js，结构极简，仅含wrapper、page、logo、mobileMenu。若需要锚点跳转，可用LinkMenu.children配置to（当前页面内 ID 地址）与children（导航名称），见 Nav2/index.jsx：当item.to含/时渲染为普通<a>，否则使用rc-scroll-anim的Link做页面内平滑滚动；
• Nav3：配置见 Nav3/index.jsx，结构与 Nav0 几乎一致（同样支持subItem下拉子菜单），但菜单主题为theme="light"，视觉更轻盈。

高度约定：所有页头组件的整体高度均为 64px（Nav0 在 index.less 中通过.ant-menu { line-height: 62px; height: 64px; }实现），这既是设计文档的硬性规范，也是 antd Menu 与 logo 垂直对齐的关键。

页脚（Footer）

Footer 作为展示页中非常重要的一部分，位于页面最底部，包含的信息内容为：实用导航、语言选择、社交链接、帮助和支持、版权和隐私声明等。仓库对应提供三个组件：Footer0、Footer1、Footer2。

单版权信息：页尾无需任何信息内容时

对应源码 Footer0/index.jsx，配置位于 Footer0/template.config.js。

Footer0 的dataSource仅三个字段：

• wrapper：外层容器，类名home-page-wrapper footer0-wrapper；
• OverPack：rc-scroll-anim的滚动动画容器，playScale: 0.05表示滚动 5% 时触发入场动画；
• copyright：版权文本，children默认值即<span>©2018 ... All Rights Reserved</span>，可直接替换为你自己的版权声明。

组件内用TweenOne对版权行做y: '+=30', opacity: 0, type: 'from'的上浮淡入动画，见 Footer0/index.jsx。当页尾只需要一行版权信息时，这是最简洁的选择。

内容较少：页尾内容少时的结构

对应 Footer1/index.jsx，配置位于 Footer1/template.config.js。

Footer1 采用"多列链接 + 底部版权"的两层结构，数据模型清晰：

• block：栅格容器，gutter: 0，内含block0～block3四个区块，每个区块通过xs: 24, md: 6响应式定义：移动端每列占满 24/24，桌面端每列占 6/24（四列等宽）；
• 每个block由title（列标题，如"产品 / 关于 / 资源"，也可以是 logo 图片）与childWrapper.children（链接列表，每项含href与children）组成；
• copyrightWrapper/copyrightPage/copyright：底部版权区域，结构与 Footer0 的copyright一致。

若页尾有 2～4 列实用导航加上版权行，Footer1 是最合适的模板。列数与每列链接数可通过增删block的children自由调整。

内容较多：社交链接、多版权信息等

对应 Footer2/index.jsx，配置位于 Footer2/template.config.js。

Footer2 在 Footer1 的版权行基础上，额外提供两个数据域：

• copyright：不再是一段 HTML 字符串，而是一个多元素数组，可包含图片 logo（copyright-logo）、品牌文字（copyright-group）、分割线（copyright-line）与版权文本（copyright-text），见 Footer2/template.config.js；
• links：社交链接数组，每项包含name（如weibo、zhihu）、href与className（links-weibo、links-zhihu），图标以SVG data URI形式内联在children中，避免额外的图片请求，示例见 Footer2/template.config.js。

这是信息最完整、最适合企业官网底部的形态：品牌标识 + 版权声明 + 社交入口一应俱全。

在落地页中组合使用

在实际落地页中，页头与页尾通常配套出现。参考仓库首页主题的组装方式（site/theme/template/Layout/Layout.jsx），建议遵循以下原则：

• 一页只选一个 Header：从 Nav0/Nav1/Nav2/Nav3 中按信息量需求选择——纯导航用 Nav0，带登录态用 Nav1，纯 logo 融入首屏用 Nav2，浅色轻导航用 Nav3；
• Footer 按信息量分层：版权单行用 Footer0，2～4 列实用导航用 Footer1，需要社交链接与品牌组合版权用 Footer2；
• 所有内容通过dataSource驱动：四个 Header 与三个 Footer 的文本、图片、链接全部集中在各自的template.config.js中，替换内容无需改动组件源码，这也是 ant-design-landing 可视化编辑（site/edit）得以实现的基础——组件源码中以data-edit标记的节点（如data-edit="Menu"、data-edit="linkA,titleWrapper"）即为编辑器可点击改写的目标。

如需了解整体 Landing Page 布局与区块的组合方式，可继续阅读同目录下的 layout.md 与 content.md。

• 前端
• 文档