Discuz X3.3 X3.2单页制作教程（附各种形式模板）-站长窝

2核1G3M服务器88一季度

腾讯云，阿里云百度云等折扣价→点我←

Discuz X3.3 X3.2单页制作教程（附各种形式模板） discuz 教程

落尽。一级用户组

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

单页的php文件内容如下：

<?php
require './source/class/class_core.php';//引入系统核心文件
$discuz = & discuz_core::instance();//以下代码为创建及初始化对象
$discuz->cachelist = $cachelist;
$discuz->init();
include template('forum/index2');//调用单页模版文件
?>

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

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

{subtemplate common/header}
<div id="pt" class="wp">
<a href="index.php" class="nvhm">$_G[setting][bbname]</a> › DRC帖子动态
</div>
<style id="diy_style" type="text/css"></style>
<div id="ct" class="wp cl w">
<div class="mn mw">
<div class="content">
这里是自己正文区域的代码
</div>
</div>
</div>
{subtemplate common/footer}

其中：

<a href="index.php" class="nvhm">$_G[setting][bbname]</a> › DRC帖子动态

这一行是单页的路径显示，比如：Discuz! Rescue Centre › DRC帖子动态，{subtemplate common/header}、{subtemplate common/footer}分别为调用页头、页尾模板，使得单页风格与论坛保持一致；

至此，基本型单页创建完毕。

-------------------------------------以下为带右边侧栏单页模板-----------------------------------------

上面模板文件代码是不带边栏的，现在讲下带边栏的单页模板文件代码，如下：

{subtemplate common/header}
<div id="pt" class="wp"><a href="index.php" class="nvhm">$_G[setting][bbname]</a> › 会员风采</div>
<div id="ct" class="wp cl n">
<div class="mn">
<div class="bm">
<h1 class="mt"><img class="vm" src="static/image/feed/profile.gif" alt="profile"> 分类浏览</h1>
<div class="datalist" style="margin:10px 0;">
这里是正文区域代码
</div>
</div>
</div>
<div id="psd" class="sd">
<div class="bn">
<p><strong>栏目名称</p>
<p><a href="#">边栏菜单名称</a></p>
<p><a href="#">边栏菜单名称</a></p>
<p><a href="#">边栏菜单名称</a></p>
</div>
<div class="bn">
<p><strong>管理面板</strong></p>
<p><a href="#">添加分类</a></p>
<p><a href="#">管理分类</a></p>
<p><a href="#">返回会员风采</a></p>
</div>
<div class="bn" style="border-bottom:none;">
<p><strong>版权信息</strong></p>
<p>作者：站长窝</p>
<p>版权：Caogen8.Co</p>
<p>网站：bbs.7drc.com</p>
</div>
</div>
</div>
{subtemplate common/footer}

其中：边栏区域代码中，每个<div class="bn">区块为一个边栏菜单区域；

-------------------------以下为带右边侧栏且多页选项卡切换--------------------------------

刚看看到论坛有站长问单页中如何做那个多页面选项卡切换，下面介绍下；
其实就是多了几行代码，都是DX系统自带的，直接使用即可，在上面带右侧边栏模板代码的：

<h1 class="mt"><img class="vm" src="static/image/feed/profile.gif" alt="profile"> 分类浏览</h1>

这一行下面加入：

<ul class="tb cl">
<li class="a"><a href="index2.php?viewtype=new">最新发布</a></li>
<li class="a"><a href="host.php?viewtype=view">浏览排行</a></li>
<li class="a"><a href="index2.php?viewtype=comment">回复排行</a></li>
<li class="a"><a href="index2.php?viewtype=rate">评分排行</a></li>
</ul>

解释上面代码，其中每个<li>标签，就是一个选项卡，里面的超链接host.php?viewtype=new，这里的viewtype就是指定一个变量，并且指定值为new，点击这个选项卡时候$_G[gp_viewtype]就会获取到这个值，然后通过判断$_G[gp_viewtype]的值，来选择当前选项卡是否为焦点选项。

既然说到多页，那么多个页面如何做，思路可以有两种，一种是建立多个单页，包括多个php文件和多个模板文件，当然这种方法比较直接，但是比较麻烦，可以在同一个模板文件中判断$_G[gp_viewtype]的值来选择显示不同的内容，比如在正文区域中如下代码：

这里显示的是new选项卡下的内容
这里显示view选项卡下的内容
这里显示comment选项卡下的内容

这样就实现了一个模版文件中多个页面的效果。点击不同选项卡，显示不同内容。

------------------------------以下为可以DIY的单页教程--------------------------------

自己制作的单页中，如何又能使用DX的DIY功能呢？

只需要稍加改造，即可完成，如下：
将单页php文件调用模板的那行代码改成：

include template('diy:forum/index2');

这样就可以加载DIY模块，然后在单页模版中，添加DIY区域，如下：

<div id="diy1" class="area"></div>

这就是一个DIY区域，如果要多个区域，则：

<div id="diy1" class="area"></div>
<div id="diy2" class="area"></div>
<div id="diy3" class="area"></div>

将里面diy1,diy2,diy3区分开来即可。

比如，在单页模板代码的<div id="pt" class="wp">这一个div层块的上面或下面加：

<div class="wp">
<div id="diy1" class="area"></div>
</div>

这样就可以实现单页DIY功能了，需要说明的是，模版中要在什么地方加DIY区域，根据自己需要，并不是固定死的，自己设计在哪，就在哪里加入。

温馨提示：

首先感谢您莅临站长窝,有任何宝贵意见欢迎反馈！

帖子如有遇到:图片不显示，附件不存在，解压密码不正确，等各种问题！请联系QQ：3535510005

QQ群：960474828

站长窝论坛版权声明 1、本帖标题：Discuz X3.3 X3.2单页制作教程（附各种形式模板）
2、论坛网址：站长窝论坛
3、站长窝论坛的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
4、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
5、站长窝论坛一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本帖由落尽。在站长窝论坛《程序综合区》版块原创发布，转载请注明出处！

上一篇：微信婚恋交友PC版展示版 1.0 免费下载
下一篇：DZ学习研究交流的多种分类 1.52商业版

最新回复 (1)

落尽。

主题数
57

帖子数
111

精华数
0

注册排名
9319

作者最近主题