坏蛋网络

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
开启左侧

[DZ教程] Discuz!模板代码解析–header(头部文件)

[复制链接]
坏蛋网络男神 实名认证 官方 发表于 2020-1-20 03:01:00 来自手机 | 显示全部楼层 |阅读模式
很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!
6 b: {( T" a0 d
+ N6 [' B4 s) I. B2 c/ Bheader.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!- v3 m8 Z, D$ k+ v
2 R! {6 O" ^' [; b
第1行代码:
( _, r( \- u& F2 z9 X7 i<!–{subtemplate common/header_common}–>9 e5 ~5 \8 t5 W( G- E1 ]
代码解释:用于调用common文件下的header_common.html文件,, \1 G6 U4 o' l/ e6 W( F8 E" ~
备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。: {$ i# {% G! t" k4 d, I

9 M2 W2 U7 Y3 N8 Q$ h5 L+ _. J- }第2-29行代码:1 j3 k- k5 P" w8 e6 v
从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾
4 j! ^1 r4 e$ l代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
5 w8 m/ A% D3 R- [备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写
* Y" i) V' X8 [0 A$ o. P0 k) J. j
- T4 w# ^- V6 Q第30-186行代码:
( Q5 P4 T5 F  s9 _" c9 W' M从<body>处开始到此文件的最下方$ `$ z/ u8 J' X: t
代码解释:这是首部文件的核心; ]( W2 ?' A7 Y& ]! [
备注:在修改时请注间要提前备份文件
6 s  F$ U/ ?$ K; J: z5 l- j
, V1 b) z' l+ v  `6 y, d( r4 y4 D第32-44行代码:* d* A5 l$ v5 \% r4 L6 R
从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾
8 O/ l+ J, e9 X+ m4 z代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
/ x4 C+ B: F6 H1 F) K5 Y备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!+ U8 A6 [  s8 s6 {/ i) O4 S6 N

# J7 i3 e) z4 Q1 D3 l: y; e第32-44行代码:; a8 ?' u! ]) i- K! Q' @, z4 ?. N
从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>
7 F+ B' U8 V2 E9 w- h' v代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
# C  K5 W' a: w备注:在后台=》界面=》顶部导航。可以设置
" v! Q7 y3 o+ ?$ f6 q# w* T6 G' w
第70-78行代码:0 g, w0 {9 c: C! G  X: H0 _7 }

. u- W: @" D  K/ [<!–{if !IS_ROBOT}–>
0 d. v7 w9 m9 `* X$ ~                        <!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>
* f5 R$ h: V+ m                                <div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>
4 S" D5 x5 {$ n6 K$ A7 @$ o- R                                        <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>
' T0 w9 D8 [  q$ B$ ]                                        <!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>' v9 t5 Q5 k9 O/ I+ [" S+ ?
                                                <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’backgroundextstyle[2]’></i></span>
4 O; x. T/ l' P" P& F  ?                                        <!–{/loop}–>
: ~6 S! f0 r7 U5 ^7 r                                </div>5 Z) x# c4 X) E8 P" n
                        <!–{/if}–>3 D0 Y7 W8 m( n: L
# s% K+ s8 b! I& `
代码解释:此处是拓展色的切换的菜单( O6 z+ N0 d2 n/ M' Y# C6 M
备注:如里不需要可以删除9 l: I! F) @% a# V  ^

& Y# l9 O* l& `第80-96行代码:! h8 O. {1 n% v. F3 t* s. @, S
; P: z; q' R8 ^# K, Z/ C% [
<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>
& D  F9 p0 s4 L' i2 F3 r                                        <!–{if $_G[‘uid’]}–>
! W  I4 ~8 f# D- D4 l                                        <ul>0 y) }/ a: S( \* [( W! y/ |4 v
                                                <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>7 H1 j8 ?: W- y' f) f
                                                        <!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>: c2 R1 H: A& i6 w0 a6 `4 R: S) |
                                                                <li>$nav[code]</li>& l! W- D$ O" e9 ^' [+ F
                                                        <!–{/if}–>/ G# z4 V/ l8 _3 e$ ?
                                                <!–{/loop}–>
) I5 M* t8 v. {) s; S6 k; _. w                                        </ul>1 l0 X: D! ^- q! I7 A
                                        <!–{else}–>
7 H' {" f* b' j) J8 p0 }2 P                                                <div class=”ptm pbw hm”>2 T; n/ Q- L$ _- q
                                                        {lang my_nav_login}, \6 f1 v5 b. L6 Y- a" e5 Z
                                                </div>
9 z& n  y* C4 n; r4 {# B7 Z                                        <!–{/if}–>
4 M% Y% A! t2 Q% k1 I/ x                                </div>* c( ]# H) l- _2 u& g9 [
                <!–{/if}–>
1 j- i6 K: i( D5 ]( l- a1 L- Y3 j; q# D' J" W+ f9 Y7 L
代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
9 U8 [- F1 J0 m  ]备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
1 N+ [9 P8 F  V) o1 x3 t5 x5 d8 W" N* V8 M9 K7 q# }7 d
第97行代码:2 L( U: o. J6 L0 m8 Z

# T$ ^, w( D" _3 Z0 K! y5 u<!–{ad/headerbanner/wp a_h}–>
$ Y% v0 D3 Z7 ~7 o+ `1 ]$ T
& A5 }, E+ `8 N2 M) \代码解释:头部的广告代码,8 \" V5 [# a( e. A9 T; r
备注:可以在后台=》运营=站内广告添加第98-184行代码:* j9 M  H) H1 X+ L! Y- C3 d
从<div id=”hd”>到 </div><!–{/if}–>3 b6 p$ X: o+ |( k, i: e
代码解释:头部的核心文件
0 O; d" X/ o% l备注:下面是头部核心的DIV指引
) x) O" }& c6 ^6 S" B<div id=”hd”>
& c9 z0 S. |# f8 f/ l. f<div class=”wp”>
6 a- Y' z& y# F2 v<div class=”hdc cl”># @1 p! k  s" L  `4 Z1 V7 t
<h2>logo</h2>———————————->logo! }8 x* a; n& ]/ [$ ^! o
                 <div id=”um”>
3 ?  Z, @9 b8 x/ ?  L, g<div class=”avt y”>头像</div>—————————–头像2 P0 X$ h- i. P, o3 V' n
                       <p>" ^% Q6 G9 v/ }+ \
<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点12 J! q/ P1 ^  u* H' V, w
                          <!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2
7 a* F6 x$ `1 ]  }! ]9 F/ `个人信息—————————————->个人信息: l: f! Q  B0 c9 O) O0 N
</p>
0 }& R0 v6 y, @; _) k6 \- w9 R- d<p>' c2 K% ~* d% c
<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3, e9 t; }. }" F. S7 ]7 x
个人信息—————————————->个人信息
9 q( q' T9 E) L. x1 N( ~</p>
% [* v# h( b- d4 a8 e</div>
) J% W  n# }( p; U5 E6 R$ q0 I<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件)                         </div>
0 {/ U) L2 _* L0 p1 L<div id=”nv”>* g3 V. z8 S- |3 `/ F0 Z
<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航7 M9 `# \, g; a* s% g  U  x/ m
                <ul>9 y/ |2 G. i( w& M* B) Q
<li>栏目导航</li>———————————>栏目导航
; j# @1 A! Q% D9 p2 Q                 </ul>+ c- S/ Q4 l0 f. ]- R2 u: h
</div>
1 O- K# l3 A) n. t<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”># l1 o! t7 P  D: `$ x
二级导航菜单样式——————————————————>二级导航菜单样式
$ J( @( W( u- c3 r</ul>( h/ a" h3 m( B8 i8 S
< div id=”mu” class=”cl”>
( \, k- J% b0 i* u* E二级导航横排>————->二级导航横排样式0 s( z" m7 ~* h  ]: M9 }1 o# h
              </div>
) P0 u1 D/ v( X0 k<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)" k& E9 Q) N9 g0 b- d; M
<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件)                   </div>
1 d* e, w) X" X9 B</div><!–{hook/global_header}–>插件嵌入点
8 F# B+ R- s, S7 E' v; ]+ c' R/ o3 h# j' q
总结:大家在修改的时候他的每个DIV和ul、li、和会有if语句,大家在看明白以上图后,在添加的时候要注意一下IF语句的作用,我就没有把代码复制到上面一一解析,希望大家去妍究下!利用这些资源,自己可以做出很漂亮的头部,举一反三!
想说又不敢说,说了又怕被拒绝,拒绝了又怕尴尬,就是这样的。内心很痛苦的那种。
起什么名字呢? 发表于 2020-1-20 13:44:18 | 显示全部楼层
沙发!沙发!
回复

使用道具 举报

MR.Z 发表于 2020-1-21 08:00:48 | 显示全部楼层
有道理。。。
回复

使用道具 举报

hgfhgf 发表于 2020-1-21 17:55:29 | 显示全部楼层
我是个凑数的。。。
回复

使用道具 举报

1287252690 发表于 2020-1-22 10:59:32 | 显示全部楼层
支持一下
回复

使用道具 举报

雨后晴天 发表于 2020-1-22 21:38:49 | 显示全部楼层
学习了,不错,讲的太有道理了
回复

使用道具 举报

岁月神偷 发表于 2020-1-23 11:01:26 | 显示全部楼层
过来看看的
回复

使用道具 举报

瑾瑾 发表于 2020-1-26 03:05:05 | 显示全部楼层
路过,支持一下啦
回复

使用道具 举报

 shu1332725 发表于 2020-1-26 04:06:46 | 显示全部楼层
过来看看的
回复

使用道具 举报

张红霞 发表于 2020-1-26 11:12:24 | 显示全部楼层
我是个凑数的。。。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表