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

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

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

1. [/code]这里需要注意的是，host为模板文件名，不需要加.htm扩展名，模板文件存放于默认风格目录下的forum目录；
2. 单页的php文件存放于论坛根目录；
4. $navtitle = '官方QQ群列表'; 这一句是定义单页的标题，显示于浏览器顶部的网页标题
5. $metakeywords = 'QQ群,官方,discuz,DRC,7drc,QQ'; 是单页的关键词信息
6. $metadescription 是单页的描述信息。
8. 可DIY的单页PHP文件代码内容如下：[code]

复制代码

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


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


普通单页的模版文件代码：

1.             $_G[setting][bbname]»        $_G[setting][bbname]»        $navtitle                            这里是单页正文内容区域                        

复制代码

效果如下：



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

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

1.             $_G[setting][bbname]»        $_G[setting][bbname]»        $navtitle                                    这里是单页正文内容区域                        

复制代码

其中：

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

复制代码

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

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

1.             $_G[setting][bbname]»        $_G[setting][bbname]»        $navtitle                标题栏                               这里是单页正文内容区域                                                                            公告栏                                                            这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容                                                                                操作菜单                                                            测试菜单一                    测试菜单二                    测试菜单三                    测试菜单四                    测试菜单五                    测试菜单六                                                                                版权信息                                                            作者：体无完肤                    网站：bbs.7drc.com                    版权：Discuz! Rescue Centre                                                   

复制代码

效果如下：




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

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

1.             $_G[setting][bbname]»        $_G[setting][bbname]»        $navtitle                标题栏                               这里是单页正文内容区域                                                                            公告栏                                                            这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容                                                                                操作菜单                                                            测试菜单一                    测试菜单二                    测试菜单三                    测试菜单四                    测试菜单五                    测试菜单六                                                                                版权信息                                                            作者：体无完肤                    网站：bbs.7drc.com                    版权：Discuz! Rescue Centre                                                   

复制代码

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

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

1. [/code]再给  这个div加一个向左浮动的CSS样式，即：[code]

复制代码

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

演示效果如下：



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


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

1.             $_G[setting][bbname]»        $_G[setting][bbname]»        $navtitle                标题栏                                                                class="a"最新发布                                class="a"浏览排行                                class="a"回复排行                class="a"评分排行                                               这里是单页正文内容区域                                                                            公告栏                                                            这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容这里可以放一些公告通知类的文字内容                                                                                操作菜单                                                            测试菜单一                    测试菜单二                    测试菜单三                    测试菜单四                    测试菜单五                    测试菜单六                                                                                版权信息                                                            作者：体无完肤                    网站：bbs.7drc.com                    版权：Discuz! Rescue Centre                                                   

复制代码

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

1.                                 class="a"最新发布                                class="a"浏览排行                                class="a"回复排行                class="a"评分排行                        

复制代码

效果如下：



此次教程整理结束。

学习学习

学习学习

include template('forum/host');//调用单页模版文件
如果调用的模板里面有加载其他数据，直接调用单页模板不显示页面的数据，这个应该怎么加呢

不知道你说什么

厉害厉害，dz我还是只摸到皮毛，向大佬学习

感谢分享！

模板不错

666666666666666666666

这个很牛啊。学习一下