快捷导航
鸿蒙互联网 index 新闻频道 查看内容

鸿蒙互联网 | 单页制作教程 (DIY/左右边栏/标签选项卡)

2019-10-19 20:41| 发布者: byzps| 查看: 31| 评论: 0|原作者: byzps

摘要: 首先,单页包括该单页的php文件和该单页的模板(.htm)文件,比如:host.php、host.htm 普通单页的php文件内容如下: ?phpdefine('CURSCRIPT', 'test');require './source/class/class_core.php';//引入系统核心文 ...
首先,单页包括该单页的php文件和该单页的模板(.htm)文件,比如:host.php、host.htm


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


<?php
define('CURSCRIPT', 'test');
require './source/class/class_core.php';//引入系统核心文件
$discuz = & discuz_core::instance();//以下代码为创建及初始化对象
$discuz->init();
$navtitle = '标题';
$metakeywords = '关键词';
$metadescription = '描述';
include template('forum/host');//调用单页模版文件?>


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


$navtitle = '标题'; 这一句是定义单页的标题,显示于浏览器顶部的网页标题
$metakeywords = '关键词'; 是单页的关键词信息
$metadescription 是单页的描述信息。


可DIY的单页PHP文件代码内容如下:


<?php
define('CURSCRIPT', 'test');
require './source/class/class_core.php';//引入系统核心文件
$discuz = & discuz_core::instance();//以下代码为创建及初始化对象
$discuz->init();
loadcache('diytemplatename');
$navtitle = '标题';
$metakeywords = '关键词';
$metadescription = '描述';
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>»</em>
        <a href="forum.php">$_G[setting][bbname]</a><em>»</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>»</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>


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


<!--{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>»</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>





鲜花

握手

雷人

路过

鸡蛋

最新评论

相关分类

让创业更简单

  • 反馈建议:byzps@qq.com
  • 客服电话:15573841933
  • 工作时间:周一到周五

云服务支持

精彩文章,快速检索

关注我们

Copyright 鸿蒙 - 期待你的加入~  技术支持:©  子维工作室     ( 渝ICP备19008507号 )