坏蛋网络

 找回密码
 立即注册

微信登录

只需一步,快速开始

手机动态码快速登录

手机号快速注册登录

搜索

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

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

9 q6 N$ n# a% T1 ^6 f第1行代码:5 i% [9 |: c' W. c/ X$ O# U
<!–{subtemplate common/header_common}–>
) d' |& X# e( N代码解释:用于调用common文件下的header_common.html文件,
! R1 x- ~2 k4 j2 a备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。4 l' N  L# m# H0 v

  p1 `( R; O3 V9 o; k# T第2-29行代码:8 @6 y0 d  D9 u! L7 ^8 [5 @, Q" J
从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾$ j" o* m7 L- y4 P9 t/ N
代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
: ~  P5 s& @% a0 ^7 M3 m* {备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写
  o7 q+ T) Y" J0 d' ~2 d# w$ ?3 {7 r5 X% R( W) `
第30-186行代码:1 C3 W, |% J# i* L# z
从<body>处开始到此文件的最下方+ r1 C- p2 C. z: E  _& ]1 f7 s; t
代码解释:这是首部文件的核心* A* l9 ~" d5 B
备注:在修改时请注间要提前备份文件; l, l. k: ^( m( {) ?6 A% }8 b

2 x3 l4 p, l$ x3 V4 ~* b, u4 ?第32-44行代码:* |1 G9 D$ X" Y: }$ M5 @6 U% G/ u2 X
从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾
% S! e  B# ~9 P5 v! G) g! W! g4 n, s代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
0 Q0 C( k1 W% {2 F. T8 Q& }备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!
& _7 b4 M. H: B9 V5 J( A* r3 p+ W( b8 {% I- s% w. X4 a* F
第32-44行代码:3 o+ f! L, q6 w* U- x
从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>
4 ~7 ~0 Z+ Z/ g9 E; t7 M! a3 }代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
  R- D" z- ~$ Z备注:在后台=》界面=》顶部导航。可以设置/ p  A( E- P5 V0 W
; R9 {/ u2 g! ~! A  @( ^/ t/ N$ O
第70-78行代码:# D* p' q- f6 b6 R, W

/ F+ M5 B5 S" B5 `" S6 ?2 j7 ~<!–{if !IS_ROBOT}–>4 ?5 h# F1 }; B1 E/ L/ z
                        <!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>0 b! Q  V# f7 y
                                <div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>
8 d) v0 ~/ ~. d; i2 p  B                                        <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>$ ~0 ^1 H5 ^2 ^! P
                                        <!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>
" W% k2 p/ T) R2 ^6 ~% r                                                <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’backgroundextstyle[2]’></i></span>
8 A/ d: B; H# \  j) R+ S9 r4 D                                        <!–{/loop}–>% C0 m! M$ p0 G1 ~
                                </div>& d& H6 K- ^2 F9 x- D
                        <!–{/if}–>% u3 n7 G( F9 V9 [# x' x! T

/ |0 d1 n: ]0 M代码解释:此处是拓展色的切换的菜单
5 O9 A& P8 W- i, l: ]- r备注:如里不需要可以删除
- }& V2 R; V, Y% n" T2 ^% F& |0 r/ S; K  B
第80-96行代码:) I" I: g  L) P& J) u) b) ]; |

0 [/ u0 B/ q! y% q( A. @<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>
! b. s) w9 ~% G# v1 j$ D2 w                                        <!–{if $_G[‘uid’]}–>
& ?; d# |1 a% g" h2 R  E1 v                                        <ul>
( P& g6 l' e4 L7 j                                                <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>& _- S. @" A6 p8 C/ I
                                                        <!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>& h9 T# j$ ^8 l2 I. u9 j9 k
                                                                <li>$nav[code]</li>" G# ]8 n' a; R, B1 ~, o
                                                        <!–{/if}–>
. i& p+ R6 p/ f8 G  O$ S                                                <!–{/loop}–>
# ?0 j1 E8 G5 _+ D. R! T5 W  x                                        </ul>( s* C+ K( P" K0 V1 t3 O
                                        <!–{else}–>  X2 h; H4 k" d7 j
                                                <div class=”ptm pbw hm”>9 x4 o  c( p8 t' H2 v6 A
                                                        {lang my_nav_login}
' R* r. q! x# W, H0 J                                                </div>4 ]: @$ Y% v% L
                                        <!–{/if}–>8 I4 @3 m( C9 G* L& U
                                </div>
0 m$ D# y1 R) Q; u, ?" {; r0 M2 G                <!–{/if}–>
7 W, _5 J$ b7 C5 J. b9 @
8 A0 x( X" _) F& [" w代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
2 _* b1 l4 X* v& E  M) U备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!( F6 ?  X; ]) D
' y: a, r0 }/ }
第97行代码:2 J; ~8 ]" t9 A5 i# `# I
+ d& s7 S2 M, L
<!–{ad/headerbanner/wp a_h}–>
! @+ p- I$ b$ F1 p& F$ i$ x# y
代码解释:头部的广告代码,4 G% `2 N, V  n4 ]1 R: ?- v9 p
备注:可以在后台=》运营=站内广告添加第98-184行代码:
5 m1 T' S& @" a0 g3 Y从<div id=”hd”>到 </div><!–{/if}–>. d7 \2 }2 B% ^) ^2 v
代码解释:头部的核心文件
% G5 f9 M/ I% W备注:下面是头部核心的DIV指引
: ~8 f7 Y; E2 Z" u* _. L# C0 ~<div id=”hd”>- `6 Q5 c/ {  s/ Q: D1 K8 H
<div class=”wp”>
' q: |3 Q4 p, P3 m<div class=”hdc cl”>
% I3 H* X7 m3 [; U7 A<h2>logo</h2>———————————->logo
' p" d. A  v3 C3 C                 <div id=”um”>4 n) s* V* @) b* P' z
<div class=”avt y”>头像</div>—————————–头像$ V% ]* F6 p: K0 H# ~0 R
                       <p>
5 t+ Q! y8 B: E9 T0 Y  b6 y3 U<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点15 q: Y% t8 p9 s# c6 J. g3 q! p
                          <!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2
  d: `5 `; V, `' ~+ P0 Y* c, r7 h个人信息—————————————->个人信息
: `7 E: G7 @% J! O( m2 O. U8 P</p>$ e- ?  L8 C* E
<p>! s- j1 H0 C5 |. f
<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3
/ ]1 Y$ d: P- I+ C  M2 h7 Z个人信息—————————————->个人信息! g) v2 Z# v3 p3 ^& d
</p>
( j* g$ l" S" k+ n) |</div>
: I7 Y( |5 j* G+ q<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件)                         </div>
; \, h( R- F! r4 x<div id=”nv”>
3 u  o$ Y2 R' E. W% A<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航
" ?. p1 S/ S5 E; h                <ul>) K; y, _* [* \% g: p4 n$ t) C
<li>栏目导航</li>———————————>栏目导航( p* M) _4 {0 _! f& `
                 </ul>  c; X' @: [- T6 @% b5 G1 c, L
</div>0 n) h$ v6 i5 x$ q: j
<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>/ u7 |! r: K0 \" t2 k) Q: U7 [/ f
二级导航菜单样式——————————————————>二级导航菜单样式
( G5 G# b7 G5 e2 @0 H</ul>- z3 |& Y' H5 C( H( m
< div id=”mu” class=”cl”>
4 V4 ?  E' \% j* K, ^二级导航横排>————->二级导航横排样式' L: s5 f" w7 p+ }
              </div>
; W9 k) q* [  F8 d9 h' l9 N' ^<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)( D. t2 Y& M) U- R6 f: G: ?' M
<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件)                   </div>
. W, ^7 W- l' E3 a  P/ `& T9 D</div><!–{hook/global_header}–>插件嵌入点+ A: d2 ]# O- Y( I& [
4 n% \$ u/ S2 m9 D" Z% @& z
总结:大家在修改的时候他的每个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 | 显示全部楼层
我是个凑数的。。。
回复

使用道具 举报

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