门户DIY 社区信息聚合更加专业和个性

作为一款以社区为基础的专业建站平台，Discuz! X1社区平台系统让论坛（BBS）、社交网络(SNS)、门户（Portal）、群组(Group)、开放平台(Open Platform)充分融合于一体，帮助网站实现一站式服务。
-------------------------------------------------------------------------------------------------------------------------

门户是整合站点精品信息并以一个统一的界面展示的信息平台，是一个网站的门面。通过门户展示的内容可以让用户了解网站的风格，定位，并进一步点击链接访问网站更多内容。通过门户功能可以发布文章资讯，通过模块可以聚合包括会员、帖子、日志、图片、附件等各类站内信息。

论坛的帖子、UCHome 的日志，都可以直接推送到门户的文章库里面。Disucz! X1 的门户系统灵活而强大，站长可以通过 DIY 功能聚合网站包括会员，帖子，日志、图片等信息，并以多种样式展示；也可以自己发布文章，管理资讯频道；还可以通过 DIY 功能将有相同主题的内容聚合在一个专题页面。

下面我们主要讲解如何使用 DIY 功能。

DIY 自己的首页，建立框架是第一步。

一、tab 框架

1、在 DIY 页面下，点击框架，选择 tab 框架，如下图所示：



2、选中 tab 框架，按住鼠标，把 tab 框架拖到要加入框架的位置，如下图所示：



3、添加好 tab 框架之后，点击编辑 => 标题，编辑框架标题的属性，如下图所示：





4、点击编辑 => 样式，编辑背景和边框的属性，如下图所示：





至此一个 tab 框架就添加好了，可以继续添加模块，自定义设置完善框架。
tab 框架的效果，如下图所示：



二、1:1:1框架

1、在 DIY 页面下，点击框架，选择 1:1:1 框架，如下图所示：



2、选中 1:1:1 框架，按住鼠标，把 1:1:1 框架拖到要加入框架的位置，如下图所示：



3、添加好 1:1:1 框架之后，点击编辑 => 标题，编辑框架标题的属性，如下图所示：



4、点击编辑 => 样式，编辑背景和边框的属性，如下图所示：



5、至此一个 1:1:1 框架就添加好了，可以继续添加模块，自定义设置完善框架。

1:1:1 框架的效果，如下图所示：



三、框架嵌套

DIY 页面提供了100%框架，1:1 框架，1:2 框架，2:1 框架，1:3 框架，3:1 框架，1:1:1 框架，tab 框架，8 中框架种类，可以通过框架的嵌套，可以更好的设计出个性化的专题。

本例中，建立了一个 3:1 框架，在 3:1 框架3的部分中添加了一个 1:1 框架，在 3:1 框架 1 的部分中添加了一个专题类模块，然后在 1:1

框架中添加了图片类模块和会员类模块。建立之后的效果，如下图所示：



添加了框架之后，还需要添加模块，让整个专题栏目显示的更加完善，内容也更加丰富。

四、模块的使用
门户模块提供了 6 大类、21 小类及其它 10 个展示类共 100 多种模块样式。站长可以自由的选择，如下图所示：

在DIY门户时，添加了框架之后，还需要添加模块，让整个专题栏目显示的更加完善，内容也更加丰富。
本例中在 1:1:1 框架中添加模块
打开专题 DIY 页面，点击模块，选择帖子类模块，按住鼠标，将模块拖到要放置模块的位置，如下图所示：



1、编辑模块标题：

点击模块右侧的编辑 => 标题，如下图所示：



出现如下图所示的内容，填写相关内容，确定即可：



模块标题：输入要显示的模块标题，如：最新帖子。

链接：输入点击模块名称要跳转的链接地址，如http://localhost/dzx/forum.php

图片：输入显示在模块名称前面的模块图标地址，如：./static/image/common/star_level1.gif

位置：设置模块名称的显示位置，偏左或偏右

偏移量：设置模块名称显示位置的偏移量

字体：设置模块名称字体显示的大小

颜色：设置模块名称的字体颜色

背景图片：输入显示在模块名称处的图片地址，如./static/image/common/star_level1.gif

背景颜色：设置模块名称位置的背景颜色

设置后的效果，如下图所示：



2、编辑背景和边框属性

点击模块右侧的编辑 => 样式，如下图所示：



出现如下图所示的内容，填写相关内容，确定即可



链接：设置模块中的内容的字体大小

边框：设置模块边框的粗细，样式和颜色

外边距：设置边框的外边距

内边距：设置边框的内边距

背景颜色：设置模块的背景颜色

背景图片：输入模块背景的地址，如：./static/image/common/star_level1.gif

指定class：输入自己编写的样式名称，如 pbnv

这样一个模块就建立好了，可以用同样的方法添加更多的模块，设置后的效果如下图所示：



好了，本篇介绍到此点到为止，希望大家能够以实际建站过程中活学活用。Discuz! X1版本产品研发以用户需求为核心，坚持“融合”，拒绝“整合”绝不“拼凑”；消除“边界感”，把社区的四个基本模块(门户、论坛、群组、家园)的优点显露出来；产品有“延展性”，拥有一个好的骨架；重视“细节”，让用户在整个网站的操作都尽可能流畅；设计设重视产品的风格和布局，让不同部分间的跳跃感消失；充分发挥社区的四大基础模块的优势，互相包容，取长补短。如需更多了解Discuz! X1版本的功能，更关注其它相关主题介绍！

-------------------------------------------------------------------------------------------------------------------------
相关专题：Discuz! X1 正式版发布专题

强烈支持中。。。。。。。。。

支持dz x ！

我前排，哦也！

很好很强大 啊

强力插入前十

前排~~~~~~~~~~~~~~~~~~~~~~~~

严重支持Ｘ！
严重支持Ｘ！
严重支持Ｘ！
严重支持Ｘ！
严重支持Ｘ！
严重支持Ｘ！
严重支持Ｘ！
严重支持Ｘ！
严重支持Ｘ！
严重支持Ｘ！
严重支持Ｘ！
严重支持Ｘ！
严重支持Ｘ！
严重支持Ｘ！
严重支持Ｘ！
严重支持Ｘ！
严重支持Ｘ！
严重支持Ｘ！
严重支持Ｘ！
严重支持Ｘ！
严重支持Ｘ！

我也来插啊   前十