单页制作教程 For Discuz!X2（DIY/左右边栏/标签选项卡）

本次教程相对于以前版本的单页制作教程的区别：
修复 Discuz!X2 单页 DIY 后无法保存的问题；

首先，单页包括该单页的 php 文件和该单页的模板 （.htm） 文件，比如：host.php 、 host.htm

普通单页的 php 文件内容如下：

这里需要注意的是，host 为模板文件名，不需要加.htm 扩展名，模板文件存放于默认风格目录下的 forum 目录；
单页的 php 文件存放于论坛根目录；

$navtitle = '官方 QQ 群列表'; 这一句是定义单页的标题，显示于浏览器顶部的网页标题
$metakeywords = 'QQ 群, 官方,discuz,DRC,7drc,QQ'; 是单页的关键词信息
$metadescription 是单页的描述信息。

可 DIY 的单页 PHP 文件代码内容如下：

注：
其中 loadcache('diytemplatename');
为 Discuz!X2 对 DIY 这一块做的更新，DIY 要载入缓存，所以以前 X1.5 的单页制作教程做出来的单页 DIY 会无法保存。 DIY 的单页模版文件，
修改单页模版内容后需要更新缓存才能刷新出来。

php 文件创建完毕，现在开始创建模版文件，基本代码如下：
普通单页的模版文件代码：

效果如下：

-------------------------------------------------------------------------------------

可 DIY 的单页模版文件代码如下：

其中：

这段代码就是 DIY 区域的代码，之前 X1.5 的单页教程里面我们也讲到过，可以在单页的任意位置插入 DIY 区域，即：

注意：如果一个页面要插入多个 DIY 区域，注意修改上面 DIY 区域的编号 ID，几个 DIY 区域的 ID 编号不能相同。
-------------------------------------------------------------------------------------

带有右侧边栏的单页模版文件代码：

效果如下：

-------------------------------------------------------------------------------------

带有左侧边栏的单页模版文件代码：

注意观察这个左侧边栏的模版代码和右侧边栏的模版代码，可以发现，代码其实都一样，只是更改一下 CSS 样式。

<div > 给这个 div 加一个向右浮动，即：

再给 <div > 这个 div 加一个向左浮动的 CSS 样式，即：

就是说只是左右对调一下。

演示效果如下：

-------------------------------------------------------------------------------------

带有标签选项卡的单页模版：

注意观察你会发现，选项卡这一部分跟 X1.5 一样的，就是在模版的正文区域的 div 内增加一段代码：

效果如下：

此次教程整理结束。