很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!
! K' K3 ?: Y% b+ d) [ i7 B Z4 H5 P m) K! R1 ~8 @
header.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!
6 M) L8 J: j6 x$ i, M) Z5 b! c5 A0 j1 _' w
第1行代码:
9 n+ V. }9 J/ S7 x<!–{subtemplate common/header_common}–>
4 _* ?/ Z* a9 l8 Z# X* Q- Y
代码解释:用于调用common文件下的header_common.html文件,
7 Q# [, D# {- r- S$ v( v( F
备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。
7 f3 P( v! i8 K" L9 [' j- f5 ^
* r3 Z( m& {9 C# M2 ?/ @
第2-29行代码:
- x* O w/ l' x9 I# d4 g从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾
' Z9 A/ C# m4 B4 @2 S
代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
( B- Y. y1 x7 P. N2 T% C( m* {* F
备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写
4 I v# _5 t" z& a
3 ^3 m' l$ E0 D& [: W' d; U
第30-186行代码:
0 o+ X% T5 G7 a5 w从<body>处开始到此文件的最下方
; x4 R5 Z3 b; o( `8 `4 e$ L0 m; `代码解释:这是首部文件的核心
/ a7 T' d# S8 t3 u/ A+ s- O备注:在修改时请注间要提前备份文件
, z# |0 e! j7 f! I0 B
$ C/ H( P0 n. D! }5 G9 e5 |( M
第32-44行代码:
. H" R! p* ~/ C; S
从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾
( v$ `, g E4 n' V; \4 A
代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
; {& v. a) N" I2 h备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!
0 W' p7 E" M4 e
1 }! n' M0 S5 V1 F
第32-44行代码:
; e) I- f. ?2 H7 \2 j/ Y; M# {
从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>
9 @; ^4 i! L ^2 W$ r
代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
4 R6 }( V( q4 ]3 q7 c
备注:在后台=》界面=》顶部导航。可以设置
0 \+ q9 `) |* Y: s# z) X9 |& Y3 o. H/ P+ u2 a X2 v
第70-78行代码:
) J; d0 D+ C% N9 a8 K5 h
! \" Z$ @4 m/ T$ Q
<!–{if !IS_ROBOT}–>
( O( z* ~0 P$ }& [, w( |8 I; _
<!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>
$ q0 c1 `3 G8 H M: c
<div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>
2 l0 H2 [! V$ e% D; {! @& `7 f; x% u <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>
2 J" F( e8 q/ `- B! ^: C. [1 |; K <!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>
: K$ U9 \* P( a; ]
<span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’background

extstyle[2]’></i></span>
& H# I' _& {/ T, I+ w. K
<!–{/loop}–>
3 p) W3 U' R6 g: l </div>
; X# g0 e- F0 H <!–{/if}–>
$ Y! G) A& m( `8 p7 b" |0 ^( I
代码解释:此处是拓展色的切换的菜单
7 W* T: ^, w: R- Y. q4 a9 K备注:如里不需要可以删除
t. B9 l: }% p7 [3 h- j9 m/ ~$ t' [- Q$ H; I0 C9 D
第80-96行代码:
4 R( i. ]4 `" m2 Q7 u( _* G9 N
1 u- _0 N( x1 S<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>
* N: V- C6 U$ z! {
<!–{if $_G[‘uid’]}–>
" E4 G. r' ]9 E& h9 Z
<ul>
0 T! N; y* ~7 B' ~% E( f <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>
5 @. i' }1 C' A+ A. S. u
<!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>
# S# m* R$ b- u, [9 u <li>$nav[code]</li>
6 U! p& l% t, X, |$ Z/ q <!–{/if}–>
' ]9 ?. ]/ G4 a, B/ |% s <!–{/loop}–>
& B1 {/ T5 w. u9 C1 G; J
</ul>
+ B1 I, l) @4 N% Y. H1 U: ?; A
<!–{else}–>
3 a$ g. |3 U* R& f <div class=”ptm pbw hm”>
5 P n+ v3 o! P d" k {lang my_nav_login}
7 _" J7 X* Y5 H1 I5 z. Y, y
</div>
% z( J4 ?1 S8 f <!–{/if}–>
5 T1 Y2 }* u9 i( C </div>
: \$ p8 @( Z; y) F <!–{/if}–>
# O% B; l2 ~+ n2 h Y# `8 L- |8 ~
代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
1 p# t$ Z- A( S& s9 E' w& r# e7 s备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
: A& O& D5 l m, {1 t) M/ h9 K7 A+ J
第97行代码:
: e# \( v4 z' J+ i
5 f. U' \2 d! i+ F" @% ~6 E<!–{ad/headerbanner/wp a_h}–>
5 R1 L4 b; R4 U0 ^, d; y9 s4 ~# H0 b" O- t& V, P) [: O. U2 N
代码解释:头部的广告代码,
0 P; D0 I/ Y6 E- u6 n' d5 p备注:可以在后台=》运营=站内广告添加第98-184行代码:
8 z/ G- u. E7 A, V: V0 c, }9 W4 D, p
从<div id=”hd”>到 </div><!–{/if}–>
0 k4 t: \$ n" y" g$ c& p4 K
代码解释:头部的核心文件
) H' \; y+ T9 K9 {* }备注:下面是头部核心的DIV指引
. E6 d T+ P, o: c" p4 R3 ?<div id=”hd”>
. |8 d8 y8 A3 f<div class=”wp”>
: m8 Q7 ~0 N- i) x; m: T7 U
<div class=”hdc cl”>
- l* D8 b/ l9 T. ?3 C2 S8 [6 X8 W
<h2>logo</h2>———————————->logo
' R$ D: j: C# H) ]( T" R
<div id=”um”>
) d% o, g( G% a! n Y+ q9 u( ]<div class=”avt y”>头像</div>—————————–头像
4 P+ n8 L* M; f: p
<p>
1 T0 u4 I3 G/ i, L6 b- ^0 I2 o4 J% d
<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1
0 j6 x2 E3 S* z7 ?3 s5 F! M
<!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2
' t8 ], v- q/ F: \. W个人信息—————————————->个人信息
- C8 e1 u8 U. N& A! H( L7 ^, e H
</p>
8 [. x" d. X: M) R- n7 g2 C5 k
<p>
' s4 I8 @7 ^6 x# k" K' B' O3 @<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3
8 k$ m/ D7 q, i个人信息—————————————->个人信息
* ?4 n! l- ?2 k' V, d, f. }
</p>
% f, w8 ]- j* l: i! { W) L2 P, o6 B</div>
. r6 S6 ^+ }6 ]& ^% Y/ S# Q" S. V
<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件) </div>
4 n) E6 ?- n* n/ ~4 s<div id=”nv”>
, @0 n( c3 c2 j1 d! ^<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航
# u, }4 m% }. ]
<ul>
0 z4 {' f: Q5 R
<li>栏目导航</li>———————————>栏目导航
1 ?2 ]" I6 T/ R; K) h5 x" \! n! u
</ul>
9 t& ~! W Z% O8 k! @8 C: @( `' b" W
</div>
: N! x3 B* H- A! u- F<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>
" T1 ]' ]4 I1 \2 T7 L
二级导航菜单样式——————————————————>二级导航菜单样式
* k+ ? p( H' c1 Q1 D5 O
</ul>
& ~) M$ |5 N1 c8 f5 |< div id=”mu” class=”cl”>
) v# |9 _8 Q) B1 W$ b
二级导航横排>————->二级导航横排样式
% `) |* A7 j5 A/ K
</div>
# G J1 b% ]4 V% W; d; {
<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)
; \3 s4 B5 S( Y& |! b# M
<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件) </div>
h" u( C W" D! H2 v</div><!–{hook/global_header}–>插件嵌入点
& [7 l2 n6 r2 ?( W/ _6 D* H) i3 @% T+ o5 S% J
总结:大家在修改的时候他的每个DIV和ul、li、和会有if语句,大家在看明白以上图后,在添加的时候要注意一下IF语句的作用,我就没有把代码复制到上面一一解析,希望大家去妍究下!利用这些资源,自己可以做出很漂亮的头部,举一反三!