很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!
$ J' B% f& J% } n! E3 S) f! f% p6 } f, s- r% ?
header.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!
) a, `3 e7 a/ g# L. S! d) y# X# O
$ q4 \3 j; T$ m- R& h
第1行代码:
. x2 X4 i; U i) l3 J% U, n- o<!–{subtemplate common/header_common}–>
- C* M; z2 Z! ^
代码解释:用于调用common文件下的header_common.html文件,
- w5 Z1 B4 k5 H备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。
; I. M+ _& ~8 e' K6 s
; Z/ D/ [4 a; K- C( o0 M
第2-29行代码:
l C4 K* M+ N& `- v" w$ `+ }从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾
K2 J1 t" H8 z" P) K# y5 D/ `' G3 i; T代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
$ k6 ?, R a4 F9 }; H
备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写
, P7 Y B1 [9 z2 Z' l3 B6 W. `4 K7 v1 C5 H
第30-186行代码:
O6 M, f8 Z6 K* l从<body>处开始到此文件的最下方
4 c% v/ |. q) U6 E7 [. Z: @代码解释:这是首部文件的核心
3 Q- m6 I( A& k* M$ v备注:在修改时请注间要提前备份文件
T( S5 [1 J R" D: c; [6 @: L0 V+ y' v0 S
4 T: g' m- ?7 I( P. @第32-44行代码:
4 a& o2 b! p" q v2 _3 P- A7 N从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾
2 `* z( e f$ P
代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
$ n2 r! W, a$ A5 i
备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!
* v2 n7 Y& K' ?- O* f
- X5 L8 e# _& M' Y第32-44行代码:
7 h. O. X8 r. q* p8 Q' x7 V2 ^8 e4 Y
从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>
5 H# o: B6 d# q& G0 ^3 V) {1 w代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
5 e9 ]5 I8 k$ C0 s# y4 e) r备注:在后台=》界面=》顶部导航。可以设置
o( p+ Z- o6 D1 i6 n8 |4 {$ R. n$ l( d0 J$ i( T3 p
第70-78行代码:
" z3 x, H; A/ D8 {, ?- P3 g+ r* W! w. x" Y4 ~ l' a, A
<!–{if !IS_ROBOT}–>
* u+ b% J. w0 e, J <!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>
# h1 ~9 y2 l" E! M$ v! I3 T( ^6 }7 X
<div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>
$ G. J, U' b0 d) Y% R
<!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>
- C7 q$ y( z! M$ l/ z
<!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>
$ W$ y# h8 j% ^) {+ G: o4 ?1 q$ M <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’background

extstyle[2]’></i></span>
. O% i8 I' u# o- J& D X( B
<!–{/loop}–>
( D0 Q" P) z* V$ U9 D </div>
) l* ~; B* D& i' I, |$ t
<!–{/if}–>
) H2 P2 T% w% n( F9 g- f& j+ R9 a4 ^% } i" y# g9 Z: g2 r: B
代码解释:此处是拓展色的切换的菜单
& h* q- o4 p6 H, V! Y _0 L& S! t备注:如里不需要可以删除
}8 P% V, S3 H4 x; h% s' [( h3 Z
4 g. C: b1 J3 r6 {2 b第80-96行代码:
9 e) O. Q5 J+ H Y7 J& i; e9 x$ ~$ j$ M! s0 p/ Z
<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>
; ]8 A& d7 \! q! f
<!–{if $_G[‘uid’]}–>
( t c5 G6 \, G/ b( s! a" u; [: `) V
<ul>
; s2 o! Z+ c9 J+ ?% N <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>
0 r/ K Z) [6 P
<!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>
$ D, N$ o; l& m! s9 e9 _- v' q <li>$nav[code]</li>
8 A/ Y* @$ R, V; V! G" n; P
<!–{/if}–>
) i% C G: a5 i6 l, }* T1 y+ b
<!–{/loop}–>
7 E* o$ R) q8 [, l' i
</ul>
6 Q7 q3 F: N: o& j <!–{else}–>
) Y( u, u" r P8 ?$ z0 R7 I5 z <div class=”ptm pbw hm”>
4 n; }& n- b' x' p2 o0 K% k6 p! l {lang my_nav_login}
3 Z% K. A: Z7 V* m. E* n
</div>
2 {# r( U4 ]1 v% J" D) W. D; {1 n <!–{/if}–>
6 U* F% b5 k/ {
</div>
" ?" E4 W8 e. R0 \8 ?& x8 v4 w
<!–{/if}–>
5 ? ^+ t5 e3 I7 e; z
0 Z! \2 r& n. }代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
% y2 p1 ` e& H, _
备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
1 Y; ~& j. d1 D4 C2 x
; D9 u# {' }+ `3 j" j i* c第97行代码:
7 _( d6 P3 k7 F& @5 M) p6 b! x q
7 j( ~, |$ t% E2 m U+ a- v J
<!–{ad/headerbanner/wp a_h}–>
% y A3 W1 a& |5 Y9 [
" Z9 t0 ~$ v/ B0 V) N1 g) W代码解释:头部的广告代码,
* C5 d7 i3 Y0 C( ]" \. y备注:可以在后台=》运营=站内广告添加第98-184行代码:
& w; E& m0 W4 [. g从<div id=”hd”>到 </div><!–{/if}–>
9 C1 {7 e3 k( @; @
代码解释:头部的核心文件
3 n4 s1 M8 L5 z% u4 T6 O4 [ q# u备注:下面是头部核心的DIV指引
( [# }* T* w. ^8 q
<div id=”hd”>
5 f$ o! ?. o6 D4 a/ J8 ^+ ^$ R6 V<div class=”wp”>
# G( w9 Z- A* C<div class=”hdc cl”>
) U: _9 @. c' H% R" J1 T2 R
<h2>logo</h2>———————————->logo
' I+ n$ T- Q/ d3 Z8 c Z& V" U+ m4 M <div id=”um”>
3 s+ r; H, e+ a
<div class=”avt y”>头像</div>—————————–头像
) [' b: F: @$ y+ ^
<p>
! N( O% a; t9 i<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1
6 X' F+ [6 ~( N, s7 A+ b
<!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2
0 G+ i; M, j Q. l2 d% @个人信息—————————————->个人信息
0 ]+ X% [) ^1 n8 G% K) G
</p>
( X6 ?# L. Z g( K2 Z6 Z' Q<p>
* K8 s+ ~: h$ H2 ]% o<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3
# x6 B. R& @" }
个人信息—————————————->个人信息
! `1 t! a+ J* h8 N* P
</p>
' ?* G- y7 `$ I/ @$ o/ _</div>
9 Y! g% S. U" g; B; F<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件) </div>
) o6 ^% F! M u- J: S/ }<div id=”nv”>
# Q+ Y b6 k6 D# t8 W! k5 V. E2 Q0 Y+ E<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航
( P3 t7 ^- ]+ n% ^4 H# t' ~ <ul>
8 O" Z6 q* Z# n" A4 A/ o
<li>栏目导航</li>———————————>栏目导航
T9 ^& t4 E- T! a- w
</ul>
; U! S) b: G, Q1 s</div>
# w. a( E1 e& ~. _7 I5 r$ K# x& c<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>
2 Z" S( m3 r* u; F2 I二级导航菜单样式——————————————————>二级导航菜单样式
' }& m9 T( n2 P A2 N/ [
</ul>
+ q# ^. N, n/ N+ C* I< div id=”mu” class=”cl”>
! T, A2 K; A. t6 q2 c9 r7 `% r; |
二级导航横排>————->二级导航横排样式
& C5 h( f. n2 \+ |# H6 I: n
</div>
2 ] Y# f# t7 w* j1 b6 A$ i" X: U- j<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)
. N) L/ m5 O* C1 D' T' e9 }: G
<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件) </div>
0 R1 [: T1 U$ D% F2 U6 z</div><!–{hook/global_header}–>插件嵌入点
) G8 M, O, U! S" I
( c. B3 J, e" S- H' b总结:大家在修改的时候他的每个DIV和ul、li、和会有if语句,大家在看明白以上图后,在添加的时候要注意一下IF语句的作用,我就没有把代码复制到上面一一解析,希望大家去妍究下!利用这些资源,自己可以做出很漂亮的头部,举一反三!