# b_栏目布局定制
# 栏目布局ZIP包介绍
进入【栏目布局库】，选择“网站式信息门户”导出，如下图：
导出的ZIP包目录结构如下图所示：
- portal/decoration/layout/D1-M_T: 为栏目布局文件layout.html所在目录，其中D1-M_T为栏目布局唯一标识。栏目布局文件layout.html内容如下：
<div class="container">
<div class="row">
<div class="col-12 col">
<div class=“fragment” id=“fragment_0_0” x=“0” y=“0” swidth=“12” celladd=“true” maxsection=“-1”>
</div>
</div>
</div>
</div>
其中， class="row" 表示一行，class="col-12 col" 标识一列，col-12 标识这一列宽度比例（注意：一行的宽度分成12等份），如果用 col-12 则标识这一列占满了整行。class="fragment" 标识栏目片段集合，可以配置下表中的属性：
- portal/images：为栏目布局预览图标文件所在目录。
- import.xml：为栏目布局元数据描述文件，内容如下所示：
<portal version="1.0" vendor="www.seeyon.com" type="decoration">
<decoration>
<code>D1-M_T</code>
<name>模板1</name>
<icon>space_edit_layout_1.png</icon>
</decoration>
</portal>
# 可以定制化的内容
1.修改栏目布局示例图标； 2.修改栏目布局名称； 3.修改栏目布局标识； 4.修改栏目布局，比如调整栏目宽度比例，增加一行栏目等。
# 举个例子：
下面以一个具体的例子来说明如何对栏目布局进行修改。比如我们要做一个下图所示的布局：
# 开发步骤如下
开发步骤如下： 第一步：根据前面“栏目布局ZIP包介绍”，我们可以写出这个栏目布局的layout.html文件，如下所示：
<div class="container">
<div class="row">
<div class="col-12 col">
<div class="fragment" id="fragment_0_0" x="0" y="0" swidth="12" celladd="true" maxsection="-1"></div>
</div>
</div>
<div class="row">
<div class="col-3 col">
<div class="fragment" id="fragment_1_0" x="0" y="1" swidth="3" celladd="true" maxsection="-1"></div>
</div>
<div class="col-3 col">
<div class="fragment" id="fragment_1_1" x="1" y="1" swidth="3" celladd="true" maxsection="-1"></div>
</div>
<div class="col-3 col">
<div class="fragment" id="fragment_1_2" x="2" y="1" swidth="3" celladd="true" maxsection="-1"></div>
</div>
<div class="col-3 col">
<div class="fragment" id="fragment_1_3" x="3" y="1" swidth="3" celladd="true" maxsection="-1"></div>
</div>
</div>
<div class="row">
<div class="col-2 col">
<div class="fragment" id="fragment_2_0" x="0" y="2" swidth="2" celladd="true" maxsection="-1"></div>
</div>
<div class="col-4 col">
<div class="fragment" id="fragment_2_1" x="1" y="2" swidth="4" celladd="true" maxsection="-1"></div>
</div>
<div class="col-6 col">
<div class="fragment" id="fragment_2_2" x="2" y="2" swidth="6" celladd="true" maxsection="-1"></div>
</div>
</div>
</div>
第二步：修改import.xml文件中的code和name，假设code我们命名为custom_001，name我们命名为自定义栏目布局01，icon修改为custom_001.png。修改后的内容如下所示：
<portal version="1.0" vendor="www.seeyon.com" type="decoration">
<decoration>
<code>custom_001</code>
<name>自定义栏目布局01</name>
<icon>custom_001.png</icon>
</decoration>
</portal>
第三步：将ZIP包中路径portal/decoration/layout/D1-M_T修改为portal/decoration/layout/custom_001。 第四步：将custom_001.png图片放到ZIP包路径portal/images下。 第五步：将修改后的内容重新打一个ZIP包，然后重新导入系统即可。 导入系统后，可以对该布局进行编辑，可以查看定制的布局是否显示正确。
创建人：chuhc
