很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!
4 m* [. c# n2 R# A; _
M9 d, Y8 T: ^8 X" Y* H5 |2 m/ V
header.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!
- m# b! {5 V: @6 n
1 n6 \1 U- w4 X. Q第1行代码:
9 |4 p, E! q' F H T8 V
<!–{subtemplate common/header_common}–>
) ?" Y9 W2 l1 [7 n
代码解释:用于调用common文件下的header_common.html文件,
; ^. t% H% g1 \. \0 [* g备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。
; l u3 k9 Q( V! ^9 z7 I
P* e0 V6 s3 s; R第2-29行代码:
! K' M; e/ e+ k$ w/ ]9 x" H$ K: Z. A
从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾
# o" ?3 _& \ y代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
% v7 v" P. C# W
备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写
# f6 |3 c: T1 q7 |
9 ?3 J4 L/ s$ x! m7 q" J$ s
第30-186行代码:
8 t2 `: q2 p2 C5 r
从<body>处开始到此文件的最下方
8 Q0 C; Y, w& d7 a
代码解释:这是首部文件的核心
2 L% v5 I# Q9 B0 W( \5 k( d
备注:在修改时请注间要提前备份文件
' p' ~0 W( \ }
- M, p+ t( z5 S
第32-44行代码:
/ o8 h6 k8 I) F9 ~9 d* {, ^# t3 y
从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾
' ^/ ?- w+ e+ `# K5 {. _' x代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
" @, w. g, u" x) R+ y& @/ |# K% m备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!
% W0 a- _+ E: R+ N1 e9 I8 H! [; R6 J8 N# u& q/ I
第32-44行代码:
% Q H$ A& F0 Y4 h3 _ V+ W
从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>
# O9 Q5 q4 Z* \; Y" f) z代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
4 U/ L0 c* l% L备注:在后台=》界面=》顶部导航。可以设置
( m" L1 Y T a! f1 G# J d7 Z
# Q3 }$ \9 H; Z2 \9 {8 C1 d% ^第70-78行代码:
% N7 D: k# Z3 Q7 a2 T8 K/ E( a
' ]6 u4 h U3 `+ r( `6 F' }4 X<!–{if !IS_ROBOT}–>
# Z+ n% L# K: K <!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>
C- R: G; Z% |" d+ j0 Y* F
<div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>
$ l \& [$ n$ w. j ^3 ?
<!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>
$ {, E: R7 v: D4 B( ]: N
<!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>
; g, Z, U3 G7 l
<span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’background

extstyle[2]’></i></span>
, P- [9 J" |/ h# l) B <!–{/loop}–>
$ e' y g: s$ @5 [! C; T8 ^9 C7 p$ K </div>
0 u. q! q1 h: ]8 ]
<!–{/if}–>
$ l) P$ L9 p4 p! K- F
3 Y9 g* B, m( A9 P代码解释:此处是拓展色的切换的菜单
- i- ?8 p. p7 v2 V) O. U, x
备注:如里不需要可以删除
, F# O3 k' q( {0 D, d
' L) [; n0 P; w4 n; K" i第80-96行代码:
' ^, F; h- A( R! R7 n
, `( S- Z! g2 W/ q; _<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>
" G3 Q+ u0 S8 L/ P
<!–{if $_G[‘uid’]}–>
& Z* [* V" M" T7 y- g2 ^ <ul>
8 m" @3 K3 r6 G( @ <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>
. |3 Q f) I3 c1 D3 ?' N# y <!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>
) {9 w( e! o+ Y
<li>$nav[code]</li>
" ~9 n8 J" D6 f) E
<!–{/if}–>
$ f# |/ W: ?, ?2 ]
<!–{/loop}–>
% N) H) H: ]1 k$ C
</ul>
/ ]$ [0 A! `$ L4 q' J2 A
<!–{else}–>
/ D- _$ P3 i, G/ q8 _7 u) [
<div class=”ptm pbw hm”>
0 l0 `8 x# ]4 K" Q& v5 c4 B. C
{lang my_nav_login}
& \: Z; U8 s+ L# f! L </div>
% T9 S( x/ u8 j; K& G) x! j0 q
<!–{/if}–>
: G6 j0 i" | g3 i5 H! ~ </div>
7 p m& X' b" q% o
<!–{/if}–>
* O+ p1 {: u4 W! G0 W
& e. {- \! V9 Y( M代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
; o8 m5 \) T/ \6 a( P0 T0 q备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
a4 f4 X I4 ^
8 [7 ^& K7 D4 l2 L第97行代码:
! n; G. e7 I, Z+ p% { I0 G `, c, X& V1 M: ^
<!–{ad/headerbanner/wp a_h}–>
6 S, U2 o' Q+ j0 Z: r: G/ ~" g5 i* m: v/ b5 Q8 ]0 a
代码解释:头部的广告代码,
: }( j; d" j) u# W2 f
备注:可以在后台=》运营=站内广告添加第98-184行代码:
% Q! f& \3 T4 m# l0 r2 ~' L f
从<div id=”hd”>到 </div><!–{/if}–>
: ]2 `) N" a" x, u5 {, D& z
代码解释:头部的核心文件
% C+ |- E+ l' g; L M+ O, {2 Y备注:下面是头部核心的DIV指引
4 v7 ^" z9 U) V6 w3 q% z
<div id=”hd”>
$ g3 d }1 ]& Z$ ~! e
<div class=”wp”>
+ R6 C( _" m- u, B<div class=”hdc cl”>
5 \2 }+ d# U5 M3 C) g8 y<h2>logo</h2>———————————->logo
6 |& |: Z& ?, ^7 C5 {* B
<div id=”um”>
) `1 d8 R& i0 m<div class=”avt y”>头像</div>—————————–头像
" n! j: _! W' v2 y+ A8 ?; N
<p>
5 [; C/ Q: K3 }
<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1
; k) d, I/ d1 J3 q9 U <!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2
$ @/ |# [" r, Y% c; [
个人信息—————————————->个人信息
- {) m, j7 l7 R</p>
& A, O% E) v5 p( K9 x
<p>
5 x8 w" |* ?* a. J' h, U<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3
( V) z4 f) o! N& o" U9 x! I个人信息—————————————->个人信息
1 L; Q# D. K* d" A$ M' L) n: Z3 R* Y9 S, V
</p>
) |' C, ~& {7 ]" ~$ C$ `+ H7 i6 [& r- ~</div>
3 V! e& H m: h9 Z2 u- h' v
<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件) </div>
+ @4 i; L/ N- ~. p$ |6 E/ L6 ^
<div id=”nv”>
: v, P/ @( g" L8 }' k) t
<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航
* ]8 M8 _( ?0 p- _5 q3 v <ul>
& n, K; `5 Y8 K- a. a<li>栏目导航</li>———————————>栏目导航
J' C8 J h" n- W5 O. p. V# F. O0 X </ul>
8 W; |& q+ ~& c( Z5 D</div>
\1 ]* R( c% w, G* f<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>
; P2 F* _- ~0 I
二级导航菜单样式——————————————————>二级导航菜单样式
& e: U0 G% g% R4 i1 D$ E/ e
</ul>
) @. e8 x( P0 z) H# ]< div id=”mu” class=”cl”>
3 R" d- E. x9 O- p5 L2 i- \3 K二级导航横排>————->二级导航横排样式
: a5 h/ v: k% l </div>
" H( T4 Z( q; U; e9 B<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)
0 w5 }5 f/ A. G( n, R" {<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件) </div>
/ @/ T: ]) q2 @/ I5 }: H3 g</div><!–{hook/global_header}–>插件嵌入点
T# f; w* r. U! b D
: i6 E( u" M" j& H' h
总结:大家在修改的时候他的每个DIV和ul、li、和会有if语句,大家在看明白以上图后,在添加的时候要注意一下IF语句的作用,我就没有把代码复制到上面一一解析,希望大家去妍究下!利用这些资源,自己可以做出很漂亮的头部,举一反三!