很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!
0 G" w" C# N! p# a* k
2 c# O6 w/ S% W p% b: d2 Dheader.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!
7 l1 M% a+ E. d6 g! y$ R' t1 [0 R) ?% z: f6 }, m$ P+ ~
第1行代码:
t, c- m) _$ o" N5 T9 Z<!–{subtemplate common/header_common}–>
" I5 h9 @0 |' T. l# T- n& D
代码解释:用于调用common文件下的header_common.html文件,
! @8 {) h' M+ |- c) U3 B
备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。
9 i# d0 S' R, R5 a
& B, f! N/ m- K9 x' W4 G
第2-29行代码:
4 H% w( O4 ]! ^' a- h' Z: F从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾
$ M/ a0 f$ x1 N& T+ O/ |4 q6 k代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
( A I$ D K* @4 K1 ~( j备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写
9 F- a# p( K$ L3 }+ B7 ]5 |- i' u* n4 [+ P# R: }0 z
第30-186行代码:
: C3 s" M2 @/ r2 v+ Y1 z; }
从<body>处开始到此文件的最下方
$ c0 y" _. o) R3 v2 z9 g
代码解释:这是首部文件的核心
2 u& M9 C: y6 v7 ~备注:在修改时请注间要提前备份文件
; [9 G4 F7 Q7 @7 U9 s- I# h5 e# Y. u7 g/ m' X: j
第32-44行代码:
4 k2 O2 w8 H2 T# |. L% D
从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾
6 j1 d: D) i6 c i+ p5 S6 K" G
代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
/ P4 Z2 d. U/ m: U备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!
. g9 R7 D! S' x9 a8 _8 }7 |1 w8 G7 l5 V. K$ j0 h
第32-44行代码:
: R& L; \; D6 C9 J" T从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>
. B& s% T+ f1 u) P2 e8 z, _代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
3 G: J' c7 q7 v# k& x8 D
备注:在后台=》界面=》顶部导航。可以设置
9 n0 {& ~" z: e) L
2 t C, B' z6 Z6 L
第70-78行代码:
- |* o U, ^. a) |# g2 ^: ^- g5 Y- e2 N( Y6 E
<!–{if !IS_ROBOT}–>
# B9 z2 o+ I3 S8 M' k% @2 r
<!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>
7 f8 P/ [2 a9 i' x
<div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>
; _7 I0 B! _4 o <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>
/ i$ w5 j1 s$ g7 N( k: g3 k
<!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>
5 ~3 P6 V1 M) Z+ e' f# O2 G) L5 p <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’background
extstyle[2]’></i></span>
/ V4 v# s4 e: |% a2 a6 r
<!–{/loop}–>
& W5 h ^ w4 i( y6 S
</div>
# q! I8 o6 R0 n& W0 w9 n' T <!–{/if}–>
6 R S" V3 r; |& ^! V- P
0 d: l) ^; d5 Z, x0 F% W. I" a
代码解释:此处是拓展色的切换的菜单
) {$ J0 U, s- ~3 I5 d2 i; d
备注:如里不需要可以删除
% _( I: c7 N( M, f. Z; s
0 {) v) Q9 ^8 X$ A( u) U* R i
第80-96行代码:
. ~$ |* J" l9 F' q/ K
: f/ d7 P5 @2 O7 p<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>
$ U7 S! }1 s: A ]7 m$ ^: C1 {2 }
<!–{if $_G[‘uid’]}–>
N- u0 e- h" p; Y" v$ Q9 a
<ul>
& T* w) R( a; I# ?/ i <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>
; Z* O: R# p5 l <!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>
3 t; b, l; f/ f2 e1 O6 J
<li>$nav[code]</li>
$ K5 U' q; p2 f5 m3 R0 V <!–{/if}–>
$ G/ _) j0 ]7 Z) F <!–{/loop}–>
) d# i- f, ? g: `
</ul>
4 O0 |* v9 e6 K* u( { N <!–{else}–>
8 \& F& \9 r# L4 a
<div class=”ptm pbw hm”>
8 [( k& {1 A: Q0 z! S/ Y- q* J9 R9 t
{lang my_nav_login}
8 x8 w7 d3 @& }9 p* b
</div>
) h3 e% l' ^' s <!–{/if}–>
: T" ]8 D7 r2 X: z3 Y
</div>
! L1 p6 J$ R/ g& ^1 ?1 ~; Z T# I
<!–{/if}–>
L" @8 N" W' v
: K; \! h3 p/ M- L
代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
, W+ j8 j: D/ h
备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
) `5 ~' I6 g: E' P; P
: [/ t& i( F/ l第97行代码:
! h6 |: r- g u
9 x. d6 w) H9 L0 v6 L+ l6 q
<!–{ad/headerbanner/wp a_h}–>
7 w5 E! ^2 @ u9 W4 R8 M4 \7 T# @6 ?! G
代码解释:头部的广告代码,
; M' r! ]) y# g! h2 n
备注:可以在后台=》运营=站内广告添加第98-184行代码:
L; g9 s* R) _' `5 W; @3 `
从<div id=”hd”>到 </div><!–{/if}–>
+ i1 B. w( s, K: h9 j代码解释:头部的核心文件
" u5 u5 r$ t8 J' ]7 E3 G( [- d备注:下面是头部核心的DIV指引
) R; N" h5 ~" P' R; z
<div id=”hd”>
s' T9 T4 f0 o<div class=”wp”>
. D R1 p6 ?- Y" Z' }. j c
<div class=”hdc cl”>
; D4 S, Z* h2 m v( G0 @
<h2>logo</h2>———————————->logo
8 c; ]8 b- {, L' Z! i' m- O! s2 X
<div id=”um”>
4 {/ q- u! h6 E7 K3 N9 U
<div class=”avt y”>头像</div>—————————–头像
$ p; }) B5 q4 M2 q, f
<p>
5 v+ `/ W2 H+ f6 B7 p1 j
<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1
9 @$ T2 b& ~- u: J. A% _; p! ^$ {
<!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2
_8 u+ a2 e6 `/ |4 z9 h* R, c个人信息—————————————->个人信息
8 m. U2 J+ F& Y! h
</p>
6 y- H# D( @, `8 U
<p>
9 j, D2 {) n) E" Z0 r1 \
<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3
' k, x, R( N( ` e$ u8 n个人信息—————————————->个人信息
0 h& H; @0 J Y
</p>
9 F; d, P& m6 I: ^</div>
' `) ?8 x4 g1 |) {' l<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件) </div>
- z& i4 Y# z/ T4 q8 q
<div id=”nv”>
X2 C/ t- O1 ?& n1 F( I
<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航
- ?# Q3 x. o& e+ w
<ul>
' z/ j! ?5 C9 h# i& a
<li>栏目导航</li>———————————>栏目导航
; v' |! ~# J0 y7 R) s+ ?& N
</ul>
7 C9 V. _/ C8 k5 J; h</div>
$ ~: W) k' Z0 `1 R- H) _" v<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>
' }( U8 T* B1 q二级导航菜单样式——————————————————>二级导航菜单样式
2 p% f7 K4 p5 r, B; [7 H6 o4 i+ m
</ul>
6 y& z0 C! A" z0 j" }/ s. G" `" Y< div id=”mu” class=”cl”>
/ [* w+ d& L+ p9 N6 H3 V
二级导航横排>————->二级导航横排样式
) q5 [2 J" C/ T
</div>
* f5 F; U& A& l2 i* ?
<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)
' [( q" r4 s7 V3 t) ~7 n" f2 [) ^<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件) </div>
8 s; E9 K3 `" e; D$ C0 F0 ]
</div><!–{hook/global_header}–>插件嵌入点
1 S2 n) k9 y1 ?' `
5 G: ]" ?. o1 J1 m
总结:大家在修改的时候他的每个DIV和ul、li、和会有if语句,大家在看明白以上图后,在添加的时候要注意一下IF语句的作用,我就没有把代码复制到上面一一解析,希望大家去妍究下!利用这些资源,自己可以做出很漂亮的头部,举一反三!