坏蛋网络

 找回密码
 立即注册

微信登录

只需一步,快速开始

手机动态码快速登录

手机号快速注册登录

搜索

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

[复制链接]
坏蛋网络官方 发表于 2020-1-20 03:01:00 来自手机 | 显示全部楼层 |阅读模式
很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!
! ?% @+ u+ \3 h; \7 n+ v
+ o, @, q' G! c  y8 C* ?( {header.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!
; g7 r1 e( _/ |" K3 P/ s% _7 u# l1 A2 G; ~9 Q7 X1 w% _
第1行代码:& y6 r. `+ N. h. y2 n8 a
<!–{subtemplate common/header_common}–>
4 J% Y3 Q- k4 j, |, t( c代码解释:用于调用common文件下的header_common.html文件,
* I7 m1 b" V( a, @* U/ R! ^备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。
4 M6 e( r5 k4 X$ B  s/ S6 k+ S$ l' F  l. r) r
第2-29行代码:
; S* Y& a# V/ w; i: R从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾
0 _" B' S) {7 N6 S代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
* h4 d0 n$ k: _7 R! E2 A备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写
% E7 O! \* j* C0 L# ]
# E4 e1 ]2 P' j, e# C5 N6 V第30-186行代码:8 N+ d1 E: K1 g; A. Z5 |3 B. ~5 @$ p
从<body>处开始到此文件的最下方* n) I, a. x3 @: k! v
代码解释:这是首部文件的核心# T  X. D- Y& A7 S* G$ q3 o: Z
备注:在修改时请注间要提前备份文件$ c4 b* E- r1 ]
$ @1 d# A) e. D+ v2 J, @
第32-44行代码:
& P& {1 @# S- o) F& T从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾
5 ^  c- P- n! e% \代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
* o. `" S- e$ U备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!/ f3 o! Z) n2 O8 P) F3 i

3 Z2 b) l% i( x5 N第32-44行代码:
. @& L, E- W: K: D$ O7 ^从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>3 m$ }9 Y' U. W% ~, ]6 v# t9 F# q" C9 g$ Z
代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>$ f) Y7 u2 x" x; w3 |8 I( v2 E
备注:在后台=》界面=》顶部导航。可以设置, e2 P5 Z. r+ B# n& }
6 h1 f4 k! `4 k" \. |( ]
第70-78行代码:
" Y  p) T9 ~+ Z2 R/ s& j, }! n) B, b; F$ d
<!–{if !IS_ROBOT}–>3 b6 [/ j9 U, z+ x% \
                        <!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>
4 n3 {0 v! }$ u$ `                                <div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>8 i$ k5 E  c8 s
                                        <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>% N! @9 O. N5 Z' ~; Z/ S& _5 t! ^
                                        <!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>
' T! @: T0 B8 C% a9 ~                                                <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’backgroundextstyle[2]’></i></span>* y0 c  c3 b  X. J- h. a
                                        <!–{/loop}–>  l# v8 L" {5 g! }* ]& R6 y
                                </div>- c  r/ \- f' {1 {. {
                        <!–{/if}–>. h' Y! U; f- s& e$ ]% N" p9 ^& F
! y9 X" n3 S& l) E
代码解释:此处是拓展色的切换的菜单: X, Z4 F# O- F5 {
备注:如里不需要可以删除. G4 k! {/ p' ?% @8 c: M
* p5 I2 Q& x5 i: M5 ]3 a. S) `- L7 ?
第80-96行代码:; ?) V! j9 c: R8 C% u( {' h) |
% g$ g" W* h* G8 A
<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>, W- E& @; ^" G- B$ V: K$ `
                                        <!–{if $_G[‘uid’]}–>: u& R' g, ^8 d; c) }  m3 I
                                        <ul>/ {0 b6 b; E. a- W4 ?: w* r3 ?
                                                <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>
2 X3 I( I% I3 O; i                                                        <!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>5 X% Q+ a& U& E0 S* O8 d
                                                                <li>$nav[code]</li>* ~& h. k2 H4 Q0 U1 g
                                                        <!–{/if}–>
$ b9 M% T9 w  w                                                <!–{/loop}–>5 T7 {) z: q# Q, @. p+ L  Q* g
                                        </ul>3 O6 K( E& E2 k; _6 x; h
                                        <!–{else}–>7 D7 H- L) B# `' F7 P- a9 @1 B
                                                <div class=”ptm pbw hm”>+ i9 ~* z0 h) |0 d5 A  p% a) Q
                                                        {lang my_nav_login}
; |+ L& H/ c& I8 e                                                </div>( y. R& l+ }- s$ f1 l$ W
                                        <!–{/if}–>& }( G' @* A" \
                                </div>
+ k# U9 q3 S4 ?0 F% l                <!–{/if}–>- ]1 t& q/ F2 K9 e! _; j
$ ]' q0 J* r* I# p/ v; j, P
代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
4 V( U% [  A8 v* \备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
/ o, O; ?$ M# [/ ~  H/ g( M' i2 X
+ W, j$ o( \8 ^7 W  _- O" T) M第97行代码:
1 B& [# s$ v, f  ]  P
* O# N1 b0 x2 W, S% w$ ?7 A<!–{ad/headerbanner/wp a_h}–>
# v6 ?) _: s* S$ G9 ^
5 n& r$ D  r0 G. q/ G) W) _- o/ o代码解释:头部的广告代码,
: f4 b/ i( K) t+ q7 {( D' y备注:可以在后台=》运营=站内广告添加第98-184行代码:3 j$ H# T+ e: n" n2 r  r
从<div id=”hd”>到 </div><!–{/if}–>
2 f" h3 @* U" y代码解释:头部的核心文件' }& P: [* N& N* ?8 i$ O
备注:下面是头部核心的DIV指引
$ a3 i  P  ]$ P4 c<div id=”hd”>
+ ]/ e8 x$ t6 Z* P' k" ?" ]5 b<div class=”wp”>5 C: o; j( E1 k% k9 p/ \
<div class=”hdc cl”>
8 E* y0 J3 s% W<h2>logo</h2>———————————->logo5 @# n+ t; ]$ i1 J
                 <div id=”um”>
% x* w4 `6 r1 B* }- R; B<div class=”avt y”>头像</div>—————————–头像8 t  K, Q' z+ U. ?
                       <p>* t7 h; q, N: w1 b8 i( ^3 w& t
<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1; B& j/ u5 k& T: U6 ]
                          <!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2
% `. S7 f' a  Z1 V, k! B8 P9 N个人信息—————————————->个人信息$ ?& n, \+ E8 L2 x" Q! s: W
</p>
& O6 A# z# m7 k7 `<p>
; b1 j7 j9 I( D& M<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3! q4 e: f9 T1 P% l
个人信息—————————————->个人信息
  D0 r' `5 H- e# ^- y$ E5 p, m</p>
6 @; k1 j, z( N) \</div>) e% C2 w! z: B2 {+ e) `
<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件)                         </div>
8 B* t$ Z& W/ ]# I: A5 c5 N<div id=”nv”>2 j$ `$ A5 R' \7 O4 F/ V
<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航5 `0 C* D, C% E/ B( [" K
                <ul>
5 Y  i/ |8 X- U5 E<li>栏目导航</li>———————————>栏目导航( t8 H+ C$ F: i5 y% Y
                 </ul>2 _5 C5 c! a; a* l
</div>
+ e) i# L$ V" S0 S5 H6 E<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>; w8 U: e7 o: f- g" @, {$ F
二级导航菜单样式——————————————————>二级导航菜单样式# p, i% z7 Z1 z  q- v
</ul>. E% E/ h8 x* w' Y% Z
< div id=”mu” class=”cl”>
) e/ T) v  L; W- A2 S7 C) R二级导航横排>————->二级导航横排样式$ }% v8 b8 O7 u, m* H$ \
              </div>
3 i3 M+ e, i+ h+ Y<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)& N2 W$ Z. C* _% c7 A' Z# n, A
<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件)                   </div>' Q' `2 p' p' l3 ?
</div><!–{hook/global_header}–>插件嵌入点
, {8 h- ^; H; S8 f0 b& p4 {% |& z% _5 u
总结:大家在修改的时候他的每个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 | 显示全部楼层
我是个凑数的。。。
回复

使用道具 举报

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