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

admin · 发表于 2021-12-15 15:08:23

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

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

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

<?php define('CURSCRIPT', 'test'); require './source/class/class_core.php';//引入系统核心文件 $discuz = & discuz_core::instance();//以下代码为创建及初始化对象 $discuz->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文件代码内容如下：

<?php define('CURSCRIPT', 'test'); require './source/class/class_core.php';//引入系统核心文件 $discuz = & discuz_core::instance();//以下代码为创建及初始化对象 $discuz->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文件创建完毕，现在开始创建模版文件，基本代码如下：

普通单页的模版文件代码：

<style id="diy_style" type="text/css"></style> <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>

复制代码

效果如下：

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

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

可DIY的单页模版文件代码如下：

<style id="diy_style" type="text/css"></style> <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 class="wp"> <div id="diy2" class="area"></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>

复制代码

其中：

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

复制代码

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

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

复制代码

注意：如果一个页面要插入多个DIY区域，注意修改上面DIY区域的编号ID，几个DIY区域的ID编号不能相同。
-------------------------------------------------------------------------------------

带有右侧边栏的单页模版文件代码：

<style id="diy_style" type="text/css"></style> <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.mutoulee.cn" target="_blank">体无完肤</a></li> <li>网站：<a href="http://bbs.7drc.com" target="_blank">bbs.7drc.com</a></li> <li>版权：Discuz! Rescue Centre</li> </ul> </div> </div> </div> </div>

复制代码

效果如下：

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

带有左侧边栏的单页模版文件代码：

<style id="diy_style" type="text/css"></style> <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"> <p style="width:300px; margin:220px auto; text-align:center;">这里是单页正文内容区域</p> </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.mutoulee.cn" target="_blank">体无完肤</a></li> <li>网站：<a href="http://bbs.7drc.com" target="_blank">bbs.7drc.com</a></li> <li>版权：Discuz! Rescue Centre</li> </ul> </div> </div> </div> </div>

复制代码

注意观察这个左侧边栏的模版代码和右侧边栏的模版代码，可以发现，代码其实都一样，只是更改一下CSS样式。

<div class="mn bm cl"> 给这个div加一个向右浮动，即：

<div class="mn bm cl" style="float:right;">

复制代码

再给 <div class="sd"> 这个div加一个向左浮动的CSS样式，即：

<div class="sd" style="float:left;">

复制代码

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

演示效果如下：

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

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

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

<style id="diy_style" type="text/css"></style> <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 class="a"><a href="test.php?viewtype=new">最新发布</a></li> <li class="a"><a href="test.php?viewtype=view">浏览排行</a></li> <li class="a"><a href="test.php?viewtype=comment">回复排行</a></li> <li class="a"><a href="test.php?viewtype=rate">评分排行</a></li> </ul> <p style="width:300px; margin:200px auto; text-align:center;">这里是单页正文内容区域</p> </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.mutoulee.cn" target="_blank">体无完肤</a></li> <li>网站：<a href="http://bbs.7drc.com" target="_blank">bbs.7drc.com</a></li> <li>版权：Discuz! Rescue Centre</li> </ul> </div> </div> </div> </div>

复制代码

注意观察你会发现，选项卡这一部分跟X1.5一样的，就是在模版的正文区域的div内增加一段代码：

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

复制代码

效果如下：

此次教程整理结束。

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

独家记忆 · 发表于 2021-12-15 15:09:12

学习学习

Discuz智能体 · 发表于 2025-3-14 07:47:46

您提供的Discuz! X2单页制作教程内容详实，对站长自定义页面开发很有参考价值。以下从专业开发角度对关键点进行技术解析和优化建议：

一、单页核心架构优化方案
1. 模板继承机制建议
推荐采用和实现模板继承，确保页面头部/尾部统一管理

2. 动态数据加载方案
$datalist = C::t('forum_thread')->fetch_all_by_type(...);
需配合C::t()工厂类进行规范数据操作，建议加入缓存机制：
loadcache('threadcache');
if(!$_G['cache']['threadcache']){
// 重建缓存逻辑
}

二、DIY模块深度优化方案
1. 多区域控制技巧
<div id="diyarea_{$_G['diy_identifier']}_1" class="area"></div>
每个DIY区域需保证唯一标识符，推荐使用模块化命名方式：
$_G['diy_identifier'] = 'custompage_'.$_GET['id'];

2. 持久化存储方案
更新模板后必须执行：
require_once libfile('function/cache');
updatecache('diytemplatename');

三、边栏系统技术实现方案
1. 响应式布局解决方案
推荐使用Discuz原生栅格系统：
<div class="cl">
<div class="forumcontrol fl" style="width:200px">
      
</div>
<div class="forumcontrol f_r" style="width:760px">
      
</div>
</div>

四、选项卡组件进阶方案
1. 动态加载技术实现
需配合Discuz! Ajax机制：
<a href="javascript:;" onclick="ajaxget('forum.php?mod=ajax&action=filter&typeid=1','tab_content')">最新发布</a>
<div id="tab_content"></div>

五、SEO深度优化建议
1. 语义化增强方案
<article class="threadlist">
<header>
      <h1>$navtitle</h1>
</header>
<section class="content">
      
</section>
</article>

六、缓存策略优化方案
1. 混合缓存方案
if(!defined('IN_DISCUZ')) exit('Access Denied');
$cachekey = 'custompage_'.$_GET['id'];
if(!$data = loadcache($cachekey)){
$data = C::t('#myplugin#mytable')->fetch_all();
savecache($cachekey, $data, 3600);
}

七、安全防护方案
1. 输入过滤机制
$pageid = intval($_GET['id']);
$content = dhtmlspecialchars($_GET['content']);

八、扩展开发建议
如需实现更复杂的交互功能，可参考DZ-X开发者文档中的插件开发规范，通过hook机制实现功能扩展：
// hook.custompage_sidebar.php
$param['sidebar'] .= '<div class="custom_block">扩展内容</div>';

建议站长在具体实施时注意：
1. 模板更新后务必到后台"工具->更新缓存"
2. 多语言支持需使用lang元素：{lang my_custom_title}
3. 移动端适配建议使用Discuz!原生触屏版框架
4. 性能敏感场景建议使用内存级缓存

如遇到具体开发问题，可到DZ-X开发者社区提交技术工单获取更详细的代码级支持。对于复杂业务场景，建议采用插件化开发模式保证系统可维护性。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。