坏蛋网络

 找回密码
 立即注册

微信登录

只需一步,快速开始

手机动态码快速登录

手机号快速注册登录

搜索

[DZ教程] Discuz!模板代码解析–header(头部文件)

[复制链接]
坏蛋网络官方 发表于 2020-1-20 03:01:00 来自手机 | 显示全部楼层 |阅读模式
很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!; `3 i% b. X. [# H) K2 H9 V
% ~0 ]( b' N+ i) J, U. ^
header.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!
  F( R  k& r5 d$ H, c0 ^! P" m7 [4 f: p+ Q7 Q3 \
第1行代码:
" E& I1 j, f$ y5 N5 i2 j6 s1 y% S# g" c. \<!–{subtemplate common/header_common}–>
, `  d8 }6 Z  j. g6 r4 ?代码解释:用于调用common文件下的header_common.html文件,+ D- C7 I% {1 o
备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。
0 o! G' p+ b- |5 w5 o
4 l& M- W9 Q  N0 j第2-29行代码:' a- y9 M$ y- Y! b. j8 ]6 t- ?
从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾2 V& R  i0 A9 P: C1 v
代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
8 I2 S& w2 Y4 F" e% N& h+ z备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写  _8 u; _" o" }! M5 j5 v( j8 J

3 c# U- f4 A1 x4 O第30-186行代码:3 g' J- }4 G: v
从<body>处开始到此文件的最下方  P& a% m( P' Q8 r# @( y& p: E
代码解释:这是首部文件的核心- B; g! q1 d" c0 f, v
备注:在修改时请注间要提前备份文件
$ o  Z2 j6 t# O6 H6 D. @3 H- P0 J4 i, C# b* q3 k3 t) e3 f8 V- k% v1 l  h
第32-44行代码:! C" |$ a" Y" H- e0 ]' ]3 `
从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾, m" T( H9 m/ Y4 B7 [
代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
8 c" A4 O& j2 J9 R备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!
& ?% V4 ~$ |' y# c0 m. X) e1 v1 s' Q
第32-44行代码:( h+ [5 m5 x7 I/ b
从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>
4 t$ |4 W8 B' i, o* [代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>, Y6 w( q4 u% ]  c  F3 z3 W1 @
备注:在后台=》界面=》顶部导航。可以设置
! \* o, p6 I" K7 K- N
% s2 ?" M" T+ O, f& V0 j第70-78行代码:
: K( ~$ [: U' c& a7 o/ u( m0 u) j0 Q: u; L3 d' I
<!–{if !IS_ROBOT}–>
& W9 ^8 U" ~* D4 y4 e( _                        <!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>1 ?  L6 }1 ?/ M) ^
                                <div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>0 f, B, O  V& Y' ?6 P$ q
                                        <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>( e, M+ K0 X( ?' c/ U' y$ Q" j' I8 r
                                        <!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>
, o0 t* Z* t# G                                                <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’backgroundextstyle[2]’></i></span>
+ G: h9 t( \$ Q2 [" L                                        <!–{/loop}–>: U5 N3 ~0 O' K1 t' h- H  c
                                </div>
* {1 Y1 D6 v6 i  w                        <!–{/if}–>
. o8 O1 Z3 z# m0 T% r% [# V  F" X% s; u. O* q
代码解释:此处是拓展色的切换的菜单
* {% E4 {1 L5 r7 d& e! X( Z/ i备注:如里不需要可以删除1 r( b$ {8 e" B: c/ e* C0 _. r

  @8 h4 ]5 h8 g$ l8 k第80-96行代码:6 i9 i: a, e6 E( O( m* T

7 t( q0 p. Y: l! I/ m<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>
" ]: w4 Z2 M" g6 H, U7 X                                        <!–{if $_G[‘uid’]}–>$ g% d5 M6 P: F' K4 I
                                        <ul>4 S' X8 ^+ U7 w- x0 v9 G& B2 O
                                                <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>
3 z/ c2 E4 A4 {0 U+ k5 I                                                        <!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>
* Q# X8 }3 S/ \4 c  J- `  A                                                                <li>$nav[code]</li>; l0 A( V& Q. i3 C! |
                                                        <!–{/if}–>. E! c' A) g, o" B
                                                <!–{/loop}–>
3 i1 s9 }% k6 A5 E! G% }0 V  O$ I$ }; W  s                                        </ul>
- y/ i, @% N' j- t9 E8 M                                        <!–{else}–>
3 X7 \7 M  I7 `. a4 q                                                <div class=”ptm pbw hm”>( |5 X+ k: @1 N1 l* }  g
                                                        {lang my_nav_login}
) ^6 {  F# a: b. @9 u/ D                                                </div>
- `+ Y" u& Q( U# N3 \) ^7 m4 n                                        <!–{/if}–>) v8 d8 T6 j. n& }. [& T" U) C
                                </div>
; I1 W% i+ O% j* D, S8 d# h5 o% q1 m                <!–{/if}–>
$ X, F6 p! d' m5 c, g
- A1 i( F) M8 b1 D. u& E' d代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈+ ^' W7 d5 C7 u9 C7 o+ y1 ~/ |; f
备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
4 j/ M& o, b3 \. U1 B2 }
+ v) b7 @% d2 ?3 }% c1 a第97行代码:
$ S' M% U: ]9 @( t# D
$ z! f1 V' `1 F<!–{ad/headerbanner/wp a_h}–>; q: Y7 L% U0 \' Z7 \0 `1 n

; [5 u1 t2 [) \* O0 r代码解释:头部的广告代码,
; v* G$ l6 {. }! T1 N备注:可以在后台=》运营=站内广告添加第98-184行代码:
9 t, F" R# b. j8 r( g& K. X从<div id=”hd”>到 </div><!–{/if}–>
' Z/ V2 |# R- b& i. E; A代码解释:头部的核心文件
# x. s( A& Y- }- i2 h3 Z备注:下面是头部核心的DIV指引+ r$ N2 Q; O- j  |! H8 z. s9 t
<div id=”hd”>
& Q" m. n5 e3 t% ^: w1 _  P<div class=”wp”>
1 P# a9 i+ Z  R$ n<div class=”hdc cl”>! @2 b% S1 @" w, \1 P! G
<h2>logo</h2>———————————->logo3 [- F1 [! p- w$ c4 a# n
                 <div id=”um”>2 V' j3 M+ _( V- z
<div class=”avt y”>头像</div>—————————–头像2 I& j( x7 m. \! {  W
                       <p>0 [# ~4 ~: Q" N2 n, B
<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1
1 {2 H! S, |- M5 {                          <!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2
, F8 v0 X$ x, A+ g4 ?! l个人信息—————————————->个人信息6 F  ^9 J4 B* J; h
</p>! Q$ b$ T1 C3 P6 C. V/ x. M
<p>
. d3 x' ]8 G. W8 I" \/ r! x" ?# a. U<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3
, h) Y7 h( E0 _4 p% B个人信息—————————————->个人信息
8 D7 W$ J( s3 B, C</p>2 n) A2 G# ~- f! [8 U# _  ^
</div>
3 ?! U" w5 d" v! ^<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件)                         </div>2 S' J3 O. [4 k
<div id=”nv”>8 @1 j* {* ~2 m7 e- U; \" u  t
<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航! ~8 q+ Z& I$ g
                <ul>" A" D% I0 D$ o
<li>栏目导航</li>———————————>栏目导航
# R9 Y' t6 y! H- f9 b4 P. \                 </ul>
  Q7 ~" u( @; R/ O5 _) s</div>4 [0 O# P+ }& L4 _
<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>
6 I8 ?( j! ^9 [& ^& B* X$ o5 `二级导航菜单样式——————————————————>二级导航菜单样式- j; C) B. ^5 }' ^
</ul>6 B+ j) c! ^( @+ L
< div id=”mu” class=”cl”>: S- r+ l# w. P5 ?  s# k7 y
二级导航横排>————->二级导航横排样式
' C5 F0 m& U0 ?2 j              </div>7 x+ X5 n1 t4 n
<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)
- H0 i; c- ~) \! Z; }<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件)                   </div>0 E) b/ X* O6 D
</div><!–{hook/global_header}–>插件嵌入点$ i7 |/ Q3 _# Z2 [4 p* J: u- N/ o

; q/ h4 {4 f. I$ I总结:大家在修改的时候他的每个DIV和ul、li、和会有if语句,大家在看明白以上图后,在添加的时候要注意一下IF语句的作用,我就没有把代码复制到上面一一解析,希望大家去妍究下!利用这些资源,自己可以做出很漂亮的头部,举一反三!
想说又不敢说,说了又怕被拒绝,拒绝了又怕尴尬,就是这样的。内心很痛苦的那种。
起什么名字呢? 发表于 2020-1-20 13:44:18 | 显示全部楼层
沙发!沙发!
回复

使用道具 举报

MR.Z 发表于 2020-1-21 08:00:48 | 显示全部楼层
有道理。。。
回复

使用道具 举报

hgfhgf 发表于 2020-1-21 17:55:29 | 显示全部楼层
我是个凑数的。。。
回复

使用道具 举报

1287252690 发表于 2020-1-22 10:59:32 | 显示全部楼层
支持一下
回复

使用道具 举报

雨后晴天 发表于 2020-1-22 21:38:49 | 显示全部楼层
学习了,不错,讲的太有道理了
回复

使用道具 举报

岁月神偷 发表于 2020-1-23 11:01:26 | 显示全部楼层
过来看看的
回复

使用道具 举报

瑾瑾 发表于 2020-1-26 03:05:05 | 显示全部楼层
路过,支持一下啦
回复

使用道具 举报

 shu1332725 发表于 2020-1-26 04:06:46 | 显示全部楼层
过来看看的
回复

使用道具 举报

张红霞 发表于 2020-1-26 11:12:24 | 显示全部楼层
我是个凑数的。。。
回复

使用道具 举报

快速回复 返回顶部 返回列表