discuzx2.0模板制作解析header.htm

2024-02-14 13:48

本文主要是介绍discuzx2.0模板制作解析header.htm,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

discuzx2.0模板制作解析header.htm

header.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!

第1行代码:
<!–{subtemplate common/header_common}–>
代码解释:用于调用common文件下的header_common.html文件,
备注:<!–{subtemplate}–> 与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需 要以<!–{subtemplate 模板名称}–>的方式引入进来。

第2-29行代码:
从<meta name=”application-name” content=”$_G['setting']['bbname']” />开始到以</head>结尾
代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写

第30-186行代码:
从<body>处开始到此文件的最下方
代码解释:这是首部文件的核心
备注:在修改时请注间要提前备份文件

第32-44行代码:
从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb”>结尾
代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
备注:<div id=”toptb”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!

第32-44行代码:
从代码:<div id=”toptb”>到</div><!–{if !IS_ROBOT}–>
代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div>右处内容</div>,<div>左处内容</div>
备注:在后台=》界面=》顶部导航。可以设置

 

 

第70-78行代码:

 

  1. <!–{if !IS_ROBOT}–>
  2.                         <!–{if $_G['uid'] && !emptyempty($_G['style']['extstyle'])}–>
  3.                                 <div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>
  4.                                         <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>
  5.                                         <!–{loop $_G['style']['extstyle'] $extstyle}–>
  6.                                                 <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]‘)” title=”$extstyle[1]“><i style=’background:$extstyle[2]‘></i></span>
  7.                                         <!–{/loop}–>
  8.                                 </div>
  9.                         <!–{/if}–>

 

代码解释:此处是拓展色的切换的菜单
备注:如里不需要可以删除

第80-96行代码:

 

  1. <div id=”qmenu_menu” class=”p_pop {if !$_G['uid']}blk{/if}” style=”display: none;”>
  2.                                         <!–{if $_G['uid']}–>
  3.                                         <ul>
  4.                                                 <!–{loop $_G['setting']['mynavs'] $nav}–>
  5.                                                         <!–{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}–>
  6.                                                                 <li>$nav[code]</li>
  7.                                                         <!--{/if}-->
  8.                                                 <!--{/loop}-->
  9.                                         </ul>
  10.                                         <!--{else}-->
  11.                                                 <div class="ptm pbw hm">
  12.                                                         {lang my_nav_login}
  13.                                                 </div>
  14.                                         <!--{/if}-->
  15.                                 </div>
  16.                 <!--{/if}-->

 

代码解释:此处是快捷导航弹出的菜单,里面用到了<!--{if $_G['uid']}-->语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
备注:<!--{if $_G['uid']}-->语句可以用到很多地方,自己在做模板的时候,可能会用到!

 
第97行代码:

 

  1. <!--{ad/headerbanner/wp a_h}-->

 

代码解释:头部的广告代码,
备注:可以在后台=》运营=站内广告添加

第98-184行代码:
从<div id="hd">到 </div><!--{/if}-->
代码解释:头部的核心文件
备注:下面是头部核心的DIV指引

 

  1. <div id="hd">
  2.         <div class="wp">
  3.              <div class="hdc cl">
  4.                 <h2>logo</h2>---------------------------------->logo
  5.                  <div id="um">
  6.                              <div class="avt y">头像</div>-----------------------------头像
  7.                        <p>
  8.                           <!--{hook/global_usernav_extra1}-->------------------------------------>插件嵌入点1
  9.                           <!--{hook/global_usernav_extra2}-->--------------------------------->插件嵌入点2
  10.                           个人信息---------------------------------------->个人信息
  11.                       </p>
  12.                       <p>
  13.                          <!--{hook/global_usernav_extra3}-->--------------------------->插件嵌入点3
  14.                          个人信息---------------------------------------->个人信息
  15.                      </p>
  16.                  </div>
  17.                        <!--{template member/login_simple}-->----- > 登录框(此处调用member/login_simple.html文件)                         </div>
  18.               <div id="nv">
  19.                   <a href="javascript:;" id="qmenu" >快捷导航</a>-------------->快捷导航
  20.                 <ul>
  21.                  <li>栏目导航</li>--------------------------------->栏目导航
  22.                  </ul>
  23.                 </div>
  24.                <ul class="p_pop h_pop" id="plugin_menu" style="display: none">
  25.                       二级导航菜单样式------------------------------------------------------>二级导航菜单样式
  26.                </ul>
  27.               < div id="mu" class="cl">
  28.                             二级导航横排>------------->二级导航横排样式
  29.               </div>
  30.               <!--{ad/subnavbanner/a_mu}-->------------------------->头部广告(后台站点广告处可以添加)
  31.                 <!--{subtemplate common/pubsearchform}-->-------->搜索(此处调用common/pubsearchform文件)                   </div>
  32.         </div><!--{hook/global_header}-->插件嵌入点

 

总结大家在修改的时候他的每个DIV和ul、li、和会有if语句,大家在看明白以上图后,在添加的时候要注意一下IF语句的作用,我就没有把代码复制到上面一一解析,希望大家去妍究下!利用这些资源,自己可以做出很漂亮的头部,举一反三!


这篇关于discuzx2.0模板制作解析header.htm的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/708666

相关文章

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

MySQL中FIND_IN_SET函数与INSTR函数用法解析

《MySQL中FIND_IN_SET函数与INSTR函数用法解析》:本文主要介绍MySQL中FIND_IN_SET函数与INSTR函数用法解析,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一... 目录一、功能定义与语法1、FIND_IN_SET函数2、INSTR函数二、本质区别对比三、实际场景案例分

Java图片压缩三种高效压缩方案详细解析

《Java图片压缩三种高效压缩方案详细解析》图片压缩通常涉及减少图片的尺寸缩放、调整图片的质量(针对JPEG、PNG等)、使用特定的算法来减少图片的数据量等,:本文主要介绍Java图片压缩三种高效... 目录一、基于OpenCV的智能尺寸压缩技术亮点:适用场景:二、JPEG质量参数压缩关键技术:压缩效果对比

关于WebSocket协议状态码解析

《关于WebSocket协议状态码解析》:本文主要介绍关于WebSocket协议状态码的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录WebSocket协议状态码解析1. 引言2. WebSocket协议状态码概述3. WebSocket协议状态码详解3

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd

Oracle数据库常见字段类型大全以及超详细解析

《Oracle数据库常见字段类型大全以及超详细解析》在Oracle数据库中查询特定表的字段个数通常需要使用SQL语句来完成,:本文主要介绍Oracle数据库常见字段类型大全以及超详细解析,文中通过... 目录前言一、字符类型(Character)1、CHAR:定长字符数据类型2、VARCHAR2:变长字符数

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON(序列化)2.2 JSON 转对象(反序列化)3.

Springboot @Autowired和@Resource的区别解析

《Springboot@Autowired和@Resource的区别解析》@Resource是JDK提供的注解,只是Spring在实现上提供了这个注解的功能支持,本文给大家介绍Springboot@... 目录【一】定义【1】@Autowired【2】@Resource【二】区别【1】包含的属性不同【2】@

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.

Java并发编程必备之Synchronized关键字深入解析

《Java并发编程必备之Synchronized关键字深入解析》本文我们深入探索了Java中的Synchronized关键字,包括其互斥性和可重入性的特性,文章详细介绍了Synchronized的三种... 目录一、前言二、Synchronized关键字2.1 Synchronized的特性1. 互斥2.