坏蛋网络

 找回密码
 立即注册

微信登录

只需一步,快速开始

手机动态码快速登录

手机号快速注册登录

搜索

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

[复制链接]
坏蛋网络官方 发表于 2020-1-20 03:01:00 来自手机 | 显示全部楼层 |阅读模式
很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!% n. c* R/ ~8 _% L% u& Z

* a6 X) Q) b' e" [header.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!( R+ m4 C, b9 A4 d' j

8 @+ I, B# e6 O: j5 G9 s第1行代码:/ w) X" j( M1 ]' L2 X
<!–{subtemplate common/header_common}–>( z: F4 ~" d* ~7 ~8 Q# l
代码解释:用于调用common文件下的header_common.html文件,
7 }" H$ V3 c6 ]备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。
  w* }* u4 L/ w0 ?3 V5 L% V
+ v9 x: ?) b& D3 `, R6 ]' |1 D* t% N第2-29行代码:
# m0 ^* M* N) q; |从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾* u4 a. q' ?3 M- M: ]
代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
, F- y. P; c5 L  \/ s7 u1 p备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写' X3 B2 `% k7 i3 H% [5 s" A: q
5 H2 {- q$ y# k1 U5 Q: C
第30-186行代码:
) U$ b9 x  G( }' T9 [) @1 k2 o从<body>处开始到此文件的最下方2 K/ s7 C3 t1 F
代码解释:这是首部文件的核心1 g& R9 f4 |; |3 j# K3 \6 c' y5 W
备注:在修改时请注间要提前备份文件& J2 l9 N4 T6 b. t9 `
, b/ @: D* e5 x" H2 f( J" i4 L
第32-44行代码:
) v; Z$ H" B4 p. Q4 i" S3 L* L从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾& X5 u' [! P3 s: r( v& k! x$ E
代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,. F- g+ m% u- M! g  u3 ^4 d
备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!
; j3 q1 u( X- M7 f8 E
* |0 G7 D( u, h+ x. ~/ W( N第32-44行代码:% v' ^: Z# H) s" u
从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>
& i$ u) j: u: z3 O, J2 _代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
1 x, l# _8 r  V/ z  r' z备注:在后台=》界面=》顶部导航。可以设置
7 x8 n0 s  F/ h" v" H: Z
; S0 d2 b* _$ r, L第70-78行代码:- z+ `- ^; |- P
  c+ g! w; F8 N2 ]. l
<!–{if !IS_ROBOT}–>
( [) u0 n/ U# h2 `2 l                        <!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>3 u1 Z' _- X9 t1 J
                                <div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>
. _8 ~5 m: R- C0 n; _& O                                        <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>: Q; n1 O3 N3 c8 J
                                        <!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>  k4 M; M" V6 O  n
                                                <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’backgroundextstyle[2]’></i></span>
; Z2 L* m% @5 v; A  W: Z                                        <!–{/loop}–>  S# S8 r. R0 |; l5 A' g7 z
                                </div>
' }4 _* p5 @) |: I* L  B                        <!–{/if}–>* P+ x: Z, B9 ^8 l

5 @5 q$ B- x8 p- F  z代码解释:此处是拓展色的切换的菜单; G2 x. k- ~$ F6 `9 t$ A# U  K- i
备注:如里不需要可以删除: @5 D" T) J* L( v) G

- U) q) }! C( Y' m/ c& f% L第80-96行代码:1 k# E4 F1 P  E$ D5 `

' ~0 c! R  A' F<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>: I3 b& @: c$ x; r% g
                                        <!–{if $_G[‘uid’]}–>& N9 j, f5 [3 k. h2 P% _; J( t7 z7 s  a
                                        <ul>: B, b% N7 f: d. I
                                                <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>3 X0 v& U, F9 j) d. U; c
                                                        <!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>
. E6 r. W! \* }; E. Y9 t, m                                                                <li>$nav[code]</li>
5 v5 E2 `7 M4 G8 ^$ S) P: H                                                        <!–{/if}–>
* M% P' c, G7 J- Y2 O; N                                                <!–{/loop}–>( e0 d1 |; W* C) p; A
                                        </ul>) k' _0 C6 A- h# b! R
                                        <!–{else}–>8 P7 C7 J* ]5 P, u. W* C" }
                                                <div class=”ptm pbw hm”>  @5 J7 {4 B( `$ h! j0 b
                                                        {lang my_nav_login}( V4 X( f$ e9 N$ q7 r2 F) W% I. u2 _
                                                </div>" C: Y  y" U* o$ m" j$ z
                                        <!–{/if}–>
: P9 ~+ ~8 O9 c: e8 o% @                                </div>
2 j, Y. ], U, w  A                <!–{/if}–>( ?! f9 V/ b7 \" b+ Q
$ m1 A' x; @+ H% m% N8 D5 _! ?
代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈. J/ W5 ]5 z2 C- Q  D
备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
  `8 p# I# }9 ]3 C( u3 X- Q
6 \9 h& p# _* l) s  ]$ A第97行代码:; x+ m' c: i( i* J

$ U; }% t8 \! a9 B% R$ D<!–{ad/headerbanner/wp a_h}–>+ J6 R( K: K4 V. N3 c( J
+ x" ^" V* R; L" t3 @
代码解释:头部的广告代码,; h6 k" G9 \$ K! M" V; e* t2 M
备注:可以在后台=》运营=站内广告添加第98-184行代码:, y9 Z5 G* |  a: [
从<div id=”hd”>到 </div><!–{/if}–>
2 V8 f0 R% r6 ^% Y代码解释:头部的核心文件  {, }0 v6 _* ^: ?) {- |, A/ e
备注:下面是头部核心的DIV指引" `. S) i) H( x+ e9 t0 {' u. h0 O5 F
<div id=”hd”>9 u& ]1 ]$ N- ^( A# }+ e$ e
<div class=”wp”>3 O. i# k2 o; I& ^& P. f( S
<div class=”hdc cl”>0 x# W# r- L( Y( n* V8 _* ], k4 K
<h2>logo</h2>———————————->logo
7 W7 j0 l1 {) k4 y* ?1 t) h0 ^4 p                 <div id=”um”>
$ u. w, z3 d3 q<div class=”avt y”>头像</div>—————————–头像1 s* w# w! I$ l0 s9 K0 B  a
                       <p>) E9 }5 |3 q2 k; v
<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1
7 L( |& \" [, j( A# x# `* Z                          <!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2
$ H! S* e/ ^8 ~个人信息—————————————->个人信息1 ]* q& \' f: y  Q$ I9 _% z  A
</p>6 y6 L+ h+ C: C* s& S3 p
<p>! J/ o/ \! M* g. L: y- C( M8 m
<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3
" p9 X$ z2 i8 K个人信息—————————————->个人信息
2 c  O" P, {& }) }, g4 {0 M</p>; G; P6 C8 q9 B
</div>
, U+ L3 e5 P+ W4 O<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件)                         </div>
3 }3 b- m. p- J& v( e7 u9 i<div id=”nv”>
9 L4 a; L) B5 x1 A. V/ j<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航" L3 p7 G# g) K7 K- M
                <ul>( K- Q3 z1 j* M  X6 T4 x& @
<li>栏目导航</li>———————————>栏目导航
' V2 h0 i, J4 g4 \4 V. k                 </ul>
* H' k( ^" k/ l9 y</div>
$ h$ Y' J2 n2 ]' S4 {& r<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>' g% `3 ^( z9 W$ ~: Q
二级导航菜单样式——————————————————>二级导航菜单样式! Z6 t7 ?9 c2 B1 c; i5 ^0 k
</ul>3 M1 d$ x5 ~; i# l, t4 B
< div id=”mu” class=”cl”>
4 V/ y3 H: N: P0 x二级导航横排>————->二级导航横排样式. E8 x0 s# P1 t; g% l6 S8 p
              </div>
7 F9 e  g$ L4 S2 D, d<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)* d& M' |( o" G) f( m
<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件)                   </div>+ w" z- Q2 U, B: n  `% U
</div><!–{hook/global_header}–>插件嵌入点, L  v7 M* y( @- {7 B( j
  Z- I- f! X6 Z; B4 c  H' M
总结:大家在修改的时候他的每个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 | 显示全部楼层
我是个凑数的。。。
回复

使用道具 举报

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