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

西瓜先生

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

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

1. init();$navtitle = '官方QQ群列表';$metakeywords = 'QQ群,官方,discuz,DRC,7drc,QQ';$metadescription = '该页面展示Discuz! Rescue Centre 官方QQ群系，加入本站官方QQ群可及时了解掌握最新动态、插件、模版第一手信息。请勿加入多个QQ群，珍惜有限的群资源。';include template('forum/host');//调用单页模版文件?>

复制代码

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

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

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

1. init();loadcache('diytemplatename');$navtitle = '官方QQ群列表';$metakeywords = 'QQ群,官方,discuz,DRC,7drc,QQ';$metadescription = '该页面展示Discuz! Rescue Centre 官方QQ群系，加入本站官方QQ群可及时了解掌握最新动态、插件、模版第一手信息。请勿加入多个QQ群，珍惜有限的群资源。';include template('diy:forum/host');//调用单页模版文件?>

复制代码

注：其中 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   
      

           

                       

   这里是单页正文内容区域

                       

      

复制代码

其中：

复制代码

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

复制代码

注意：如果一个页面要插入多个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加一个向右浮动，即：

复制代码

再给

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

复制代码

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

演示效果如下：



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


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

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">评分排行
                           

复制代码

效果如下：



此次教程整理结束。

Discuz无偿服务

学习学习

西瓜先生

学习学习{:2_27:}

湖中沉

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

onetheme

不知道你说什么

dismall发布

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

可可

感谢分享！

可可

模板不错

DZ专家

666666666666666666666

西瓜先生

这个很牛啊。学习一下