坏蛋网络

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
开启左侧

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

[复制链接]
坏蛋网络男神 实名认证 官方 发表于 2020-1-20 03:01:00 来自手机 | 显示全部楼层 |阅读模式
很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!
# Q+ y; ~( ^: _6 q: m; B0 Y7 E' g; Y- A0 O" A1 @9 B3 @
header.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!3 ]5 t% K- ?# G  q

6 a* k# n$ l+ Z, Q% P第1行代码:
6 G3 F9 |; e8 X" D) x+ ]<!–{subtemplate common/header_common}–>
1 q7 ~8 w) f3 G5 F代码解释:用于调用common文件下的header_common.html文件,8 d# F  ?4 Q/ Z/ A* q2 ~+ Q
备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。( A6 H* q; L8 W, e3 \) o
: p2 `: r5 k5 J" U1 C) S6 k
第2-29行代码:2 H2 f6 k. O( K$ e5 K' E" {
从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾
0 @+ ]9 O* l3 N代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!, U2 F9 Z! _) J  g7 P0 a- _! t
备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写
6 Z1 W" Y6 n0 w4 g0 h& x+ G) {' ~" w9 O( L& y9 s
第30-186行代码:9 R. o7 K, P2 W* i
从<body>处开始到此文件的最下方5 f1 U( w: M8 `7 l4 r# z# }
代码解释:这是首部文件的核心
7 s9 i: S% y8 p备注:在修改时请注间要提前备份文件4 r" W) `! I, B2 S6 K% W1 A

) h0 U  Y" E' n6 m第32-44行代码:
* L5 C1 |# m& ~; b  W9 K从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾) N/ F$ m. `8 X8 {: _; m' @
代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
+ g0 u! J' a  o. g. [备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!
. @" N; g0 J, e  w! x# B& b
( ?/ V- V4 V/ }% }; O第32-44行代码:" \! ?6 \% o' L1 {6 X) K" R) H
从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>/ l+ A0 @4 {1 s
代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
" Q1 B, k& Q, }/ Q2 o8 o备注:在后台=》界面=》顶部导航。可以设置1 ~  S, V* |( y, L% \5 W

) l' s, b4 A. g; G第70-78行代码:
4 b3 C' a) [0 N0 g% s" _. m* ?: r+ {
4 U) Z% L( x; G9 B% o; X0 _<!–{if !IS_ROBOT}–>4 O+ f, W3 _. O
                        <!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>4 s8 @) J$ G8 U( d. X7 A2 I
                                <div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>
' }4 H3 E  e* T: f) K                                        <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>
4 u7 o' E, a% ^* O                                        <!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>
3 ~5 [6 }! z2 @7 g0 S& w8 e+ |* f                                                <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’backgroundextstyle[2]’></i></span>; v- S* D" ]7 Y/ w( c. s
                                        <!–{/loop}–>( p2 N1 p4 P9 a2 M1 `
                                </div>9 |  V9 k) U! D3 A
                        <!–{/if}–>
; k: x8 p* x1 u7 J
; v1 W1 f* I8 K* Z# v' S, ]5 O代码解释:此处是拓展色的切换的菜单
, n% O( k1 ~1 e4 [# }3 ~2 a9 Q8 d备注:如里不需要可以删除
  F2 @8 Q4 K8 f' d; Y7 c
) t# x& J4 B9 ?. P9 L4 x0 G第80-96行代码:1 ]4 I8 \: s1 o* c0 z
6 _& I2 y. a1 g( |/ a  A4 R# F
<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>  B; ]" Y# E' w7 v3 b
                                        <!–{if $_G[‘uid’]}–>
% g4 n0 y3 B9 b  j* X$ @9 f) z                                        <ul>% J# }" V8 n: v6 `+ B4 _
                                                <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>. \; ~! ?! J7 I1 n
                                                        <!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>
, _9 j7 t  I" R% T                                                                <li>$nav[code]</li>
  s- u! K3 R" b1 e3 E! C8 K% l( w                                                        <!–{/if}–>; [- c5 q: U0 X/ ~* Y& D
                                                <!–{/loop}–>; O7 y- ^9 y7 y3 J' U  Z
                                        </ul>
; p8 j6 E6 y) p  [0 u/ [                                        <!–{else}–>) R; U# F" A8 f) e: q& V
                                                <div class=”ptm pbw hm”>0 p/ n, s; |6 c- B5 O) c/ B7 N
                                                        {lang my_nav_login}# i* a7 T) O# q9 M
                                                </div>  r6 [# @+ R# D8 A# V# \) U
                                        <!–{/if}–>+ m  w0 f" f$ O) I
                                </div>2 M" H  Q, {; D: k$ z* l
                <!–{/if}–>( ?! o# r  ?# R' V
5 J! O& ]  J; M7 }2 C
代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
; z* C# n* e. P* U备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
6 v: H1 k0 d' P: r+ ?- x' y/ k# F; z( J6 K
第97行代码:
! D* g# g- H7 W2 @1 [  A
# ^4 i- e3 M3 j. U2 F, c: Y# A/ o<!–{ad/headerbanner/wp a_h}–>
# g1 ^( A& d, p% U- W+ w/ B
0 O! u% c. Q& s/ [! B1 H* \代码解释:头部的广告代码,
  i6 E- V  v# n% H: y, j备注:可以在后台=》运营=站内广告添加第98-184行代码:
6 c. N- \+ f2 z5 p: N/ z3 A7 U从<div id=”hd”>到 </div><!–{/if}–>2 Z( o% m6 p+ w* n/ K6 |8 \
代码解释:头部的核心文件- }# i/ V1 E( S2 M: x# ~) f1 w9 N6 W
备注:下面是头部核心的DIV指引
6 h+ B8 a# I0 i. O0 _( k, @7 _<div id=”hd”>7 s7 J' N$ J) M7 J% t$ l* F" f
<div class=”wp”>
% y* ?$ t  a% y. E<div class=”hdc cl”>$ M. }' {4 [9 |' J! C. M9 S
<h2>logo</h2>———————————->logo  h7 ^! m7 d  F
                 <div id=”um”>
) u  p2 s7 O6 r, Q( V1 l+ `<div class=”avt y”>头像</div>—————————–头像
1 O+ k1 G& S( H3 L" i. b: d                       <p>( h1 g8 b2 w: d! n1 |
<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1
! Z$ g) U) @, n. V; y" h                          <!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2! U0 M1 X9 u# s/ i( C0 B
个人信息—————————————->个人信息! I1 w9 D: \( z2 j
</p># p7 h: ^( C" E4 o" \. N/ N! [
<p>
) S  `6 I" n$ p<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3  q% `9 i3 o" j" G
个人信息—————————————->个人信息. m: e  m9 D) X$ D) u+ c; K
</p>: U5 G; ^! `8 r/ b* x) a
</div>' d; f  U" a: ?/ |8 X5 a6 v
<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件)                         </div>
6 [+ s; e# @' A  Q<div id=”nv”>
1 j4 O# _6 l6 D5 ~/ c<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航
+ M; ^5 U/ \% T                <ul>
- L3 B& K" o& E2 k<li>栏目导航</li>———————————>栏目导航6 u( h* ~6 Y3 H/ P
                 </ul>& b# P+ a+ F# @; g* m
</div>
8 z; ~; d3 ?6 a<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>- J' ?7 o. f  ?2 W, G! u+ R/ O- h! s
二级导航菜单样式——————————————————>二级导航菜单样式
, y! ]; i7 _; c6 [/ ?- ]3 H. @</ul># E& Q$ z8 B. \4 z
< div id=”mu” class=”cl”>
% f2 z( b# b- \. j7 S! r% a9 G二级导航横排>————->二级导航横排样式
6 Z9 z2 o$ [7 m! \              </div>' c3 l/ }4 N% A  z1 V
<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)" z4 {' B4 T! Y; g- ]( }
<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件)                   </div>  n" T( }0 p) `
</div><!–{hook/global_header}–>插件嵌入点/ E+ q9 D7 ?0 e5 Z% L+ n5 V& f: c

% `. z8 ]/ _; W! n/ k总结:大家在修改的时候他的每个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 | 显示全部楼层
我是个凑数的。。。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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