坏蛋网络

 找回密码
 立即注册

微信登录

只需一步,快速开始

手机动态码快速登录

手机号快速注册登录

搜索

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

[复制链接]
坏蛋网络官方 发表于 2020-1-20 03:01:00 来自手机 | 显示全部楼层 |阅读模式
很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!
! K' K3 ?: Y% b+ d) [  i7 B  Z4 H5 P  m) K! R1 ~8 @
header.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!
6 M) L8 J: j6 x$ i, M) Z5 b! c5 A0 j1 _' w
第1行代码:
9 n+ V. }9 J/ S7 x<!–{subtemplate common/header_common}–>4 _* ?/ Z* a9 l8 Z# X* Q- Y
代码解释:用于调用common文件下的header_common.html文件,7 Q# [, D# {- r- S$ v( v( F
备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。7 f3 P( v! i8 K" L9 [' j- f5 ^
* r3 Z( m& {9 C# M2 ?/ @
第2-29行代码:
- x* O  w/ l' x9 I# d4 g从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾' Z9 A/ C# m4 B4 @2 S
代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!( B- Y. y1 x7 P. N2 T% C( m* {* F
备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写4 I  v# _5 t" z& a
3 ^3 m' l$ E0 D& [: W' d; U
第30-186行代码:
0 o+ X% T5 G7 a5 w从<body>处开始到此文件的最下方
; x4 R5 Z3 b; o( `8 `4 e$ L0 m; `代码解释:这是首部文件的核心
/ a7 T' d# S8 t3 u/ A+ s- O备注:在修改时请注间要提前备份文件, z# |0 e! j7 f! I0 B
$ C/ H( P0 n. D! }5 G9 e5 |( M
第32-44行代码:. H" R! p* ~/ C; S
从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾( v$ `, g  E4 n' V; \4 A
代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
; {& v. a) N" I2 h备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!0 W' p7 E" M4 e
1 }! n' M0 S5 V1 F
第32-44行代码:; e) I- f. ?2 H7 \2 j/ Y; M# {
从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>9 @; ^4 i! L  ^2 W$ r
代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>4 R6 }( V( q4 ]3 q7 c
备注:在后台=》界面=》顶部导航。可以设置
0 \+ q9 `) |* Y: s# z) X9 |& Y3 o. H/ P+ u2 a  X2 v
第70-78行代码:) J; d0 D+ C% N9 a8 K5 h
! \" Z$ @4 m/ T$ Q
<!–{if !IS_ROBOT}–>( O( z* ~0 P$ }& [, w( |8 I; _
                        <!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>$ q0 c1 `3 G8 H  M: c
                                <div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>
2 l0 H2 [! V$ e% D; {! @& `7 f; x% u                                        <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>
2 J" F( e8 q/ `- B! ^: C. [1 |; K                                        <!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>: K$ U9 \* P( a; ]
                                                <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’backgroundextstyle[2]’></i></span>& H# I' _& {/ T, I+ w. K
                                        <!–{/loop}–>
3 p) W3 U' R6 g: l                                </div>
; X# g0 e- F0 H                        <!–{/if}–>
$ Y! G) A& m( `8 p7 b" |0 ^( I
代码解释:此处是拓展色的切换的菜单
7 W* T: ^, w: R- Y. q4 a9 K备注:如里不需要可以删除
  t. B9 l: }% p7 [3 h- j9 m/ ~$ t' [- Q$ H; I0 C9 D
第80-96行代码:
4 R( i. ]4 `" m2 Q7 u( _* G9 N
1 u- _0 N( x1 S<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>* N: V- C6 U$ z! {
                                        <!–{if $_G[‘uid’]}–>" E4 G. r' ]9 E& h9 Z
                                        <ul>
0 T! N; y* ~7 B' ~% E( f                                                <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>5 @. i' }1 C' A+ A. S. u
                                                        <!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>
# S# m* R$ b- u, [9 u                                                                <li>$nav[code]</li>
6 U! p& l% t, X, |$ Z/ q                                                        <!–{/if}–>
' ]9 ?. ]/ G4 a, B/ |% s                                                <!–{/loop}–>& B1 {/ T5 w. u9 C1 G; J
                                        </ul>+ B1 I, l) @4 N% Y. H1 U: ?; A
                                        <!–{else}–>
3 a$ g. |3 U* R& f                                                <div class=”ptm pbw hm”>
5 P  n+ v3 o! P  d" k                                                        {lang my_nav_login}7 _" J7 X* Y5 H1 I5 z. Y, y
                                                </div>
% z( J4 ?1 S8 f                                        <!–{/if}–>
5 T1 Y2 }* u9 i( C                                </div>
: \$ p8 @( Z; y) F                <!–{/if}–>
# O% B; l2 ~+ n2 h  Y# `8 L- |8 ~
代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
1 p# t$ Z- A( S& s9 E' w& r# e7 s备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
: A& O& D5 l  m, {1 t) M/ h9 K7 A+ J
第97行代码:
: e# \( v4 z' J+ i
5 f. U' \2 d! i+ F" @% ~6 E<!–{ad/headerbanner/wp a_h}–>
5 R1 L4 b; R4 U0 ^, d; y9 s4 ~# H0 b" O- t& V, P) [: O. U2 N
代码解释:头部的广告代码,
0 P; D0 I/ Y6 E- u6 n' d5 p备注:可以在后台=》运营=站内广告添加第98-184行代码:8 z/ G- u. E7 A, V: V0 c, }9 W4 D, p
从<div id=”hd”>到 </div><!–{/if}–>0 k4 t: \$ n" y" g$ c& p4 K
代码解释:头部的核心文件
) H' \; y+ T9 K9 {* }备注:下面是头部核心的DIV指引
. E6 d  T+ P, o: c" p4 R3 ?<div id=”hd”>
. |8 d8 y8 A3 f<div class=”wp”>: m8 Q7 ~0 N- i) x; m: T7 U
<div class=”hdc cl”>- l* D8 b/ l9 T. ?3 C2 S8 [6 X8 W
<h2>logo</h2>———————————->logo' R$ D: j: C# H) ]( T" R
                 <div id=”um”>
) d% o, g( G% a! n  Y+ q9 u( ]<div class=”avt y”>头像</div>—————————–头像4 P+ n8 L* M; f: p
                       <p>1 T0 u4 I3 G/ i, L6 b- ^0 I2 o4 J% d
<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点10 j6 x2 E3 S* z7 ?3 s5 F! M
                          <!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2
' t8 ], v- q/ F: \. W个人信息—————————————->个人信息- C8 e1 u8 U. N& A! H( L7 ^, e  H
</p>8 [. x" d. X: M) R- n7 g2 C5 k
<p>
' s4 I8 @7 ^6 x# k" K' B' O3 @<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3
8 k$ m/ D7 q, i个人信息—————————————->个人信息* ?4 n! l- ?2 k' V, d, f. }
</p>
% f, w8 ]- j* l: i! {  W) L2 P, o6 B</div>. r6 S6 ^+ }6 ]& ^% Y/ S# Q" S. V
<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件)                         </div>
4 n) E6 ?- n* n/ ~4 s<div id=”nv”>
, @0 n( c3 c2 j1 d! ^<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航# u, }4 m% }. ]
                <ul>0 z4 {' f: Q5 R
<li>栏目导航</li>———————————>栏目导航1 ?2 ]" I6 T/ R; K) h5 x" \! n! u
                 </ul>9 t& ~! W  Z% O8 k! @8 C: @( `' b" W
</div>
: N! x3 B* H- A! u- F<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>" T1 ]' ]4 I1 \2 T7 L
二级导航菜单样式——————————————————>二级导航菜单样式* k+ ?  p( H' c1 Q1 D5 O
</ul>
& ~) M$ |5 N1 c8 f5 |< div id=”mu” class=”cl”>) v# |9 _8 Q) B1 W$ b
二级导航横排>————->二级导航横排样式% `) |* A7 j5 A/ K
              </div># G  J1 b% ]4 V% W; d; {
<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加); \3 s4 B5 S( Y& |! b# M
<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件)                   </div>
  h" u( C  W" D! H2 v</div><!–{hook/global_header}–>插件嵌入点
& [7 l2 n6 r2 ?( W/ _6 D* H) i3 @% T+ o5 S% J
总结:大家在修改的时候他的每个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 | 显示全部楼层
我是个凑数的。。。
回复

使用道具 举报

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