很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!
" U& g+ D- A% V
8 U7 u) }5 B. L4 z* C4 T& b
header.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!
- n: Z9 k7 f4 T. I: |9 g6 A* k
" i; \- N" l8 w$ f% [$ F第1行代码:
0 ]+ J1 O I7 ^6 W<!–{subtemplate common/header_common}–>
9 N/ `% J2 J3 R代码解释:用于调用common文件下的header_common.html文件,
# E. t6 }1 i, a* E; P备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。
" ~$ n$ \" ]. I: Q" [, d
4 u) v6 D3 Y% h: M4 V$ r
第2-29行代码:
' h) q# {/ A8 O: } q% Z* C从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾
* b+ V0 o, c5 d0 s- @' B* R S代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
+ `) w8 m0 Y& p* J [" m备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写
2 P7 e3 Y+ q& m0 W
8 P P2 N3 q9 K: o) A
第30-186行代码:
) u! `+ D) M# P
从<body>处开始到此文件的最下方
, Q9 I6 [3 J) A/ B
代码解释:这是首部文件的核心
7 a9 V8 W4 q D' n+ L7 N
备注:在修改时请注间要提前备份文件
! s9 |' K4 q. m, T( l d* F+ d* {* E* d/ A) d& P) D% f) {7 H7 Y
第32-44行代码:
1 m) l, S x" \从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾
V8 x2 A9 E+ v
代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
, i7 @, M' ~& O: x% S2 d# f, a
备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!
9 i$ j. S+ ~( k2 a. x" d
& v _; I, x+ e/ C& P4 l. F2 }第32-44行代码:
( }; y: Q A; j! H# v; t; G
从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>
" @. N2 S- S9 E5 k# ^代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
0 q$ L: L+ }* ]5 n) U$ G备注:在后台=》界面=》顶部导航。可以设置
# {* _# C8 c' ~
" _# O5 A5 a* y: c$ S第70-78行代码:
5 u5 c( i6 i0 x( B& b
! c3 I V2 ^3 U
<!–{if !IS_ROBOT}–>
3 L7 |6 p: `* O! X* j2 @: E' d
<!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>
2 y1 `& o! ?6 D j: W* k0 R
<div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>
) D9 o$ e2 {; K
<!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>
0 C4 ]" L. T0 c7 C; F' J& T
<!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>
' j. v$ q7 J6 ?1 Z6 X; ~ <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’background

extstyle[2]’></i></span>
; l7 H' Q) A) M
<!–{/loop}–>
; f! K# y* } f7 D. i; A% ` </div>
1 E% U3 O3 }* ~9 `7 S; I9 \ <!–{/if}–>
$ o3 T9 w- q" ~' P
, W+ s, J9 E3 h Y b% {
代码解释:此处是拓展色的切换的菜单
& W5 e5 |! \' H5 a9 p% Q8 ~7 V
备注:如里不需要可以删除
; R. j, [) R+ }* T1 I
7 @1 z' C/ u: y5 S6 g第80-96行代码:
. m) {& e* W4 O3 P+ J4 D: @; h
; A% G0 I- d" J. j( K; t<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>
6 s5 W. Y9 ^+ `# ]; r: @2 Q <!–{if $_G[‘uid’]}–>
" ]2 a. S0 A. n1 A, J7 Z; t& l' j$ f* k
<ul>
& ~2 ?1 H, @5 h) K1 ^; }' x5 b
<!–{loop $_G[‘setting’][‘mynavs’] $nav}–>
. N" ]* Q# f% O0 z; U5 D, t" F, ]
<!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>
/ b2 `* H z$ n b% L" p
<li>$nav[code]</li>
j8 S# k1 K4 j/ a# E4 I
<!–{/if}–>
# D5 z1 V2 U* L/ H, R <!–{/loop}–>
, j- G C1 V' Y9 N, V0 H% z </ul>
& n+ H X" p+ r <!–{else}–>
' H$ G- ^& @& i
<div class=”ptm pbw hm”>
Z2 A: _- n" _ {lang my_nav_login}
( }* g: \& E( C2 p3 C3 H </div>
. R# v% T" X6 r: u) H& N
<!–{/if}–>
8 O7 i0 y# f! a' s0 ^" w2 U$ D </div>
! n' b" [) A* E; t <!–{/if}–>
9 G, Q! a* h! Q* _
, }2 t4 p. @# \0 [3 k0 l8 i% V代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
" R4 n* P2 t; F# L/ q1 O2 y备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
( b$ G6 {4 c+ \3 W
& q0 X; U$ `5 e% n q( n F
第97行代码:
4 ?# l7 @, d, N* w$ u: T4 t
8 a- y2 Y1 b) ^6 w
<!–{ad/headerbanner/wp a_h}–>
. D! i! D% q% L
5 q: d+ F+ m$ h2 z) a9 ]代码解释:头部的广告代码,
9 M* |3 V ]8 `- E* g$ @
备注:可以在后台=》运营=站内广告添加第98-184行代码:
+ M1 D( k3 M& q9 N5 E
从<div id=”hd”>到 </div><!–{/if}–>
) `8 `2 f" x" f2 S" t- [代码解释:头部的核心文件
+ \& o( o9 _# D) l2 L- v( L备注:下面是头部核心的DIV指引
4 s& o) c* A4 I/ b5 l: L1 G! s! k<div id=”hd”>
6 C! m, j8 R- [" c. M! y
<div class=”wp”>
7 ^* r" v% P6 K/ U/ y6 W8 j<div class=”hdc cl”>
9 g2 h; B) o4 z, K' B! U a<h2>logo</h2>———————————->logo
/ Q& R% D. }2 l' d. X% v. Z+ V$ Z
<div id=”um”>
- W4 O$ j* i+ F
<div class=”avt y”>头像</div>—————————–头像
" X& T6 ~3 h/ w* t2 S) J$ z
<p>
- A {0 ?% b3 ~& n' D6 G<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1
. z2 b5 }' j, | `
<!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2
/ I9 R! o+ v, Y- d; O$ ?7 _
个人信息—————————————->个人信息
. B3 q# a$ T3 ^4 e+ \' O</p>
% O1 H* _, g5 \. x3 T& a1 H
<p>
- G0 f/ t$ C3 T% n7 B- @/ ?% z
<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3
1 l2 C8 |" ?6 c6 c' ~个人信息—————————————->个人信息
, V/ @4 p% n& ], z- d</p>
/ \4 ?% y; P, B& Y+ g, s
</div>
3 C W7 N8 W9 ~: a9 i
<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件) </div>
& r9 }# b' H# u7 N7 y+ D<div id=”nv”>
/ L g3 N1 v+ f8 q4 |
<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航
' f- O$ q- w3 k# C% O6 K) ?1 M+ z <ul>
r' m1 A4 H' h3 `4 x<li>栏目导航</li>———————————>栏目导航
% K; I) X; S; I( p7 Z o </ul>
( @6 H! i; N& f2 Q: _- r+ X5 s</div>
, \$ Y0 j+ ~& S0 X) E" ^. s( b5 c
<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>
$ ^9 I H/ @9 |+ E u/ r& m二级导航菜单样式——————————————————>二级导航菜单样式
( X% q% n& U1 t( R( g( s+ u! }1 C$ k</ul>
4 N& u$ e0 y" m
< div id=”mu” class=”cl”>
U7 h5 y2 P' d" d+ x. d" J$ p二级导航横排>————->二级导航横排样式
. y3 g) j ~/ [ </div>
' _, a# e$ J* t( F [<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)
% [; \3 y# G5 C, k<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件) </div>
+ b0 u9 u$ t* r2 e0 n f8 x) v# S</div><!–{hook/global_header}–>插件嵌入点
- M: N1 w7 v# e/ p' I- g
* M9 y4 E5 |' k5 f/ P- L总结:大家在修改的时候他的每个DIV和ul、li、和会有if语句,大家在看明白以上图后,在添加的时候要注意一下IF语句的作用,我就没有把代码复制到上面一一解析,希望大家去妍究下!利用这些资源,自己可以做出很漂亮的头部,举一反三!