吾爱源码
首页 > 站长学院 > CMS教程 > Discuz论坛添加单页面,自定义页面教程

Discuz论坛添加单页面,自定义页面教程

作者:佚名 来源:吾爱源码 2017-07-25 15:26:52

此方法简单到只有一句话:新建一个专题就行了,还可以自定义二级域名和URL,可以设置是否包括页头、页脚,Title/Keywords/description等信息自然不在话下。

  新建完后就可以DIY,想往里加什么就加什么。

  鉴于此方法太过简单,本文过于单薄,所以增加一个普通方法供大家比较。

  首先,单页包括该单页的php文件和该单页的模板(.htm)文件,比如:host.php、host.htm

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

<?phpdefine('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文件代码内容如下:

<?phpdefine('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文件创建完毕,现在开始创建模版文件,基本代码如下:

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

<!--{template common/header}--><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><!--{template common/footer}-->

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

<!--{template common/header}-->
<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>&raquo;</em>
        <a href="forum.php">$_G[setting][bbname]</a><em>&raquo;</em>
        <a href="javascript:;">$navtitle</a>
    </div>
</div>

<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区域的代码,之前X1.5的单页教程里面我们也讲到过,可以在单页的任意位置插入DIY区域,即:

<!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->

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

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

<!--{subtemplate common/header}-->
<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>&raquo;</em>
        <a href="forum.php">$_G[setting][bbname]</a><em>&raquo;</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>

<!--{subtemplate common/footer}-->

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

<!--{subtemplate common/header}-->
<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>&raquo;</em>
        <a href="forum.php">$_G[setting][bbname]</a><em>&raquo;</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>

<!--{subtemplate common/footer}-->

注意观察这个左侧边栏的模版代码和右侧边栏的模版代码,可以发现,代码其实都一样,只是更改一下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;">

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

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

<!--{subtemplate common/header}-->
<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>&raquo;</em>
        <a href="forum.php">$_G[setting][bbname]</a><em>&raquo;</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="test.php?viewtype=new">最新发布</a></li>
                                <li <!--{if $_G[gp_viewtype] == 'view'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=view">浏览排行</a></li>
                                <li <!--{if $_G[gp_viewtype] == 'comment'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=comment">回复排行</a></li>
                <li <!--{if $_G[gp_viewtype] == 'rate'}-->class="a"<!--{/if}-->><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>

<!--{subtemplate common/footer}-->

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

<ul class="tb cl">
                                <li <!--{if empty($_G[gp_viewtype]) || $_G[gp_viewtype] == 'new'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=new">最新发布</a></li>
                                <li <!--{if $_G[gp_viewtype] == 'view'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=view">浏览排行</a></li>
                                <li <!--{if $_G[gp_viewtype] == 'comment'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=comment">回复排行</a></li>
                <li <!--{if $_G[gp_viewtype] == 'rate'}-->class="a"<!--{/if}-->><a href="test.php?viewtype=rate">评分排行</a></li>
                        </ul>


  • 热门软件
  • 热门标签
返回顶部