很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!
; `3 i% b. X. [# H) K2 H9 V
% ~0 ]( b' N+ i) J, U. ^
header.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!
F( R k& r5 d$ H, c0 ^! P" m7 [4 f: p+ Q7 Q3 \
第1行代码:
" E& I1 j, f$ y5 N5 i2 j6 s1 y% S# g" c. \<!–{subtemplate common/header_common}–>
, ` d8 }6 Z j. g6 r4 ?代码解释:用于调用common文件下的header_common.html文件,
+ D- C7 I% {1 o
备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。
0 o! G' p+ b- |5 w5 o
4 l& M- W9 Q N0 j第2-29行代码:
' a- y9 M$ y- Y! b. j8 ]6 t- ?
从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾
2 V& R i0 A9 P: C1 v
代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
8 I2 S& w2 Y4 F" e% N& h+ z备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写
_8 u; _" o" }! M5 j5 v( j8 J
3 c# U- f4 A1 x4 O第30-186行代码:
3 g' J- }4 G: v
从<body>处开始到此文件的最下方
P& a% m( P' Q8 r# @( y& p: E
代码解释:这是首部文件的核心
- B; g! q1 d" c0 f, v
备注:在修改时请注间要提前备份文件
$ o Z2 j6 t# O6 H6 D. @3 H- P0 J4 i, C# b* q3 k3 t) e3 f8 V- k% v1 l h
第32-44行代码:
! C" |$ a" Y" H- e0 ]' ]3 `
从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾
, m" T( H9 m/ Y4 B7 [
代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
8 c" A4 O& j2 J9 R备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!
& ?% V4 ~$ |' y# c0 m. X) e1 v1 s' Q
第32-44行代码:
( h+ [5 m5 x7 I/ b
从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>
4 t$ |4 W8 B' i, o* [代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
, Y6 w( q4 u% ] c F3 z3 W1 @
备注:在后台=》界面=》顶部导航。可以设置
! \* o, p6 I" K7 K- N
% s2 ?" M" T+ O, f& V0 j第70-78行代码:
: K( ~$ [: U' c& a7 o/ u( m0 u) j0 Q: u; L3 d' I
<!–{if !IS_ROBOT}–>
& W9 ^8 U" ~* D4 y4 e( _ <!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>
1 ? L6 }1 ?/ M) ^
<div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>
0 f, B, O V& Y' ?6 P$ q
<!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>
( e, M+ K0 X( ?' c/ U' y$ Q" j' I8 r
<!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>
, o0 t* Z* t# G <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’background
extstyle[2]’></i></span>
+ G: h9 t( \$ Q2 [" L <!–{/loop}–>
: U5 N3 ~0 O' K1 t' h- H c
</div>
* {1 Y1 D6 v6 i w <!–{/if}–>
. o8 O1 Z3 z# m0 T% r% [# V F" X% s; u. O* q
代码解释:此处是拓展色的切换的菜单
* {% E4 {1 L5 r7 d& e! X( Z/ i备注:如里不需要可以删除
1 r( b$ {8 e" B: c/ e* C0 _. r
@8 h4 ]5 h8 g$ l8 k第80-96行代码:
6 i9 i: a, e6 E( O( m* T
7 t( q0 p. Y: l! I/ m<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>
" ]: w4 Z2 M" g6 H, U7 X <!–{if $_G[‘uid’]}–>
$ g% d5 M6 P: F' K4 I
<ul>
4 S' X8 ^+ U7 w- x0 v9 G& B2 O
<!–{loop $_G[‘setting’][‘mynavs’] $nav}–>
3 z/ c2 E4 A4 {0 U+ k5 I <!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>
* Q# X8 }3 S/ \4 c J- ` A <li>$nav[code]</li>
; l0 A( V& Q. i3 C! |
<!–{/if}–>
. E! c' A) g, o" B
<!–{/loop}–>
3 i1 s9 }% k6 A5 E! G% }0 V O$ I$ }; W s </ul>
- y/ i, @% N' j- t9 E8 M <!–{else}–>
3 X7 \7 M I7 `. a4 q <div class=”ptm pbw hm”>
( |5 X+ k: @1 N1 l* } g
{lang my_nav_login}
) ^6 { F# a: b. @9 u/ D </div>
- `+ Y" u& Q( U# N3 \) ^7 m4 n <!–{/if}–>
) v8 d8 T6 j. n& }. [& T" U) C
</div>
; I1 W% i+ O% j* D, S8 d# h5 o% q1 m <!–{/if}–>
$ X, F6 p! d' m5 c, g
- A1 i( F) M8 b1 D. u& E' d代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
+ ^' W7 d5 C7 u9 C7 o+ y1 ~/ |; f
备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
4 j/ M& o, b3 \. U1 B2 }
+ v) b7 @% d2 ?3 }% c1 a第97行代码:
$ S' M% U: ]9 @( t# D
$ z! f1 V' `1 F<!–{ad/headerbanner/wp a_h}–>
; q: Y7 L% U0 \' Z7 \0 `1 n
; [5 u1 t2 [) \* O0 r代码解释:头部的广告代码,
; v* G$ l6 {. }! T1 N备注:可以在后台=》运营=站内广告添加第98-184行代码:
9 t, F" R# b. j8 r( g& K. X从<div id=”hd”>到 </div><!–{/if}–>
' Z/ V2 |# R- b& i. E; A代码解释:头部的核心文件
# x. s( A& Y- }- i2 h3 Z备注:下面是头部核心的DIV指引
+ r$ N2 Q; O- j |! H8 z. s9 t
<div id=”hd”>
& Q" m. n5 e3 t% ^: w1 _ P<div class=”wp”>
1 P# a9 i+ Z R$ n<div class=”hdc cl”>
! @2 b% S1 @" w, \1 P! G
<h2>logo</h2>———————————->logo
3 [- F1 [! p- w$ c4 a# n
<div id=”um”>
2 V' j3 M+ _( V- z
<div class=”avt y”>头像</div>—————————–头像
2 I& j( x7 m. \! { W
<p>
0 [# ~4 ~: Q" N2 n, B
<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1
1 {2 H! S, |- M5 { <!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2
, F8 v0 X$ x, A+ g4 ?! l个人信息—————————————->个人信息
6 F ^9 J4 B* J; h
</p>
! Q$ b$ T1 C3 P6 C. V/ x. M
<p>
. d3 x' ]8 G. W8 I" \/ r! x" ?# a. U<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3
, h) Y7 h( E0 _4 p% B个人信息—————————————->个人信息
8 D7 W$ J( s3 B, C</p>
2 n) A2 G# ~- f! [8 U# _ ^
</div>
3 ?! U" w5 d" v! ^<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件) </div>
2 S' J3 O. [4 k
<div id=”nv”>
8 @1 j* {* ~2 m7 e- U; \" u t
<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航
! ~8 q+ Z& I$ g
<ul>
" A" D% I0 D$ o
<li>栏目导航</li>———————————>栏目导航
# R9 Y' t6 y! H- f9 b4 P. \ </ul>
Q7 ~" u( @; R/ O5 _) s</div>
4 [0 O# P+ }& L4 _
<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>
6 I8 ?( j! ^9 [& ^& B* X$ o5 `二级导航菜单样式——————————————————>二级导航菜单样式
- j; C) B. ^5 }' ^
</ul>
6 B+ j) c! ^( @+ L
< div id=”mu” class=”cl”>
: S- r+ l# w. P5 ? s# k7 y
二级导航横排>————->二级导航横排样式
' C5 F0 m& U0 ?2 j </div>
7 x+ X5 n1 t4 n
<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)
- H0 i; c- ~) \! Z; }<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件) </div>
0 E) b/ X* O6 D
</div><!–{hook/global_header}–>插件嵌入点
$ i7 |/ Q3 _# Z2 [4 p* J: u- N/ o
; q/ h4 {4 f. I$ I总结:大家在修改的时候他的每个DIV和ul、li、和会有if语句,大家在看明白以上图后,在添加的时候要注意一下IF语句的作用,我就没有把代码复制到上面一一解析,希望大家去妍究下!利用这些资源,自己可以做出很漂亮的头部,举一反三!