title:
order: 2

category: ICE Design Pro

布局是一个应用的关键骨架所在，在使用 Iceworks 创建项目之后，默认使用模板自带的布局，如果当前模板布局不能满足需求，还可以使用 Iceworks 提供的自定义布局功能，添加布局到已创建的项目进行替换。

基础布局

在 ice-design-pro 模板中，默认内置了用户登录页面和主页面两种不同风格的布局：

• UserLayout：登录注册页面的布局，包含 LOGO ，表单和页脚三部分

• BasicLayout：登录成功后的主页面布局，包含顶部导航，侧边栏和页脚三部分

自定义布局

当模板默认提供的布局不能满足需求时，可以使用 Iceworks 提供的自定义布局功能进行自定义；如下界面，左边是属性配置面板，右边是配置的实时效果图，目前自定义主要包含以下四部分配置:

• 基础配置
• 导航配置
• 侧边栏配置
• 页脚配置

基础配置

基础配置主要包含布局容器配置、主题配置、定制皮肤三部分，其中：

• 布局容器配置有全屏和固宽两个选项，全屏即 100% 宽度的布局，固宽默认是 1200px
• 主题配置有深色和浅色两个选项，对应的是 Layout 部分的主题配置
• 定制皮肤主要是指配置基础组件的样式，可以选择主色和辅色

导航配置

导航配置主要包含 启用、定位、是否通栏 三部分。只有在启动的前提下才能配置对应的导航属性。在某些情况下，可能不需要导航，只要不勾选启用，则默认不会生成导航部分。

侧边栏配置

侧边栏配置主要包含 启用、折叠、定位 三部分。只有在启动的前提下才能配置对应的侧边栏属性。在某些情况下，可能不需要导航，只要不勾选启用，则默认不会生成导航部分。折叠则是指默认生成的布局侧边栏是否折叠。

页脚配置

页脚配置与导航配置一样，主要包含 启用、定位、是否通栏 三部分。

在自定义布局完成后，可以在 routerConfig.js 替换和更新项目的布局配置。