坏蛋网络

 找回密码
 立即注册

微信登录

只需一步,快速开始

手机动态码快速登录

手机号快速注册登录

搜索

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

[复制链接]
坏蛋网络官方 发表于 2020-1-20 03:01:00 来自手机 | 显示全部楼层 |阅读模式
很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!
1 U( N; [9 p( d/ e6 v  J# p' i% @+ P" _$ W# F" k( w' {7 Q( B% G
header.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!
8 v# B4 [9 V3 e! d" r/ V2 v7 v$ q7 d
第1行代码:+ U7 G0 \7 K! d6 o5 ]' L% p
<!–{subtemplate common/header_common}–>
% R5 p6 {' B. j7 Z& V$ J; S代码解释:用于调用common文件下的header_common.html文件,4 P$ |* }! N# J* r. g
备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。
( O8 V! w5 g" o+ w. z" b+ ~" m8 D
, d1 D% J4 \, V% n) G; X) x" J, C& B第2-29行代码:
) B8 P" ~% {- e- |( Y从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾( @( S! N- j2 h5 B4 _* u
代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!# L- N" @" H9 Y: r. @
备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写( D2 X) {8 q3 l. W

6 x0 Q6 @7 c4 n, m+ X/ i0 M第30-186行代码:
7 E3 K. q7 ~) _从<body>处开始到此文件的最下方
- B3 P8 i, ]* m7 o8 {, o4 K代码解释:这是首部文件的核心# e8 ~& Z* v& G* w
备注:在修改时请注间要提前备份文件
! ]2 R+ }1 s* T0 Z
% X, }5 S' W( ^) M" I7 I第32-44行代码:
) x: j- V. c, p9 J$ _- I从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾" }: T6 Z$ ~- G; h
代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
% |0 V5 }2 d  F备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!
$ @! z9 G6 L. I' Y, x- a
+ k: [2 I+ p( c: F' {7 r5 l第32-44行代码:
" o* r6 e* u; v; `9 i3 T$ b0 ?, H- ^8 _从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>8 x5 R/ D, L' g
代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
- F# Z& g/ ]4 d- Q备注:在后台=》界面=》顶部导航。可以设置/ H+ f; L. I. @& F
" i4 r, M/ g2 A/ i" l' E, t
第70-78行代码:
# E9 K# g6 b, O/ {+ m  \6 n) t* |
/ x" ?2 O' |$ \- j) B<!–{if !IS_ROBOT}–>: P  f' x8 I/ a- _5 m
                        <!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>
2 N- O8 u% b9 [- j                                <div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>
9 {  k/ R! U& ~                                        <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>
! F: s7 X0 b, ~% \8 H% l                                        <!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>- O5 x7 j: B2 V- ?* u) R, t- u
                                                <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’backgroundextstyle[2]’></i></span>' ^0 a" ?" c* J( P7 h
                                        <!–{/loop}–>
3 n. C& |% Y4 v- c- O1 T                                </div>& G0 N$ W8 n0 f7 f. K
                        <!–{/if}–>* }& s; Y  M+ w9 x

( d( S" s4 H6 P  ?, e代码解释:此处是拓展色的切换的菜单2 U( P- Z! C, I( u9 T2 Z
备注:如里不需要可以删除
, H0 `' L$ g' ^. x  F' v* b# ^2 [0 q3 V4 I
第80-96行代码:
- g* }$ V, k- F) |. L! ]% }, m
6 L2 v8 q0 r) j" O9 r  r<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>
% x( A/ a7 {" L7 d4 J                                        <!–{if $_G[‘uid’]}–>
9 R. d: k4 _. q6 w3 {4 F                                        <ul>
9 I. d8 y  t6 ]                                                <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>
- a, l7 l! d- G$ u1 N" ~                                                        <!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>( H* b% R$ _' x/ t9 g2 S
                                                                <li>$nav[code]</li>7 {. a/ K2 F- O
                                                        <!–{/if}–>- Y- ^6 l7 g# e4 W
                                                <!–{/loop}–>
' i/ ^9 ~( a$ Y9 f$ }4 k1 @0 J8 h, z                                        </ul>  j- x' ?6 B5 z' f; `$ {
                                        <!–{else}–>
2 @4 ]( _! h- W- ?; e" \" V                                                <div class=”ptm pbw hm”>( s! a9 H: ]% P# G/ ?
                                                        {lang my_nav_login}: Q6 S' g  @* A
                                                </div>& I6 `. y- s5 M* Q! ~' f6 ~3 J* D
                                        <!–{/if}–>
! s0 G# }) Y7 T  L( Z3 t                                </div>" M/ q" m# `3 G2 _% e/ Z  _, g
                <!–{/if}–>5 d; g4 T* L' o8 c- f& r
3 {: ~+ A9 P; _, U& Y2 E: P
代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
! O: j& J' S; u备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
" W* p% l3 c0 D$ k, K  D* g8 H4 u& ~- _, N0 _' Q2 T
第97行代码:4 r% }( n; r( M
& ?) C9 i1 a& }
<!–{ad/headerbanner/wp a_h}–>
5 p! T4 B; s5 K2 z4 w  P' Q/ j$ Z# x6 x1 K$ D
代码解释:头部的广告代码,) m( Y1 k2 e. @- Q
备注:可以在后台=》运营=站内广告添加第98-184行代码:6 p' e; x- E. M. x, s; X
从<div id=”hd”>到 </div><!–{/if}–>
6 ^& X3 e6 T* f) [: U2 t代码解释:头部的核心文件
( I& ^' S* Z; t; @9 ^备注:下面是头部核心的DIV指引/ E: Y7 O% i4 r* M: t
<div id=”hd”>9 h  k! Q, C2 M- b+ c  h' B
<div class=”wp”>4 _3 g, ]+ E- A8 g1 S5 k
<div class=”hdc cl”>8 W0 Z  S2 p3 Y& h4 X
<h2>logo</h2>———————————->logo
) e7 |) k7 {2 x                 <div id=”um”>' t* G; ^+ y! @- b$ z) S+ q; z% x
<div class=”avt y”>头像</div>—————————–头像
/ I' A8 q( C- R! m                       <p>
6 p, f# w. j" ^/ l$ }! ~7 ^/ l. D<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1+ I$ u% D6 E- K! M. [1 W* u7 |; t
                          <!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2  N8 l3 \6 x' f$ h
个人信息—————————————->个人信息, G7 D3 v* q$ U
</p>: x* }2 G4 [( _' v2 u
<p>7 A3 [& ^" W& W) g
<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3
" t8 F$ Q  E2 d/ @个人信息—————————————->个人信息! c; m% Y# u9 h& N
</p>
: F; ~  I. p% E</div>5 Z% V7 B* o8 j" M) i. j
<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件)                         </div>8 z' x& `2 ^# q
<div id=”nv”>6 C8 ?# L9 Q! p/ I' L
<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航" o" ?0 x, N. S  X! L; M( z/ Z
                <ul>
2 D  w( {- J2 h% s  s3 h5 Q<li>栏目导航</li>———————————>栏目导航
) _* M: t9 _( {                 </ul>
) v) W4 x2 u4 I/ a2 `2 A</div>
; z/ ]- l: l/ R" ]$ |& g<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>
$ q8 S8 E# U( _" \) H" y二级导航菜单样式——————————————————>二级导航菜单样式
8 z7 N( B) {# x! K. T</ul>1 h) h) R$ n  v; o) ?
< div id=”mu” class=”cl”>
! K8 |- |1 J5 @. M2 y. `二级导航横排>————->二级导航横排样式
" C' g6 _: H6 @" P  D6 y! \0 z              </div>  n  D1 }4 A" f9 q+ y. J- ^' L  G2 @
<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)
0 I7 U4 W, T4 C( A" h3 Y1 A* a/ {<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件)                   </div>% U9 H# U# z4 f- ]: o
</div><!–{hook/global_header}–>插件嵌入点' Z( n+ @. w: j

2 ]2 p! Y( l' [8 ~7 e, J( x总结:大家在修改的时候他的每个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 | 显示全部楼层
我是个凑数的。。。
回复

使用道具 举报

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