坏蛋网络

 找回密码
 立即注册

微信登录

只需一步,快速开始

手机动态码快速登录

手机号快速注册登录

搜索

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

[复制链接]
坏蛋网络官方 发表于 2020-1-20 03:01:00 来自手机 | 显示全部楼层 |阅读模式
很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!
- j- M3 k$ I& _1 f2 Z( B/ G
% Z5 U. H  m4 r: z6 J, |+ h# mheader.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!+ p0 z' F/ p8 e
( o4 D- ]2 h" M5 i
第1行代码:
4 u5 A# a1 e- L8 c1 v. x( C<!–{subtemplate common/header_common}–>
, v! U( B2 y5 y8 r( `代码解释:用于调用common文件下的header_common.html文件,
  G; n  p& K& s备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。% |  B, U5 g, m: X6 E- p* q/ u
& U! [4 y7 e/ ]) p7 d
第2-29行代码:! u/ S; g7 d& c6 \) K2 e
从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾
  K& C9 D6 d/ Q5 i6 m, i代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
2 }" o& ?" k# V& |" H9 I9 Y备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写
; L9 f+ f; L2 w8 O' \
7 {0 J* a9 T; C' h第30-186行代码:
, C0 q( f# f/ ]6 j! y8 P5 G从<body>处开始到此文件的最下方
9 Q; ^. w, f$ f. ?8 s8 Q代码解释:这是首部文件的核心
7 q2 |! j: @9 S6 c' o8 _$ P0 t: y备注:在修改时请注间要提前备份文件$ m5 Y9 k8 t4 B  [' G; ?4 `

% q% H0 x- \6 b7 W) c2 P第32-44行代码:# y1 a$ a' w$ }- O
从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾0 {. A2 s, V! o+ p; W* z; }
代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,5 b0 o. z( w6 P; Z
备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!- L( m. A! z2 r2 f1 v

8 _) U& ]" C  R第32-44行代码:9 y: }& P: R. ?! C; U5 T( ]
从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>3 P. ?/ E9 }* H8 ]. G$ f, }) Z
代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>& `* y( `" L# O' d/ M
备注:在后台=》界面=》顶部导航。可以设置, G2 }/ s, I: G/ x& ~
/ d* j9 Q- A0 D7 s3 u$ @
第70-78行代码:/ ~4 O! @1 q6 }0 B2 ?

4 i/ X! A4 }# N' W4 z3 z2 ]<!–{if !IS_ROBOT}–>9 }& w  E- P3 l' m# I! r
                        <!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>
2 R8 ^) x$ a; o5 Q                                <div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>
. K2 }0 y$ ^' @& U! {+ F9 e                                        <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>; A, P( [. |+ l$ N9 p
                                        <!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>& D0 `# ~7 I* K- H" Y
                                                <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’backgroundextstyle[2]’></i></span>! I6 F- ?! t& O4 E
                                        <!–{/loop}–>
3 r) S8 {( e* o  y4 j1 C                                </div>
5 `  ]: E) a1 `/ ]                        <!–{/if}–>1 b& u( l6 R* \# ~6 `

( I* A8 `0 `  l" v代码解释:此处是拓展色的切换的菜单6 L& ^# }' g# H7 ~$ t* x
备注:如里不需要可以删除8 M. o  w/ X: [6 e; z( Z

# n1 H' o' E  q  P: A第80-96行代码:4 ?3 {- A# s8 _$ Z2 S, y* q3 G

# T" w& M# n1 C$ ~, }  K  `<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>" y8 p$ }; f2 [5 }
                                        <!–{if $_G[‘uid’]}–>1 J) f7 g! h3 g; ]( L
                                        <ul>
$ {! ]* \6 d/ w5 L                                                <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>
& V0 [9 z. Z) T; o/ @                                                        <!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>8 g' Q3 C- U( v. B( ]
                                                                <li>$nav[code]</li>
# K# N, B( _5 i                                                        <!–{/if}–>
$ {, r- M, O3 ]- D/ I3 e                                                <!–{/loop}–>% O1 `1 n& y$ Y( ^
                                        </ul>
/ |3 L8 a0 j# s; U                                        <!–{else}–>+ s0 ]% y5 O) m1 q; O8 K4 n
                                                <div class=”ptm pbw hm”>
/ |4 s1 m' b: K. P+ U7 J; [, u# n                                                        {lang my_nav_login}1 e5 Y5 t6 J. q! ^( ~
                                                </div>. x4 Z  f! S: H0 p
                                        <!–{/if}–>+ `2 m: `! k1 @/ ]4 s
                                </div>
. T* G) V9 j$ n& h0 }                <!–{/if}–>
5 G8 Z3 o7 q4 \1 F$ b! R; }9 G% m8 G; m; d
代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈) N  }1 S) p% v1 e0 S
备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
2 ~- I' d2 d; n3 j) u  H& V8 ]+ b. I) O3 U! G, Y7 r2 W
第97行代码:" m+ C( {. @% P6 A0 W* h- Y9 y

* F2 o, ~$ |' _, G/ R0 }/ D7 h<!–{ad/headerbanner/wp a_h}–>
! O& N; i+ E$ l0 Y  j, }
* E1 C% B2 I# L( V# h# L# N7 o2 e代码解释:头部的广告代码,
% Z6 Z* Y* m! o( p& s; t备注:可以在后台=》运营=站内广告添加第98-184行代码:
" @& R# V' V$ S. r从<div id=”hd”>到 </div><!–{/if}–>$ H2 K4 }4 f7 w# B" N
代码解释:头部的核心文件) D1 a* s6 O5 c0 u2 A
备注:下面是头部核心的DIV指引( z5 T; q: }% C# }' m. {3 Q2 k
<div id=”hd”>* Q$ t: Z7 J  {( y3 e% d! [  {
<div class=”wp”>+ C( T* ?: }& C* d6 M; k, }' `
<div class=”hdc cl”>- a. P7 T; S3 `3 z
<h2>logo</h2>———————————->logo
7 t# Y" x5 I% [) T# w9 Z- K( [                 <div id=”um”>
- l- [, D/ L! _: _( p<div class=”avt y”>头像</div>—————————–头像
4 _; y2 f/ A' Y* P  H1 d                       <p>& I2 R5 [! y0 `( g0 e# k; T7 C
<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点16 q, I/ E* ^0 k' @
                          <!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2
* W4 }. m/ N4 C2 l& F个人信息—————————————->个人信息# k, s0 h+ K6 I
</p>4 d4 o2 {6 S) [0 |( @  R0 x, E# s9 I
<p>  b# S1 a1 r- k7 }0 Z
<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点32 y8 U( o6 v; a2 s
个人信息—————————————->个人信息9 e4 n0 }$ _, L$ S
</p>; D( s, F5 O- k, Y
</div>* t) v' X7 P$ g! y! ^2 j
<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件)                         </div>8 V( Y& R  c$ G, O, r4 {. X
<div id=”nv”>2 e* ?. e/ U' [( M+ v+ P- w6 I
<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航& Z( H8 ^/ |2 L5 t. A! C0 T+ {: R
                <ul>6 p3 ]! _5 c  S, n  L0 {
<li>栏目导航</li>———————————>栏目导航
, q! v5 F. S5 |" c( V& ^3 X$ V* e                 </ul>5 C! a6 P, I* ?. s4 @7 Z2 [
</div>
+ z8 O9 @) y$ r8 _9 ?( _0 k<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>, y) I% u* v! m% e% D3 R
二级导航菜单样式——————————————————>二级导航菜单样式
. v/ \, O; n9 b: E- n" _1 l</ul>3 }3 d3 h$ B1 R- s  X/ l
< div id=”mu” class=”cl”>- y* G( D0 g3 i5 [
二级导航横排>————->二级导航横排样式" o# z! E: J7 I# r* c
              </div>& |% _4 x6 Y, e7 w2 y6 V$ y1 H
<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)# _) x8 B3 l4 F' }- E7 m
<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件)                   </div>& K3 f3 {/ V+ `
</div><!–{hook/global_header}–>插件嵌入点! r6 B5 ~! r, }# q
+ ^/ r3 T% x, ^8 _
总结:大家在修改的时候他的每个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 | 显示全部楼层
我是个凑数的。。。
回复

使用道具 举报

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