discuzx 打造单页面

discuzx 制作单页面

以前7.2版本时候写一个一个单页制作教程，分为带边栏和不带边栏的，很多站长也根据教程学会了自己制作页面。
其实X版本的单页制作，跟7.2没啥两样，原理都是一样的，只要大家仔细研究的话会发现共同点，只是php里面几行代码稍有不同。

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

本帖隐藏的内容单页的php文件内容如下：

<?php

require './source/class/class_core.php';//引入系统核心文件
$discuz = & discuz_core::instance();//以下代码为创建及初始化对象
$discuz->cachelist = $cachelist;
$discuz->init();

include template('forum/host');//调用单页模版文件
?>

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

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

{subtemplate common/header}

<div id="pt" type="text/css"></style>

<div id="ct" style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 10px; background-color: #f7f7f7; color: #666666; background-position: 0px 0px; border: 1px solid #cccccc;">
<a href="index.php" style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 10px; background-color: #f7f7f7; color: #666666; background-position: 0px 0px; border: 1px solid #cccccc;">
{subtemplate common/header}
<div id="pt" src="static/image/feed/profile.gif" alt="discuzx 打造单页面"> 分类浏览</h1>
? ?? ?? ?? ?? ?? ?? ?? ?<div style="margin:10px 0;">
? ?? ?? ?? ?? ??
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ? 这里是正文区域代码
? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???
? ?? ?? ?? ?? ?? ?? ?? ?</div>
? ?? ?? ?? ?? ? </div>
? ?? ???</div>

? ?? ???<!--边栏区域代码开始-->
? ?? ???<div id="psd" style="border-bottom:none;">
? ?? ?? ?? ?? ? <p><strong>版权信息</strong></p>
? ?? ?? ?? ?? ? <p>作者：体无完肤</p>
? ?? ?? ?? ?? ? <p>版权：DRC</p>
? ?? ?? ?? ?? ? <p>网站：bbs.7drc.com</p>
? ?? ???</div>

? ?? ???</div>
? ?? ???<!--边栏区域代码结束-->
</div>

{subtemplate common/footer}
复制代码 其中：边栏区域代码中，每个<div style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 10px; background-color: #f7f7f7; color: #666666; background-position: 0px 0px; border: 1px solid #cccccc;">
<h1 src="static/image/feed/profile.gif" alt="discuzx 打造单页面"> 分类浏览</h1>
复制代码 这一行下面加入：
<ul style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 10px; background-color: #f7f7f7; color: #666666; background-position: 0px 0px; border: 1px solid #cccccc;">
<!--{if $_G[gp_viewtype] == 'new'}-->
这里显示的是new选项卡下的内容
<!--{elseif $_G[gp_viewtype] == 'view'}-->
这里显示view选项卡下的内容
<!--{elseif $_G[gp_viewtype] == 'comment'}-->
这里显示comment选项卡下的内容
<!--{/if}-->
复制代码 这样就实现了一个模版文件中多个页面的效果。点击不同选项卡，显示不同内容。

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

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

只需要稍加改造，即可完成，如下：
将单页php文件调用模板的那行代码改成：
include template('diy:forum/host');
复制代码 这样就可以加载DIY模块，然后在单页模版中，添加DIY区域，如下：
<!--[diy=diy1]--><div id="diy1" style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 10px; background-color: #f7f7f7; color: #666666; background-position: 0px 0px; border: 1px solid #cccccc;">
<!--[diy=diy1]--><div id="diy1" style="margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 10px; background-color: #f7f7f7; color: #666666; background-position: 0px 0px; border: 1px solid #cccccc;">
<div class="area"></div><!--[/diy]-->
</div>
复制代码 这样就可以实现单页DIY功能了，需要说明的是，模版中要在什么地方加DIY区域，根据自己需要，并不是固定死的，自己设计在哪，就在哪里加入。


至此，本教程结束，希望站长们仔细阅读并认真动脑思考、研究，并且制作出自己的单页。