坏蛋网络

 找回密码
 立即注册

微信登录

只需一步,快速开始

手机动态码快速登录

手机号快速注册登录

搜索

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

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

; x9 x7 n9 F% _- Y5 Vheader.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!
: C5 r7 e$ \' \* D& G  B5 X# u3 q* A( g. G5 D" K
第1行代码:! ]% q* Y" X' @% v) I
<!–{subtemplate common/header_common}–>
" v; J# t# `0 r9 f* O代码解释:用于调用common文件下的header_common.html文件,
4 A# W) s& V+ m4 l备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。
# \& b; |3 g+ k0 [( D$ V5 H4 y2 A" n( N$ e1 w' {* B
第2-29行代码:
: _+ x; M: W! j6 K  i2 A从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾  n% H# c( R2 N3 C  X8 a5 x2 \( ]6 |
代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!) _% B% U9 e( K" z2 h4 {2 Z
备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写
2 \- z* \* S, p4 l  P  @3 C0 Y; F0 e" Q: t( C' @
第30-186行代码:' W/ f3 e3 t" o1 ~
从<body>处开始到此文件的最下方& ~! g1 z* l, f0 U  E
代码解释:这是首部文件的核心5 }4 |# F  F: N; i- \9 [
备注:在修改时请注间要提前备份文件. ~9 k4 h4 @2 b% \; e/ h
% p: |6 F' M5 t  M/ G" n0 S# U
第32-44行代码:
" I* h; j  G6 t+ ]. q) _从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾
: q0 u2 M! \5 p, o- ]代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
+ c3 j& n3 e3 r" R" k6 K5 K/ V备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!& L  u; R. B' _6 i

2 q; v. |( h6 p! m  T8 R$ j! Y: B第32-44行代码:
* [3 n) }: M/ i' ?0 q0 ?从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>+ H) _  Q9 q& U9 {) O
代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>; ^. Z. k# p5 y3 @/ u0 u# w
备注:在后台=》界面=》顶部导航。可以设置
* d; I3 V: v  y) I9 d2 S" h+ o1 l" o6 I
第70-78行代码:' S  B$ }! N$ r& ]4 f2 f
' _+ B: F/ j# Q2 g$ ]% ]
<!–{if !IS_ROBOT}–>' j* K7 v1 k2 y5 w3 C) ]3 `
                        <!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>+ H& J" j) @3 r9 f# U; w
                                <div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>
, m( H2 H% ~0 _                                        <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>+ J$ l( `, F" V
                                        <!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>$ c- `# U6 W7 {' G% f
                                                <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’backgroundextstyle[2]’></i></span>
$ E9 K' z3 Q1 R5 a                                        <!–{/loop}–>- a$ E( V% m: C8 S* m( Q! @
                                </div>3 d9 d# D6 _8 Z+ h, B0 n2 D
                        <!–{/if}–>* o* N. J3 v/ b
/ R  D, L9 E* N+ D
代码解释:此处是拓展色的切换的菜单
' A5 F" j, V  w1 J  c+ p! B备注:如里不需要可以删除) |" ?* O3 n5 E  i
, X: D8 q0 C% m0 a4 s; q( D% ]3 b3 J
第80-96行代码:% x+ s8 H' J% O3 E2 A  `
% M6 P/ m. c3 V( f9 h, O
<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>
( A+ l6 ~# J! M" a! i/ L                                        <!–{if $_G[‘uid’]}–>
2 j5 }& x7 V( R                                        <ul>
" v2 H% p- G" P; ]! ~' m; `                                                <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>  ^1 `; Q: m4 Q3 Q
                                                        <!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>
/ N% ?" ~( o4 T  F5 e                                                                <li>$nav[code]</li>
, W7 v: r# N5 f                                                        <!–{/if}–>
* W9 N7 B9 `2 l9 f+ t# A                                                <!–{/loop}–>1 o$ ?: E  ~; k# {: R" o
                                        </ul>3 N  M7 E0 o) ]( A: e# X0 |! c! t1 I
                                        <!–{else}–>$ m$ |2 p3 E+ t; ^+ K# F
                                                <div class=”ptm pbw hm”>1 B( M: U+ f9 S7 ?7 G  A; L/ o
                                                        {lang my_nav_login}
9 l: X8 p7 M+ J8 i7 w" [( G                                                </div>
& C- l7 P* S) J1 Y! u& [+ ?                                        <!–{/if}–># t3 N3 T6 F+ Q* u8 `+ C# l
                                </div>& A$ O% ]6 n) p
                <!–{/if}–>5 @! ~! A+ e& M

& T3 N" Y5 y: M% @! t& ^5 ]: U代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈; E' R! b9 J$ L+ m$ O
备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!' ^  I, E, V, \- U" k

% ]" I2 U8 P) a! _, u  b& O5 G第97行代码:
$ @0 r7 R, R* e# M' O) Z- s) z5 a& A2 a
<!–{ad/headerbanner/wp a_h}–>
) d4 ~+ N/ p& _7 o0 b7 I" i: B# L4 Q# X5 W
代码解释:头部的广告代码,
! |/ k0 ^7 ^1 ~# k备注:可以在后台=》运营=站内广告添加第98-184行代码:# m/ B5 h  f2 k0 ~! A: ~. \: c
从<div id=”hd”>到 </div><!–{/if}–>0 a# ~7 S% `: N% d3 X* Q6 V& I
代码解释:头部的核心文件
6 C6 a1 }! j: W备注:下面是头部核心的DIV指引
& H1 k# \0 j# P: k. y1 |8 _<div id=”hd”>/ K) p1 z% X! {6 O
<div class=”wp”># K1 b- I4 V3 Q
<div class=”hdc cl”>
' z1 O: X( k! c<h2>logo</h2>———————————->logo
$ I: }( _4 N6 f, x9 p; }                 <div id=”um”>
; W# P4 E  J! C( |5 [2 Z<div class=”avt y”>头像</div>—————————–头像
! m# m. D2 L2 L6 T                       <p>' b  h+ ?# W# d. ?0 ]) Y
<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1; {, I! a: l; X" B
                          <!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2
( Q5 {, A$ G* U3 U个人信息—————————————->个人信息1 u) I% ^( d) G9 p4 U- _7 G
</p>
* _" ^" g( A- T<p>$ V6 p$ Z4 u5 x7 Y+ e! y# J( A, K' B
<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3
: D/ o2 ~  s4 Y- u' G个人信息—————————————->个人信息
+ M# C. D- b! F1 p9 h# s</p>6 u6 Y5 n' z/ l( n5 `
</div>
% e* z, h' X: J; ~+ b8 l9 K- H<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件)                         </div>
9 f/ p2 \8 C. P9 Q<div id=”nv”>
" t1 Q% Y7 ]* p<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航3 Y: O# L! Z/ e9 W- j% [" q
                <ul>% G  U& N( K7 ~
<li>栏目导航</li>———————————>栏目导航
" ~) ?% d8 H: O                 </ul>
4 y0 z7 F& x+ }- m: p1 j</div>; |) A' `. C. S
<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>
: W% J: Y. R/ x; x& v二级导航菜单样式——————————————————>二级导航菜单样式/ d3 Y$ m3 h+ `0 |
</ul>. w6 Y+ y7 @( ?# b8 B$ \
< div id=”mu” class=”cl”>! Z# T& u2 U% b+ k9 |. t2 Y
二级导航横排>————->二级导航横排样式/ \1 M" ?0 {5 V9 Z  M. d8 D. B
              </div>
4 S0 |2 G7 y5 K1 f9 X7 b3 S<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)6 _; a$ q4 G; F$ A
<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件)                   </div># Z: u% F$ L$ p* }3 W. ~
</div><!–{hook/global_header}–>插件嵌入点/ `% C& z8 j# d& C! |. G) P
4 U& J4 |/ t' [, l- [) _
总结:大家在修改的时候他的每个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 | 显示全部楼层
我是个凑数的。。。
回复

使用道具 举报

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