很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!
# Q+ y; ~( ^: _6 q: m; B0 Y7 E' g; Y- A0 O" A1 @9 B3 @
header.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!3 ]5 t% K- ?# G q
6 a* k# n$ l+ Z, Q% P第1行代码:
6 G3 F9 |; e8 X" D) x+ ]<!–{subtemplate common/header_common}–>
1 q7 ~8 w) f3 G5 F代码解释:用于调用common文件下的header_common.html文件,8 d# F ?4 Q/ Z/ A* q2 ~+ Q
备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。( A6 H* q; L8 W, e3 \) o
: p2 `: r5 k5 J" U1 C) S6 k
第2-29行代码:2 H2 f6 k. O( K$ e5 K' E" {
从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾
0 @+ ]9 O* l3 N代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!, U2 F9 Z! _) J g7 P0 a- _! t
备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写
6 Z1 W" Y6 n0 w4 g0 h& x+ G) {' ~" w9 O( L& y9 s
第30-186行代码:9 R. o7 K, P2 W* i
从<body>处开始到此文件的最下方5 f1 U( w: M8 `7 l4 r# z# }
代码解释:这是首部文件的核心
7 s9 i: S% y8 p备注:在修改时请注间要提前备份文件4 r" W) `! I, B2 S6 K% W1 A
) h0 U Y" E' n6 m第32-44行代码:
* L5 C1 |# m& ~; b W9 K从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾) N/ F$ m. `8 X8 {: _; m' @
代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
+ g0 u! J' a o. g. [备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!
. @" N; g0 J, e w! x# B& b
( ?/ V- V4 V/ }% }; O第32-44行代码:" \! ?6 \% o' L1 {6 X) K" R) H
从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>/ l+ A0 @4 {1 s
代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
" Q1 B, k& Q, }/ Q2 o8 o备注:在后台=》界面=》顶部导航。可以设置1 ~ S, V* |( y, L% \5 W
) l' s, b4 A. g; G第70-78行代码:
4 b3 C' a) [0 N0 g% s" _. m* ?: r+ {
4 U) Z% L( x; G9 B% o; X0 _<!–{if !IS_ROBOT}–>4 O+ f, W3 _. O
<!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>4 s8 @) J$ G8 U( d. X7 A2 I
<div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>
' }4 H3 E e* T: f) K <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>
4 u7 o' E, a% ^* O <!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>
3 ~5 [6 }! z2 @7 g0 S& w8 e+ |* f <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’background extstyle[2]’></i></span>; v- S* D" ]7 Y/ w( c. s
<!–{/loop}–>( p2 N1 p4 P9 a2 M1 `
</div>9 | V9 k) U! D3 A
<!–{/if}–>
; k: x8 p* x1 u7 J
; v1 W1 f* I8 K* Z# v' S, ]5 O代码解释:此处是拓展色的切换的菜单
, n% O( k1 ~1 e4 [# }3 ~2 a9 Q8 d备注:如里不需要可以删除
F2 @8 Q4 K8 f' d; Y7 c
) t# x& J4 B9 ?. P9 L4 x0 G第80-96行代码:1 ]4 I8 \: s1 o* c0 z
6 _& I2 y. a1 g( |/ a A4 R# F
<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”> B; ]" Y# E' w7 v3 b
<!–{if $_G[‘uid’]}–>
% g4 n0 y3 B9 b j* X$ @9 f) z <ul>% J# }" V8 n: v6 `+ B4 _
<!–{loop $_G[‘setting’][‘mynavs’] $nav}–>. \; ~! ?! J7 I1 n
<!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>
, _9 j7 t I" R% T <li>$nav[code]</li>
s- u! K3 R" b1 e3 E! C8 K% l( w <!–{/if}–>; [- c5 q: U0 X/ ~* Y& D
<!–{/loop}–>; O7 y- ^9 y7 y3 J' U Z
</ul>
; p8 j6 E6 y) p [0 u/ [ <!–{else}–>) R; U# F" A8 f) e: q& V
<div class=”ptm pbw hm”>0 p/ n, s; |6 c- B5 O) c/ B7 N
{lang my_nav_login}# i* a7 T) O# q9 M
</div> r6 [# @+ R# D8 A# V# \) U
<!–{/if}–>+ m w0 f" f$ O) I
</div>2 M" H Q, {; D: k$ z* l
<!–{/if}–>( ?! o# r ?# R' V
5 J! O& ] J; M7 }2 C
代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
; z* C# n* e. P* U备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
6 v: H1 k0 d' P: r+ ?- x' y/ k# F; z( J6 K
第97行代码:
! D* g# g- H7 W2 @1 [ A
# ^4 i- e3 M3 j. U2 F, c: Y# A/ o<!–{ad/headerbanner/wp a_h}–>
# g1 ^( A& d, p% U- W+ w/ B
0 O! u% c. Q& s/ [! B1 H* \代码解释:头部的广告代码,
i6 E- V v# n% H: y, j备注:可以在后台=》运营=站内广告添加第98-184行代码:
6 c. N- \+ f2 z5 p: N/ z3 A7 U从<div id=”hd”>到 </div><!–{/if}–>2 Z( o% m6 p+ w* n/ K6 |8 \
代码解释:头部的核心文件- }# i/ V1 E( S2 M: x# ~) f1 w9 N6 W
备注:下面是头部核心的DIV指引
6 h+ B8 a# I0 i. O0 _( k, @7 _<div id=”hd”>7 s7 J' N$ J) M7 J% t$ l* F" f
<div class=”wp”>
% y* ?$ t a% y. E<div class=”hdc cl”>$ M. }' {4 [9 |' J! C. M9 S
<h2>logo</h2>———————————->logo h7 ^! m7 d F
<div id=”um”>
) u p2 s7 O6 r, Q( V1 l+ `<div class=”avt y”>头像</div>—————————–头像
1 O+ k1 G& S( H3 L" i. b: d <p>( h1 g8 b2 w: d! n1 |
<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1
! Z$ g) U) @, n. V; y" h <!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2! U0 M1 X9 u# s/ i( C0 B
个人信息—————————————->个人信息! I1 w9 D: \( z2 j
</p># p7 h: ^( C" E4 o" \. N/ N! [
<p>
) S `6 I" n$ p<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3 q% `9 i3 o" j" G
个人信息—————————————->个人信息. m: e m9 D) X$ D) u+ c; K
</p>: U5 G; ^! `8 r/ b* x) a
</div>' d; f U" a: ?/ |8 X5 a6 v
<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件) </div>
6 [+ s; e# @' A Q<div id=”nv”>
1 j4 O# _6 l6 D5 ~/ c<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航
+ M; ^5 U/ \% T <ul>
- L3 B& K" o& E2 k<li>栏目导航</li>———————————>栏目导航6 u( h* ~6 Y3 H/ P
</ul>& b# P+ a+ F# @; g* m
</div>
8 z; ~; d3 ?6 a<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>- J' ?7 o. f ?2 W, G! u+ R/ O- h! s
二级导航菜单样式——————————————————>二级导航菜单样式
, y! ]; i7 _; c6 [/ ?- ]3 H. @</ul># E& Q$ z8 B. \4 z
< div id=”mu” class=”cl”>
% f2 z( b# b- \. j7 S! r% a9 G二级导航横排>————->二级导航横排样式
6 Z9 z2 o$ [7 m! \ </div>' c3 l/ }4 N% A z1 V
<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)" z4 {' B4 T! Y; g- ]( }
<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件) </div> n" T( }0 p) `
</div><!–{hook/global_header}–>插件嵌入点/ E+ q9 D7 ?0 e5 Z% L+ n5 V& f: c
% `. z8 ]/ _; W! n/ k总结:大家在修改的时候他的每个DIV和ul、li、和会有if语句,大家在看明白以上图后,在添加的时候要注意一下IF语句的作用,我就没有把代码复制到上面一一解析,希望大家去妍究下!利用这些资源,自己可以做出很漂亮的头部,举一反三!
|
|