很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!
+ }7 h% }- Q9 K" Y! K$ J3 p2 f& _1 S
' F% S- P0 {: I+ l$ p/ B# T, G
header.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!
/ o1 e \ ~ t1 a7 }& d3 D
: _& L/ p- w w# h3 l. I
第1行代码:
4 S R6 V; A6 I6 g8 Z& \1 n<!–{subtemplate common/header_common}–>
' x3 }& s) J+ }( c+ z- Y Z
代码解释:用于调用common文件下的header_common.html文件,
8 @! i% n' C% }9 u" _2 ]- H9 v3 p
备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。
5 R v+ `1 N" r/ U& k8 ^1 u( @
# q# y2 H% R6 _3 x
第2-29行代码:
( \% M: z+ `) Y" R从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾
: [+ w; ~2 K3 C代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
: w0 l) d# j" {1 P6 y. {备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写
+ N& [& c( j6 M, e$ L
1 ?1 F0 Z7 Z" M
第30-186行代码:
- T I) }% v0 M
从<body>处开始到此文件的最下方
~4 W8 G* K3 H- x. g5 M% M7 \
代码解释:这是首部文件的核心
/ E) U' Z l8 x8 g* ~备注:在修改时请注间要提前备份文件
+ R) b. ^# L' X% W E
( {" e& G" Y9 t* \: a4 `- Y: t' V
第32-44行代码:
. s; b6 _( F- F8 M
从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾
# W6 @( l G8 B- i代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
" x, \+ l J& J" p+ `
备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!
7 U, Z m+ h- m8 z, S
1 M$ I' j; I4 r% U4 ]/ V7 x' w
第32-44行代码:
; }1 E9 z5 w9 l从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>
0 E; ~' |' {: V, o- ]0 Z; L
代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
9 R# x3 y5 P$ x0 _, t备注:在后台=》界面=》顶部导航。可以设置
: j2 i2 c7 Y Q( L M) Y) L. o
4 x& q- E8 ^; u! f第70-78行代码:
( O. e: C0 o# E
$ g Z; i9 ?4 s, p8 ?: q0 P
<!–{if !IS_ROBOT}–>
, }0 F& P. h; H2 v5 y <!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>
1 t0 Y; T- e+ K7 N% b4 Z <div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>
$ H: ^2 Z+ q5 L0 {% ?/ ?
<!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>
5 l! B: u, }/ r) [& V3 p, c& g <!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>
9 `0 ?' G' l5 T$ n <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’background

extstyle[2]’></i></span>
( Q7 m5 q4 L* }7 ]
<!–{/loop}–>
C2 j1 B3 x7 R; H: O- N
</div>
/ J0 L/ D( u& {7 J6 F3 k7 Q# V
<!–{/if}–>
! ^2 q9 J/ H% S! N- k
/ Q' ]4 l$ `4 G! m
代码解释:此处是拓展色的切换的菜单
8 T2 B% o* ^ `$ n! I
备注:如里不需要可以删除
* W9 d+ f3 ]% y) ^, V9 E
% Y7 U5 g+ O+ S第80-96行代码:
. l! s! f9 ], X2 v. O6 L
. w) @" y/ F9 y% G7 [
<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>
0 a. e/ F/ v0 f) B
<!–{if $_G[‘uid’]}–>
; j6 _0 N. L- h <ul>
3 O; K0 K# U7 m5 [( [ <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>
, A% K, v) n8 }. N: O' ]
<!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>
: y$ C* f3 W6 l# k- o% ~ x
<li>$nav[code]</li>
0 p# o9 `( _% h+ w! T6 o
<!–{/if}–>
. j" {9 q/ O; F0 R5 M+ H8 H <!–{/loop}–>
/ D4 I( F- t; P% A; r </ul>
) v4 y4 G/ x/ }) R
<!–{else}–>
, C3 z: k7 K+ G
<div class=”ptm pbw hm”>
; r' C/ r) a- G5 Q/ x
{lang my_nav_login}
2 |2 ?4 |$ s+ v1 m z t8 L5 [* L+ Y </div>
; P* _2 U, W: z. A- t" c3 |6 W. Y <!–{/if}–>
0 M, c0 P* }5 {$ K6 U: z* L) r( l6 k7 I$ ] </div>
7 h( r4 t* z* o7 w
<!–{/if}–>
$ @3 p0 k$ }- Z( u" s
1 F2 t1 l% _* `+ M; I$ A. C" {代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
* j/ J# K* z$ y: Z. p) o
备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
1 T7 ]! P" @6 M9 Z* [5 c N' x, h, C$ ]6 W1 \) f3 r# d6 H
第97行代码:
) j8 `, f& u7 h( n+ A4 Q6 t2 n, w. |* x% ?) k# m
<!–{ad/headerbanner/wp a_h}–>
4 D4 ~- x2 V' p2 @2 Z, t* Q
3 ]; }, t7 F1 P4 v代码解释:头部的广告代码,
0 w! j7 i' |0 z1 d1 x% ]) J备注:可以在后台=》运营=站内广告添加第98-184行代码:
- V* |3 U4 |- M; x! s6 [# R从<div id=”hd”>到 </div><!–{/if}–>
( V$ Y! A. T4 I) D9 |0 B1 M1 E代码解释:头部的核心文件
3 ?8 d7 a6 w$ s+ h( e
备注:下面是头部核心的DIV指引
# y* {" d) A+ v+ T% p5 y/ E<div id=”hd”>
# k, a' ~. b9 ~; n$ r% o
<div class=”wp”>
* P9 i7 `0 F5 v. _ Z<div class=”hdc cl”>
1 f2 H- _! T, f% _/ x& a( k<h2>logo</h2>———————————->logo
8 ?& d6 S( {0 V( w" g% f" n/ o
<div id=”um”>
# I" e5 ~. _* C2 K<div class=”avt y”>头像</div>—————————–头像
- L" t5 S. @+ q8 `, O; B4 L/ A
<p>
/ w& t9 {- ]/ |- O<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1
0 k" @$ s: `2 x+ [7 J* ~/ q' {; J <!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2
6 ~* m; H6 P0 F! m! |4 M
个人信息—————————————->个人信息
) h- c$ n- S+ l$ f' |- L2 p</p>
; I0 R1 t) q, N<p>
! Q+ k x: |+ T" V, L4 H<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3
. h* W. e5 ?: H7 x9 m2 E* Z* O个人信息—————————————->个人信息
# c3 X* `7 H1 E
</p>
; }/ i u+ c8 y9 v0 q' f- d( Y</div>
: k1 ] u* U( y) |" A
<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件) </div>
, i g# @/ y K6 E$ `
<div id=”nv”>
; U3 m3 ]9 P5 c$ c<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航
$ F" I% {. n; t& r
<ul>
( W4 ^; v2 w7 p; G
<li>栏目导航</li>———————————>栏目导航
" s8 l0 P8 K7 _5 L* |4 X. _, n& K
</ul>
, m2 C% S% Q5 @# D( }( a' `; f</div>
8 [% G, p# l2 }/ e6 Q& X
<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>
2 S: P' c6 [. t3 G; s- J二级导航菜单样式——————————————————>二级导航菜单样式
' {5 l y* S) X( o# d
</ul>
+ g$ E0 h( b/ K8 d6 k/ W# ]! t< div id=”mu” class=”cl”>
! `" Y% l# e0 g3 c9 C二级导航横排>————->二级导航横排样式
+ |+ D7 E7 l A: i, n0 A2 u8 F* c0 Q </div>
7 ~/ A @2 S6 [9 p" q3 `
<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)
/ W, p* P# w' E7 U+ F& q$ J<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件) </div>
9 R0 D* G, D+ m3 x; G
</div><!–{hook/global_header}–>插件嵌入点
/ a2 R- G2 s9 O6 c, @
5 ]$ t4 h: u# f总结:大家在修改的时候他的每个DIV和ul、li、和会有if语句,大家在看明白以上图后,在添加的时候要注意一下IF语句的作用,我就没有把代码复制到上面一一解析,希望大家去妍究下!利用这些资源,自己可以做出很漂亮的头部,举一反三!