discuzX1.5制作单页教程

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

本帖隐藏的内容

单页的php文件内容如下：

1. <?php

3. require './source/class/class_core.php';//引入系统核心文件

4. $discuz = & discuz_core::instance();//以下代码为创建及初始化对象

5. $discuz->cachelist = $cachelist;

6. $discuz->init();

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

9. ?>

复制代码

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

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

1. {subtemplate common/header}

3. <div id="pt" class="wp">

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

5. </div>

6. <style id="diy_style" type="text/css"></style>

8. <div id="ct" class="wp cl w">

10. <div class="mn mw">

11. <div class="content">

12.

13. 这里是自己正文区域的代码

14.

15. </div>

16. </div>

17. </div>

18.

19. {subtemplate common/footer}

复制代码

其中：

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

复制代码

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

至此，基本型单页创建完毕。演示效果见：http://bbs.7drc.com/host.php

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

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

1. {subtemplate common/header}

2. <div id="pt" class="wp"><a href="index.php" class="nvhm">$_G[setting][bbname]</a> &rsaquo; 会员风采</div>

3. <div id="ct" class="wp cl n">

4. <div class="mn">

5. <div class="bm">

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

7. <div class="datalist" style="margin:10px 0;">

9. 这里是正文区域代码

10.

11. </div>

12. </div>

13. </div>

14.

15.

16. <div id="psd" class="sd">

17.

18. <div class="bn">

19. <p><strong>栏目名称</p>

20. <p><a href="#">边栏菜单名称</a></p>

21. <p><a href="#">边栏菜单名称</a></p>

22. <p><a href="#">边栏菜单名称</a></p>

23. </div>

24.

25. <div class="bn">

26. <p><strong>管理面板</strong></p>

27. <p><a href="#">添加分类</a></p>

28. <p><a href="#">管理分类</a></p>

29. <p><a href="#">返回会员风采</a></p>

30. </div>

31.

32. <div class="bn" style="border-bottom:none;">

33. <p><strong>版权信息</strong></p>

34. <p>作者：体无完肤</p>

35. <p>版权：DRC</p>

36. <p>网站：bbs.7drc.com</p>

37. </div>

38.

39. </div>

40.

41. </div>

42.

43. {subtemplate common/footer}

复制代码

其中：边栏区域代码中，每个<div class="bn">区块为一个边栏菜单区域；
演示效果见：http://bbs.7drc.com/plugin.php?id=drc_shownow:main

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

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

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

复制代码

这一行下面加入：

1. <ul class="tb cl">

2. <li class="a"><a href="host.php?viewtype=new">最新发布</a></li>

3. <li class="a"><a href="host.php?viewtype=view">浏览排行</a></li>

4. <li class="a"><a href="host.php?viewtype=comment">回复排行</a></li>

5. <li class="a"><a href="host.php?viewtype=rate">评分排行</a></li>

6. </ul>

复制代码

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

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

1.

2. 这里显示的是new选项卡下的内容

3.

4. 这里显示view选项卡下的内容

5.

6. 这里显示comment选项卡下的内容

7.

复制代码

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

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

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

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

1. include template('diy:forum/host');

复制代码

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

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

复制代码

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

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

2. <div id="diy2" class="area"></div>

3. <div id="diy3" class="area"></div>

复制代码

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

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

1. <div class="wp">

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

3. </div>

复制代码

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

discuzX1.5制作单页教程相关推荐

用Angular制作单页应用视图切换动画
视图,动画单页应用(Single Page Web Application)往往有一个基本的要点,那就是把多个视图集成到一个网页内,然后去控制这些视图的显示和隐藏.此外,视图的切换动作几乎都会引入动 ...
如何将ps滑动条转换为matlab,怎么用MATLAB制作翻页教程|MATLAB如何制作翻书效果 - PS下...
如何制作这样一个翻页式广告的效果?其实本来想用PS,但是这个用Ps处理不是很方便,可能关键原因在于我没有找到如何快速地将一个图片不断地进行切割,压缩,切割压缩的实现方法,所以我采用MATLAB做了一下 ...
Vue+Echarts制作单页面的XMR矿池监控台
练手用的,数据源是从矿池官网拿的json,页面源代码存个档 <!DOCTYPE html> <html lang="en"><head>< ...
【UI设计No7】单页
什么是单页 DM单有两种表述,但是在本质上的意思上都是差不多的,都是强调的是直接投递或是邮寄.第一种,DM是英idirect mail advertising的省略表述,译为"直接邮寄广告& ...
关于单页应用（SPA）的经验之谈
时下SPA单页应用如火如荼,对前端乃至后端开发都带来不小的冲击和变革.笔者整理了下笔记,决定写一下以前基于iframe做单页博客的一些经验方法. 对于单页应用,笔者没有找到最官方的定义.在笔者看来,在 ...
织梦制作单页面模板的2种方法
在用dedecms织梦程序制作企业模板时需要用到公司介绍.联系我们.关于我们等相关单页面,可织梦dedecms不像wordpress或其它程序单独提供有页面功能,可以直接新建页面.不过织梦dedecm ...
营销型单页企业网站的力量
单页营销网站(http://www.uqc.com.cn)站能够象一个最精明的销售员一样,对每一个客户都能重点说明了你的产品优势.可以引导他.刺激他去购买你的产品.传播快速.销售力强.转化率高!是一个 ...
上树建站教程：新手单页网站制作教程上集
功能强大. 链接.文件下载等功能,一份源程序可以制造出无数个网站,只需一些超级简单的页面程序可以随意的编辑.修改,包括:图片.文案.背景.图片滚动单页型网站:就是一个独立页面的网站,是一个纯HT ...
pageadmin CMS网站制作教程：栏目单页内容如何修改
pageadmin CMS网站制作教程: 栏目单页内容如何修改一般情况下,如公司介绍,联系方式等介绍内页面都属于单页,单页内容可以直接在栏目设置界面进行修改,如下 1.对栏目单页内容进行设置,登录后 ...

discuzX1.5制作单页教程

discuzX1.5制作单页教程相关推荐

最新文章

热门文章