Discuz x2.5单页制作的教程
2013-12-26 14:34
190 查看
原文链接:http://www.zhanhelp.com/thread-5697-1-1.html
Discuz单页的制作其实还是很简单的,之前也有很多版本的单页制作的教程,今天这里主要讲Discuz
x2.5 单页的制作,包括单页的DIY,选项卡页面的制作等。
单页包括该单页的php文件和该单页的模板(.htm)文件,比如:news.php、news.htm。查看最新20新帖/回复 X2/X2.5 插件就是使用单页制作的,演示效果:http://www.zhanhelp.com/news.php,大家可以下载使用并且体验下。
站帮网发布的关于我们插件也是根据单页的教程制作的,只是结合dz插件机制做成插件了。
下面就开始分析说明单页的代码:
一、单页php页面的创建,适用于DIY和普通单页的代码如下:
<?php
define('CURSCRIPT', 'archy');//body的一个class标识
require './source/class/class_core.php';//引入系统核心文件
$discuz = &
discuz_core::instance();//以下代码为创建及初始化对象
$discuz->init();
loadcache('diytemplatename');//DIY要载入缓存
$navtitle = '单页的标题';
$metakeywords = '单页关键词1,单页关键词2';
$metadescription = '单页的描述说明';
include template('diy:forum/news');//调用单页模版文件
?>
复制代码
单页的php文件存放于论坛根目录。
注意:news为模板文件名,不需要加.htm扩展名,模板文件存放于默认风格目录下的forum目录。此处如果不理解可以看看Discuz!模板解析语法。
二、单页模板文件news.htm的创建。
1、普通内容单页的模版文件代码:
<!--{template
common/header}-->
<div id="pt" class="bm
cl">
<div
class="z">
<a href="./" class="nvhm" title="{lang
homepage}">$_G[setting][bbname]</a><em>»</em>
<a
href="forum.php">$_G[setting][bbname]</a><em>»</em>
<a
href="javascript:;">$navtitle</a>
</div>
</div>
<div id="ct" class="wp
cl">
<div
class="mn bm cl">
<div class="bm_c">
<p style="width:300px; margin:200px auto;
text-align:center;">这里是单页正文内容区域</p>
</div>
</div>
</div>
<!--{template
common/footer}-->
复制代码
2、可DIY的单页模版文件代码如下:
<!--{template
common/header}-->
<div id="pt" class="bm
cl">
<div
class="z">
<a href="./" class="nvhm" title="{lang
homepage}">$_G[setting][bbname]</a><em>»</em>
<a
href="forum.php">$_G[setting][bbname]</a><em>»</em>
<a
href="javascript:;">$navtitle</a>
</div>
</div>
<style id="diy_style"
type="text/css"></style>
<div class="wp">
<!--[diy=diy2]--><div
id="diy2"
class="area"></div><!--[/diy]-->
</div>
<div id="ct" class="wp
cl">
<div
class="mn bm cl">
<div class="bm_c">
<p style="width:300px; margin:200px auto;
text-align:center;">这里是单页正文内容区域</p>
</div>
</div>
</div>
<!--{template
common/footer}-->
复制代码
其中
<div class="wp">
<!--[diy=diy2]--><div
id="diy2"
class="area"></div><!--[/diy]-->
</div>
复制代码
这段代码就是DIY区域的代码,你也可以通过DIV布局,然后加入多个DIY区域。
注意:如果一个页面要插入多个DIY区域,注意修改上面DIY区域的编号ID,几个DIY区域的ID编号不能相同。
3、带有右侧边栏的单页模版文件代码:
<!--{subtemplate
common/header}-->
<div id="pt" class="bm
cl">
<div
class="z">
<a href="./" class="nvhm" title="{lang
homepage}">$_G[setting][bbname]</a><em>»</em>
<a
href="forum.php">$_G[setting][bbname]</a><em>»</em>
<a
href="javascript:;">$navtitle</a>
</div>
</div>
<div id="ct" class="wp cl
ct2">
<div
class="mn bm cl">
<div
class="bm_h">标题栏</div>
<div class="bm_c">
<p
style="width:300px; margin:220px auto;
text-align:center;">这里是单页正文内容区域</p>
</div>
</div>
<div
class="sd">
<div
class="bm">
<div
class="bm_h">
<h2>公告栏</h2>
</div>
<div
class="bm_c">
<p
class="xl xl2 cl"
style="line-height:25px;">
这里可以放一些公告通知类的文字内容
</p>
</div>
</div>
<div
class="bm">
<div
class="bm_h">
<h2>操作菜单</h2>
</div>
<div
class="bm_c">
<ul
class="xl xl2 cl">
<li><a
href="#">测试菜单一</a></li>
<li><a
href="#">测试菜单二</a></li>
<li><a
href="#">测试菜单三</a></li>
<li><a
href="#">测试菜单四</a></li>
<li><a
href="#">测试菜单五</a></li>
<li><a
href="#">测试菜单六</a></li>
</ul>
</div>
</div>
<div
class="bm">
<div
class="bm_h">
<h2>版权信息</h2>
</div>
<div class="bm_c"
style="line-height:25px;">
<ul>
<li>作者:<a
href="http://www.zhanhelp.com/"
target="_blank">ARCHY</a></li>
<li>网站:<a
href="http://www.zhanhelp.com/"
target="_blank">站帮网</a></li>
<li>版权:站帮网</li>
</ul>
</div>
</div>
</div>
</div>
<!--{subtemplate
common/footer}-->
复制代码
4、带有标签选项卡的单页模版:
common/header}-->
<div id="pt" class="bm
cl">
<div
class="z">
<a href="./" class="nvhm" title="{lang
homepage}">$_G[setting][bbname]</a><em>»</em>
<a
href="forum.php">$_G[setting][bbname]</a><em>»</em>
<a
href="javascript:;">$navtitle</a>
</div>
</div>
<div id="ct" class="wp cl
ct2">
<div
class="mn bm cl" style="float:right;">
<div
class="bm_h">标题栏</div>
<div class="bm_c">
<ul class="tb
cl">
<li
<!--{if empty($_G[gp_viewtype]) || $_G[gp_viewtype]
==
'new'}-->class="a"<!--{/if}-->><a
href="news.php?viewtype=new">最新发布</a></li>
<li
<!--{if $_G[gp_viewtype] ==
'view'}-->class="a"<!--{/if}-->><a
href="news.php?viewtype=view">浏览排行</a></li>
<li
<!--{if $_G[gp_viewtype] ==
'comment'}-->class="a"<!--{/if}-->><a
href="news.php?viewtype=comment">回复排行</a></li>
<li <!--{if $_G[gp_viewtype] ==
'rate'}-->class="a"<!--{/if}-->><a
href="news.php?viewtype=rate">评分排行</a></li>
</ul>
<div
class="archy_con">
<!--{if $_G[gp_viewtype] ==
'new'}-->
这里显示的是new选项卡下的内容
<!--{elseif $_G[gp_viewtype] ==
'view'}-->
这里显示view选项卡下的内容
<!--{elseif $_G[gp_viewtype] ==
'comment'}-->
这里显示comment选项卡下的内容
<!--{/if}-->
</div>
</div>
</div>
<div class="sd"
style="float:left;">
<div
class="bm">
<div
class="bm_h">
<h2>公告栏</h2>
</div>
<div
class="bm_c">
<p
class="xl xl2 cl"
style="line-height:25px;">
这里可以放一些公告通知类的文字内容这
</p>
</div>
</div>
<div
class="bm">
<div
class="bm_h">
<h2>操作菜单</h2>
</div>
<div
class="bm_c">
<ul
class="xl xl2 cl">
<li><a
href="#">测试菜单一</a></li>
<li><a
href="#">测试菜单二</a></li>
<li><a
href="#">测试菜单三</a></li>
<li><a
href="#">测试菜单四</a></li>
<li><a
href="#">测试菜单五</a></li>
<li><a
href="#">测试菜单六</a></li>
</ul>
</div>
</div>
<div
class="bm">
<div
class="bm_h">
<h2>版权信息</h2>
</div>
<div class="bm_c"
style="line-height:25px;">
<ul>
<li>作者:<a
href="http://www.zhanhelp.com/"
target="_blank">站帮网</a></li>
<li>网站:<a
href="http://www.zhanhelp.com/"
target="_blank">站帮网</a></li>
<li>版权:站帮网</li>
</ul>
</div>
</div>
</div>
</div>
<!--{subtemplate
common/footer}-->
复制代码
其中
<ul class="tb cl">
<li
<!--{if empty($_GET["viewtype"]) ||
$_GET["viewtype"] ==
'new'}-->class="a"<!--{/if}-->><a
href="news.php?viewtype=new">最新发布</a></li>
<li
<!--{if $_GET["viewtype"] ==
'view'}-->class="a"<!--{/if}-->><a
href="news.php?viewtype=view">浏览排行</a></li>
<li
<!--{if $_GET["viewtype"] ==
'comment'}-->class="a"<!--{/if}-->><a
href="news.php?viewtype=comment">回复排行</a></li>
<li <!--{if $_GET["viewtype"] ==
'rate'}-->class="a"<!--{/if}-->><a
href="news.php?viewtype=rate">评分排行</a></li>
</ul>
复制代码
解释上面代码,其中每个<li>标签,就是一个选项卡,里面的超链接news.php?viewtype=new,这里的viewtype就是指定一个变量,并且指定值为new,点击这个选项卡时候$_G[gp_viewtype]就会获取到这个值,然后通过判断$_G[gp_viewtype]的值,来选择当前选项卡是否为焦点选项。
建立多页的方法有2种,一种是建立多个单页,包括多个php文件和多个模板文件,当然这种方法比较直接,但是比较麻烦;第二种就是我们上面说的方法:可以在同一个模板文件中判断$_G[gp_viewtype]的值来选择显示不同的内容,比如在正文区域中如下代码:
<!--{if $_GET["viewtype"] ==
'new'}-->
这里显示的是new选项卡下的内容
<!--{elseif $_GET["viewtype"] ==
'view'}-->
这里显示view选项卡下的内容
<!--{elseif $_GET["viewtype"] ==
'comment'}-->
这里显示comment选项卡下的内容
<!--{/if}-->
复制代码
这样就实现了一个模版文件中多个页面的效果。点击不同选项卡,显示不同内容。
如果你喜欢做模版,可以看看:Discuz模板的制作方法;
如果你还不会安装模板,可以看看:Discuz模板的安装方法。
Discuz单页的制作其实还是很简单的,之前也有很多版本的单页制作的教程,今天这里主要讲Discuz
x2.5 单页的制作,包括单页的DIY,选项卡页面的制作等。
单页包括该单页的php文件和该单页的模板(.htm)文件,比如:news.php、news.htm。查看最新20新帖/回复 X2/X2.5 插件就是使用单页制作的,演示效果:http://www.zhanhelp.com/news.php,大家可以下载使用并且体验下。
站帮网发布的关于我们插件也是根据单页的教程制作的,只是结合dz插件机制做成插件了。
下面就开始分析说明单页的代码:
一、单页php页面的创建,适用于DIY和普通单页的代码如下:
<?php
define('CURSCRIPT', 'archy');//body的一个class标识
require './source/class/class_core.php';//引入系统核心文件
$discuz = &
discuz_core::instance();//以下代码为创建及初始化对象
$discuz->init();
loadcache('diytemplatename');//DIY要载入缓存
$navtitle = '单页的标题';
$metakeywords = '单页关键词1,单页关键词2';
$metadescription = '单页的描述说明';
include template('diy:forum/news');//调用单页模版文件
?>
复制代码
单页的php文件存放于论坛根目录。
注意:news为模板文件名,不需要加.htm扩展名,模板文件存放于默认风格目录下的forum目录。此处如果不理解可以看看Discuz!模板解析语法。
二、单页模板文件news.htm的创建。
1、普通内容单页的模版文件代码:
<!--{template
common/header}-->
<div id="pt" class="bm
cl">
<div
class="z">
<a href="./" class="nvhm" title="{lang
homepage}">$_G[setting][bbname]</a><em>»</em>
<a
href="forum.php">$_G[setting][bbname]</a><em>»</em>
<a
href="javascript:;">$navtitle</a>
</div>
</div>
<div id="ct" class="wp
cl">
<div
class="mn bm cl">
<div class="bm_c">
<p style="width:300px; margin:200px auto;
text-align:center;">这里是单页正文内容区域</p>
</div>
</div>
</div>
<!--{template
common/footer}-->
复制代码
2、可DIY的单页模版文件代码如下:
<!--{template
common/header}-->
<div id="pt" class="bm
cl">
<div
class="z">
<a href="./" class="nvhm" title="{lang
homepage}">$_G[setting][bbname]</a><em>»</em>
<a
href="forum.php">$_G[setting][bbname]</a><em>»</em>
<a
href="javascript:;">$navtitle</a>
</div>
</div>
<style id="diy_style"
type="text/css"></style>
<div class="wp">
<!--[diy=diy2]--><div
id="diy2"
class="area"></div><!--[/diy]-->
</div>
<div id="ct" class="wp
cl">
<div
class="mn bm cl">
<div class="bm_c">
<p style="width:300px; margin:200px auto;
text-align:center;">这里是单页正文内容区域</p>
</div>
</div>
</div>
<!--{template
common/footer}-->
复制代码
其中
<div class="wp">
<!--[diy=diy2]--><div
id="diy2"
class="area"></div><!--[/diy]-->
</div>
复制代码
这段代码就是DIY区域的代码,你也可以通过DIV布局,然后加入多个DIY区域。
注意:如果一个页面要插入多个DIY区域,注意修改上面DIY区域的编号ID,几个DIY区域的ID编号不能相同。
3、带有右侧边栏的单页模版文件代码:
<!--{subtemplate
common/header}-->
<div id="pt" class="bm
cl">
<div
class="z">
<a href="./" class="nvhm" title="{lang
homepage}">$_G[setting][bbname]</a><em>»</em>
<a
href="forum.php">$_G[setting][bbname]</a><em>»</em>
<a
href="javascript:;">$navtitle</a>
</div>
</div>
<div id="ct" class="wp cl
ct2">
<div
class="mn bm cl">
<div
class="bm_h">标题栏</div>
<div class="bm_c">
<p
style="width:300px; margin:220px auto;
text-align:center;">这里是单页正文内容区域</p>
</div>
</div>
<div
class="sd">
<div
class="bm">
<div
class="bm_h">
<h2>公告栏</h2>
</div>
<div
class="bm_c">
<p
class="xl xl2 cl"
style="line-height:25px;">
这里可以放一些公告通知类的文字内容
</p>
</div>
</div>
<div
class="bm">
<div
class="bm_h">
<h2>操作菜单</h2>
</div>
<div
class="bm_c">
<ul
class="xl xl2 cl">
<li><a
href="#">测试菜单一</a></li>
<li><a
href="#">测试菜单二</a></li>
<li><a
href="#">测试菜单三</a></li>
<li><a
href="#">测试菜单四</a></li>
<li><a
href="#">测试菜单五</a></li>
<li><a
href="#">测试菜单六</a></li>
</ul>
</div>
</div>
<div
class="bm">
<div
class="bm_h">
<h2>版权信息</h2>
</div>
<div class="bm_c"
style="line-height:25px;">
<ul>
<li>作者:<a
href="http://www.zhanhelp.com/"
target="_blank">ARCHY</a></li>
<li>网站:<a
href="http://www.zhanhelp.com/"
target="_blank">站帮网</a></li>
<li>版权:站帮网</li>
</ul>
</div>
</div>
</div>
</div>
<!--{subtemplate
common/footer}-->
复制代码
4、带有标签选项卡的单页模版:
本帖隐藏的内容
<!--{subtemplatecommon/header}-->
<div id="pt" class="bm
cl">
<div
class="z">
<a href="./" class="nvhm" title="{lang
homepage}">$_G[setting][bbname]</a><em>»</em>
<a
href="forum.php">$_G[setting][bbname]</a><em>»</em>
<a
href="javascript:;">$navtitle</a>
</div>
</div>
<div id="ct" class="wp cl
ct2">
<div
class="mn bm cl" style="float:right;">
<div
class="bm_h">标题栏</div>
<div class="bm_c">
<ul class="tb
cl">
<li
<!--{if empty($_G[gp_viewtype]) || $_G[gp_viewtype]
==
'new'}-->class="a"<!--{/if}-->><a
href="news.php?viewtype=new">最新发布</a></li>
<li
<!--{if $_G[gp_viewtype] ==
'view'}-->class="a"<!--{/if}-->><a
href="news.php?viewtype=view">浏览排行</a></li>
<li
<!--{if $_G[gp_viewtype] ==
'comment'}-->class="a"<!--{/if}-->><a
href="news.php?viewtype=comment">回复排行</a></li>
<li <!--{if $_G[gp_viewtype] ==
'rate'}-->class="a"<!--{/if}-->><a
href="news.php?viewtype=rate">评分排行</a></li>
</ul>
<div
class="archy_con">
<!--{if $_G[gp_viewtype] ==
'new'}-->
这里显示的是new选项卡下的内容
<!--{elseif $_G[gp_viewtype] ==
'view'}-->
这里显示view选项卡下的内容
<!--{elseif $_G[gp_viewtype] ==
'comment'}-->
这里显示comment选项卡下的内容
<!--{/if}-->
</div>
</div>
</div>
<div class="sd"
style="float:left;">
<div
class="bm">
<div
class="bm_h">
<h2>公告栏</h2>
</div>
<div
class="bm_c">
<p
class="xl xl2 cl"
style="line-height:25px;">
这里可以放一些公告通知类的文字内容这
</p>
</div>
</div>
<div
class="bm">
<div
class="bm_h">
<h2>操作菜单</h2>
</div>
<div
class="bm_c">
<ul
class="xl xl2 cl">
<li><a
href="#">测试菜单一</a></li>
<li><a
href="#">测试菜单二</a></li>
<li><a
href="#">测试菜单三</a></li>
<li><a
href="#">测试菜单四</a></li>
<li><a
href="#">测试菜单五</a></li>
<li><a
href="#">测试菜单六</a></li>
</ul>
</div>
</div>
<div
class="bm">
<div
class="bm_h">
<h2>版权信息</h2>
</div>
<div class="bm_c"
style="line-height:25px;">
<ul>
<li>作者:<a
href="http://www.zhanhelp.com/"
target="_blank">站帮网</a></li>
<li>网站:<a
href="http://www.zhanhelp.com/"
target="_blank">站帮网</a></li>
<li>版权:站帮网</li>
</ul>
</div>
</div>
</div>
</div>
<!--{subtemplate
common/footer}-->
复制代码
其中
<ul class="tb cl">
<li
<!--{if empty($_GET["viewtype"]) ||
$_GET["viewtype"] ==
'new'}-->class="a"<!--{/if}-->><a
href="news.php?viewtype=new">最新发布</a></li>
<li
<!--{if $_GET["viewtype"] ==
'view'}-->class="a"<!--{/if}-->><a
href="news.php?viewtype=view">浏览排行</a></li>
<li
<!--{if $_GET["viewtype"] ==
'comment'}-->class="a"<!--{/if}-->><a
href="news.php?viewtype=comment">回复排行</a></li>
<li <!--{if $_GET["viewtype"] ==
'rate'}-->class="a"<!--{/if}-->><a
href="news.php?viewtype=rate">评分排行</a></li>
</ul>
复制代码
解释上面代码,其中每个<li>标签,就是一个选项卡,里面的超链接news.php?viewtype=new,这里的viewtype就是指定一个变量,并且指定值为new,点击这个选项卡时候$_G[gp_viewtype]就会获取到这个值,然后通过判断$_G[gp_viewtype]的值,来选择当前选项卡是否为焦点选项。
建立多页的方法有2种,一种是建立多个单页,包括多个php文件和多个模板文件,当然这种方法比较直接,但是比较麻烦;第二种就是我们上面说的方法:可以在同一个模板文件中判断$_G[gp_viewtype]的值来选择显示不同的内容,比如在正文区域中如下代码:
<!--{if $_GET["viewtype"] ==
'new'}-->
这里显示的是new选项卡下的内容
<!--{elseif $_GET["viewtype"] ==
'view'}-->
这里显示view选项卡下的内容
<!--{elseif $_GET["viewtype"] ==
'comment'}-->
这里显示comment选项卡下的内容
<!--{/if}-->
复制代码
这样就实现了一个模版文件中多个页面的效果。点击不同选项卡,显示不同内容。
如果你喜欢做模版,可以看看:Discuz模板的制作方法;
如果你还不会安装模板,可以看看:Discuz模板的安装方法。
相关文章推荐
- Discuz&nbsp;x2.5&nbsp;单页制作的教程
- Discuz!X&nbsp;插件制作教程(三)&amp;n…
- 利用Photoshop制作iPhone 4教程
- Discuz!X 插件制作教程(三) ------ 页面嵌入 & 导航
- Discuz!X 插件制作教程 ------ 页面嵌入 & 导航
- 转:ps制作按钮教程&nbsp;正方形凹…
- 让你酷起来&nbsp;超详细iPhone主题制作教程
- 1.1.4&nbsp;iPhone系统固件制作教程(Mac)
- [插件制作]&nbsp;Discuz插件…
- Discuz!X 插件制作教程(三) ------ 页面嵌入 & 导航
- [插件制作]&nbsp;Discuz!插…
- 制作Kinect体感控制小车教程 <一>
- 图解教程:Google Adsense和百度联…
- Total&nbsp;Video视频转换软件使用教程
- 使用dreamweaver&nbsp;制作网页幻灯片
- 连破6台1.1.1&nbsp;Windows破解教程图文版
- 新3分钟搞定&nbsp;iPhone1.1.2/1.1.3软破教程
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
- VTK教程之八&nbsp;可视化基础算法-颜色…
- 解读Discuz!&nbsp;X2.5全新架构&amp;nb…