很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!
$ V: L2 D; \& t2 J* B; E+ T3 e) B" r9 O
header.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!
' I8 D3 o* {, M3 m+ Q3 B6 e1 U' R4 O0 M) H0 p5 w: z! b7 ? y
第1行代码:
3 d& k" {% t2 Z* G% [7 t<!–{subtemplate common/header_common}–>
# z H+ F& g, _! R
代码解释:用于调用common文件下的header_common.html文件,
" f" y# c8 j q0 K1 l3 ~
备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。
- j+ E# X% j i3 S( H S$ T
- `2 Y1 N2 w, |/ o, M- ^第2-29行代码:
( x+ Z' T% p% ^$ [* i# M从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾
. B% q+ o4 F9 W& W
代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
' _* V7 |4 G8 M9 R9 d6 \备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写
) A2 x) U" p+ }
8 S' j1 a A4 {# E9 i" D6 E8 Y第30-186行代码:
: |; p1 I; C j从<body>处开始到此文件的最下方
. q1 ~5 m* h( A代码解释:这是首部文件的核心
2 Z7 D4 E/ f$ N# e0 R7 R7 _% i0 T
备注:在修改时请注间要提前备份文件
k# a! B- f1 y& A. s1 p6 x
+ i: f8 x8 {. q- o# ]第32-44行代码:
0 [) [3 B: E: ? K从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾
. z! f, S* r) E: ?代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
# W! \$ A& I8 y, A* L
备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!
1 _" W I# k" A8 F9 W; d9 V" f
% Q! [( Y+ B! V7 E Y: O第32-44行代码:
& T2 N/ a; P0 K1 _1 P2 L. |0 @2 I从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>
7 y9 x4 a/ A i' L代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
1 i' W' x7 y) g备注:在后台=》界面=》顶部导航。可以设置
$ n6 H3 H+ i0 I( w
; O) w$ b7 ?0 ]) D) [3 n第70-78行代码:
) I. L& F8 H: W6 B/ q1 ]; H& D' Z5 x* K0 ]7 @5 n& m/ M# }3 E5 P
<!–{if !IS_ROBOT}–>
% g* J5 l* @: F- s. r3 P# S
<!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>
. L5 f* b* L& K4 X# U6 B+ }* H <div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>
$ }; I% g& q, N+ z <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>
7 e7 o$ ], x. s+ t% E- l8 \ <!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>
$ G* e) ?- |" r q4 z <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’background

extstyle[2]’></i></span>
) q6 L( p7 ^6 m$ ^+ @7 n
<!–{/loop}–>
! T4 Z- G' C$ ?! w0 t </div>
1 r+ v. L; t1 m* @5 ]3 `! t$ x <!–{/if}–>
& r& c/ U+ h! S
% j- \* S8 ^3 H1 Y( C7 B
代码解释:此处是拓展色的切换的菜单
+ K/ ~7 R) A9 K+ S3 T5 G; a3 B
备注:如里不需要可以删除
% _; c- D% j) p5 S- Y; L& |, M4 {+ Z, j/ D8 G0 S+ ?9 ?
第80-96行代码:
4 X N/ H% m3 a; ?
( Z! f3 E4 q# k* }4 r: S<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>
; n: ^* R; K' _2 S! v
<!–{if $_G[‘uid’]}–>
9 \6 w$ W P, z+ K <ul>
% R! A% f0 }' P1 P; e2 f1 R- R6 S <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>
* N. E5 C3 {0 V5 G, ]: f <!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>
+ Q3 h! r! m, m7 l! }; {" y
<li>$nav[code]</li>
* X* h2 t- F( @: Z <!–{/if}–>
& ^6 z, j& x; Q& I, O9 | }9 b
<!–{/loop}–>
: l. n$ `5 W5 ?$ x
</ul>
, Y( l% V, F$ n$ |
<!–{else}–>
, `- ` S' a% v6 q) v' l* N
<div class=”ptm pbw hm”>
1 g: V; N/ \5 x- O {lang my_nav_login}
# F6 O% w% ?6 V9 O, a </div>
3 |1 q7 R; O; [& Y O7 T5 V <!–{/if}–>
w6 @0 `2 W! p/ ]# _ </div>
9 g0 D5 n. ?6 h' ?- s' l
<!–{/if}–>
* G4 j. q! ^+ i+ ^2 z
5 G! k! Q' [. d* Z
代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
& p2 j9 ]( \7 I+ A
备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
. Z, n, V* l$ d; f: d# }: s! M6 q; J5 E, a4 O+ V
第97行代码:
9 F4 J* k: r2 ?) N) |
3 [$ h/ ^' d% v& }4 `<!–{ad/headerbanner/wp a_h}–>
* C+ M* w* A) k$ G' W- |% ] y/ T3 t' M% P
代码解释:头部的广告代码,
7 g# p m% _. q' w
备注:可以在后台=》运营=站内广告添加第98-184行代码:
/ j7 n6 u2 H" O, k- U0 ?8 W8 X从<div id=”hd”>到 </div><!–{/if}–>
( I8 m$ [# u3 [8 I: J9 t& v代码解释:头部的核心文件
n% t$ a* F2 Q+ }& R. D
备注:下面是头部核心的DIV指引
# z, l# ~+ U7 B* G
<div id=”hd”>
0 W; P4 {+ X2 @- ?<div class=”wp”>
, f+ f' o, L4 t& v( I2 M7 r8 q9 J<div class=”hdc cl”>
: W" O7 w6 m* |, R5 }<h2>logo</h2>———————————->logo
. G4 m# y4 O3 g; v- W: {. Q9 L# q2 ^) y <div id=”um”>
5 P+ d" M. d# X4 G7 ?5 ~- P# r* R b
<div class=”avt y”>头像</div>—————————–头像
# P x7 H$ c' Z/ y0 \4 `- g0 ]
<p>
$ U3 d6 v R0 f3 b) H N
<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1
4 H8 ^" |' C: K* i+ F, B7 F6 j: R6 U( K
<!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2
- O" W+ \7 ` i% E3 }% v7 [- Q个人信息—————————————->个人信息
4 {+ ]: b4 S G9 `
</p>
) `$ |! U/ ?( d3 L3 s* U<p>
9 c( H4 ^, u/ E$ D7 T0 M9 X
<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3
4 h. ^) k4 ], T4 K9 T5 z
个人信息—————————————->个人信息
; D$ p" q/ b9 v
</p>
/ z; l$ h; E; i8 S5 h</div>
. a6 V% N+ r$ |- {, {4 k
<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件) </div>
9 E1 Q/ P' @& A( y; v. v& p0 }& l
<div id=”nv”>
% ~+ D' `8 L9 {2 R7 \/ c
<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航
5 `% b6 L. n; n9 K { <ul>
# V' u6 i8 Y* v0 d<li>栏目导航</li>———————————>栏目导航
; |8 M$ q5 [" o4 ?5 |3 [ </ul>
% S3 p( b5 L+ V0 M- e3 b: m
</div>
5 U' [* z1 B1 s1 \9 ^2 H$ c8 t# m9 c
<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>
) N, y' e: F4 j) ?* I) J X
二级导航菜单样式——————————————————>二级导航菜单样式
4 X R, \/ F4 K6 r
</ul>
) A5 ?& @6 w. c4 o+ Q; i. ]< div id=”mu” class=”cl”>
. S# ]5 Z6 E/ ?1 \
二级导航横排>————->二级导航横排样式
8 ~7 o- _& W% [5 Q </div>
% v1 |( n5 Y* f/ d) D/ G<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)
) Y6 x* ~" j4 i7 V/ Z
<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件) </div>
0 G: ?" e) t( t: h% T1 R
</div><!–{hook/global_header}–>插件嵌入点
8 x- n7 f+ q e% p( L& s4 H! N
1 X' P4 L- e0 |9 V总结:大家在修改的时候他的每个DIV和ul、li、和会有if语句,大家在看明白以上图后,在添加的时候要注意一下IF语句的作用,我就没有把代码复制到上面一一解析,希望大家去妍究下!利用这些资源,自己可以做出很漂亮的头部,举一反三!