很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!
3 B# [. o, F- `
; x9 x7 n9 F% _- Y5 Vheader.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!
: C5 r7 e$ \' \* D& G B5 X# u3 q* A( g. G5 D" K
第1行代码:
! ]% q* Y" X' @% v) I
<!–{subtemplate common/header_common}–>
" v; J# t# `0 r9 f* O代码解释:用于调用common文件下的header_common.html文件,
4 A# W) s& V+ m4 l备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。
# \& b; |3 g+ k0 [( D$ V5 H4 y2 A" n( N$ e1 w' {* B
第2-29行代码:
: _+ x; M: W! j6 K i2 A从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾
n% H# c( R2 N3 C X8 a5 x2 \( ]6 |
代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
) _% B% U9 e( K" z2 h4 {2 Z
备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写
2 \- z* \* S, p4 l P @3 C0 Y; F0 e" Q: t( C' @
第30-186行代码:
' W/ f3 e3 t" o1 ~
从<body>处开始到此文件的最下方
& ~! g1 z* l, f0 U E
代码解释:这是首部文件的核心
5 }4 |# F F: N; i- \9 [
备注:在修改时请注间要提前备份文件
. ~9 k4 h4 @2 b% \; e/ h
% p: |6 F' M5 t M/ G" n0 S# U
第32-44行代码:
" I* h; j G6 t+ ]. q) _从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾
: q0 u2 M! \5 p, o- ]代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
+ c3 j& n3 e3 r" R" k6 K5 K/ V备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!
& L u; R. B' _6 i
2 q; v. |( h6 p! m T8 R$ j! Y: B第32-44行代码:
* [3 n) }: M/ i' ?0 q0 ?从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>
+ H) _ Q9 q& U9 {) O
代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
; ^. Z. k# p5 y3 @/ u0 u# w
备注:在后台=》界面=》顶部导航。可以设置
* d; I3 V: v y) I9 d2 S" h+ o1 l" o6 I
第70-78行代码:
' S B$ }! N$ r& ]4 f2 f
' _+ B: F/ j# Q2 g$ ]% ]
<!–{if !IS_ROBOT}–>
' j* K7 v1 k2 y5 w3 C) ]3 `
<!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>
+ H& J" j) @3 r9 f# U; w
<div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>
, m( H2 H% ~0 _ <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>
+ J$ l( `, F" V
<!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>
$ c- `# U6 W7 {' G% f
<span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’background
extstyle[2]’></i></span>
$ E9 K' z3 Q1 R5 a <!–{/loop}–>
- a$ E( V% m: C8 S* m( Q! @
</div>
3 d9 d# D6 _8 Z+ h, B0 n2 D
<!–{/if}–>
* o* N. J3 v/ b
/ R D, L9 E* N+ D
代码解释:此处是拓展色的切换的菜单
' A5 F" j, V w1 J c+ p! B备注:如里不需要可以删除
) |" ?* O3 n5 E i
, X: D8 q0 C% m0 a4 s; q( D% ]3 b3 J
第80-96行代码:
% x+ s8 H' J% O3 E2 A `
% M6 P/ m. c3 V( f9 h, O
<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>
( A+ l6 ~# J! M" a! i/ L <!–{if $_G[‘uid’]}–>
2 j5 }& x7 V( R <ul>
" v2 H% p- G" P; ]! ~' m; ` <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>
^1 `; Q: m4 Q3 Q
<!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>
/ N% ?" ~( o4 T F5 e <li>$nav[code]</li>
, W7 v: r# N5 f <!–{/if}–>
* W9 N7 B9 `2 l9 f+ t# A <!–{/loop}–>
1 o$ ?: E ~; k# {: R" o
</ul>
3 N M7 E0 o) ]( A: e# X0 |! c! t1 I
<!–{else}–>
$ m$ |2 p3 E+ t; ^+ K# F
<div class=”ptm pbw hm”>
1 B( M: U+ f9 S7 ?7 G A; L/ o
{lang my_nav_login}
9 l: X8 p7 M+ J8 i7 w" [( G </div>
& C- l7 P* S) J1 Y! u& [+ ? <!–{/if}–>
# t3 N3 T6 F+ Q* u8 `+ C# l
</div>
& A$ O% ]6 n) p
<!–{/if}–>
5 @! ~! A+ e& M
& T3 N" Y5 y: M% @! t& ^5 ]: U代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
; E' R! b9 J$ L+ m$ O
备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
' ^ I, E, V, \- U" k
% ]" I2 U8 P) a! _, u b& O5 G第97行代码:
$ @0 r7 R, R* e# M' O) Z- s) z5 a& A2 a
<!–{ad/headerbanner/wp a_h}–>
) d4 ~+ N/ p& _7 o0 b7 I" i: B# L4 Q# X5 W
代码解释:头部的广告代码,
! |/ k0 ^7 ^1 ~# k备注:可以在后台=》运营=站内广告添加第98-184行代码:
# m/ B5 h f2 k0 ~! A: ~. \: c
从<div id=”hd”>到 </div><!–{/if}–>
0 a# ~7 S% `: N% d3 X* Q6 V& I
代码解释:头部的核心文件
6 C6 a1 }! j: W备注:下面是头部核心的DIV指引
& H1 k# \0 j# P: k. y1 |8 _<div id=”hd”>
/ K) p1 z% X! {6 O
<div class=”wp”>
# K1 b- I4 V3 Q
<div class=”hdc cl”>
' z1 O: X( k! c<h2>logo</h2>———————————->logo
$ I: }( _4 N6 f, x9 p; } <div id=”um”>
; W# P4 E J! C( |5 [2 Z<div class=”avt y”>头像</div>—————————–头像
! m# m. D2 L2 L6 T <p>
' b h+ ?# W# d. ?0 ]) Y
<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1
; {, I! a: l; X" B
<!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2
( Q5 {, A$ G* U3 U个人信息—————————————->个人信息
1 u) I% ^( d) G9 p4 U- _7 G
</p>
* _" ^" g( A- T<p>
$ V6 p$ Z4 u5 x7 Y+ e! y# J( A, K' B
<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3
: D/ o2 ~ s4 Y- u' G个人信息—————————————->个人信息
+ M# C. D- b! F1 p9 h# s</p>
6 u6 Y5 n' z/ l( n5 `
</div>
% e* z, h' X: J; ~+ b8 l9 K- H<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件) </div>
9 f/ p2 \8 C. P9 Q<div id=”nv”>
" t1 Q% Y7 ]* p<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航
3 Y: O# L! Z/ e9 W- j% [" q
<ul>
% G U& N( K7 ~
<li>栏目导航</li>———————————>栏目导航
" ~) ?% d8 H: O </ul>
4 y0 z7 F& x+ }- m: p1 j</div>
; |) A' `. C. S
<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>
: W% J: Y. R/ x; x& v二级导航菜单样式——————————————————>二级导航菜单样式
/ d3 Y$ m3 h+ `0 |
</ul>
. w6 Y+ y7 @( ?# b8 B$ \
< div id=”mu” class=”cl”>
! Z# T& u2 U% b+ k9 |. t2 Y
二级导航横排>————->二级导航横排样式
/ \1 M" ?0 {5 V9 Z M. d8 D. B
</div>
4 S0 |2 G7 y5 K1 f9 X7 b3 S<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)
6 _; a$ q4 G; F$ A
<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件) </div>
# Z: u% F$ L$ p* }3 W. ~
</div><!–{hook/global_header}–>插件嵌入点
/ `% C& z8 j# d& C! |. G) P
4 U& J4 |/ t' [, l- [) _
总结:大家在修改的时候他的每个DIV和ul、li、和会有if语句,大家在看明白以上图后,在添加的时候要注意一下IF语句的作用,我就没有把代码复制到上面一一解析,希望大家去妍究下!利用这些资源,自己可以做出很漂亮的头部,举一反三!