坏蛋网络

 找回密码
 立即注册

微信登录

只需一步,快速开始

手机动态码快速登录

手机号快速注册登录

搜索

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

[复制链接]
坏蛋网络官方 发表于 2020-1-20 03:01:00 来自手机 | 显示全部楼层 |阅读模式
很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!
3 `& s. A3 V. O( r% D' S& t2 o. |# ^! ]. Z
header.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!
  Q0 Z: t' N" |5 |
0 ~& m  E& l$ e+ t第1行代码:
1 i' D5 O6 g# k" @, g. i7 H<!–{subtemplate common/header_common}–>
7 e% j3 U/ m- ~% V2 ?3 ~& H代码解释:用于调用common文件下的header_common.html文件,
. W- g% M: M( J% r+ z" A备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。- R) H  C5 ^4 D  ^1 A

& p% e3 b% Y4 d8 |1 Z* U9 Z) F第2-29行代码:
+ L8 q* K9 B, x# b4 C从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾
" s- o: f/ g8 a" n& p代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
( `6 Q  O- f9 o, R备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写; l- K! g; W: H# s6 @
9 g7 f" Z% ^3 a
第30-186行代码:: N1 T7 x  {9 C1 ~. w& ~8 M1 w
从<body>处开始到此文件的最下方
# I% j" b# }6 M2 S8 S. i6 r6 Q0 z9 x6 d' ?代码解释:这是首部文件的核心0 d% ^( j; X3 ~* ~
备注:在修改时请注间要提前备份文件
# Q( U* x' V) i. y3 A
3 s* U. X, {9 P6 a" C: P+ {5 S第32-44行代码:9 ^$ H; Q4 C- Q
从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾' I6 A* k+ `% L, r; E1 C/ a
代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,; B# r* z3 L5 A: U9 h
备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!
% _% X( ?( Z0 T* ~- r) Z) X* V* d( w+ o( V$ m2 A4 p4 G+ [9 ~
第32-44行代码:
$ U9 U) Y+ J+ V) S, g5 D从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>
, d% M% I( b/ H- M8 R6 `: L% z( g代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
* _9 a5 h- ]" ~6 L/ T" z备注:在后台=》界面=》顶部导航。可以设置
/ @% ?1 m+ _4 v0 f, Q
, D5 N" Y" Y* `( a第70-78行代码:
) p' S( W1 b( l1 ?
" B' Z+ W3 x6 G<!–{if !IS_ROBOT}–>
- O% k, u, y. i- `5 u, L                        <!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>
5 Z- w/ y4 u& k+ Q3 G7 r                                <div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>. r4 \1 L8 ?4 {0 I  @2 ?
                                        <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>
/ C6 a- q! a% s2 a2 Q  B! a                                        <!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>
) Q* |  x' a. W1 t' g0 x: U7 O, k, Z                                                <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’backgroundextstyle[2]’></i></span>
" v; M- _/ s! L' E+ c! L) K5 h                                        <!–{/loop}–>
) S5 {1 v- r. G4 V                                </div>5 b! X$ ]: `: C  d' g
                        <!–{/if}–>; T1 ]; n7 F0 B0 x; n* f
) l6 j2 J! Z$ X7 G) G% `% X
代码解释:此处是拓展色的切换的菜单: y8 t9 z4 k9 I2 n
备注:如里不需要可以删除
6 P" E2 V( \- F, T  U5 F; [
+ [; A0 v: m6 }! [+ h1 N- f第80-96行代码:( Z, K9 B* t  ?4 {/ d

7 f. j+ E9 [% ?) g, i8 H& ~9 z% y<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>3 `0 P- I# l! S/ s5 N. E
                                        <!–{if $_G[‘uid’]}–>
) B0 x) i7 y$ Q2 q# t8 R! h                                        <ul>& \7 f8 Z' E3 R& v) n
                                                <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>6 ~7 x* e2 x/ Q# j; {
                                                        <!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>
) t) |  m8 R" _/ u0 J0 u                                                                <li>$nav[code]</li>
! c, z9 ~+ n6 }0 ?7 ^0 P9 X                                                        <!–{/if}–>! x# P9 J  {3 P- O; @/ K( G7 Q
                                                <!–{/loop}–>
' z9 w+ j: O) w0 T+ q% j4 n                                        </ul>
; a1 n( c# W5 u8 u                                        <!–{else}–>8 h4 a0 y/ g, R' s4 {1 I; m8 X8 Z9 U
                                                <div class=”ptm pbw hm”>8 |' c* `' `9 c8 U/ h$ N5 V, n
                                                        {lang my_nav_login}
6 C+ W5 T0 j9 B) U3 x2 R                                                </div>
& S$ `3 F% G$ t! \; O( u  Z  c/ K                                        <!–{/if}–>
4 ?. y9 C5 c" V) c8 ]                                </div>
/ d% A8 A: M  h% d/ R" v/ a8 V. B, {                <!–{/if}–>
7 g1 f  E/ x% p  F  z) ]1 Z( \, O
代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
' O, J  a1 w* @& ]备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
* p/ ^8 V3 k( }4 ^* M  h# ?2 V/ S
9 U. c6 j+ Q! q9 b, J第97行代码:
- a3 N& a5 z7 W  C% f" P4 U
# ], J3 j8 e! `& `# h$ ?<!–{ad/headerbanner/wp a_h}–>  n- s) o' S6 B

3 V! {& Y( U3 ]$ |/ e2 u- D代码解释:头部的广告代码,
" C) u8 t& h8 x" _备注:可以在后台=》运营=站内广告添加第98-184行代码:
$ |1 u* T& Y6 M: f( k5 }2 E从<div id=”hd”>到 </div><!–{/if}–>: F  n/ q8 r" a- l( F3 c! y: K+ a
代码解释:头部的核心文件
6 N( W* |/ B1 ?& s$ Y% P0 ]备注:下面是头部核心的DIV指引) u/ ]. u$ ]' Q5 D6 q2 _' ~
<div id=”hd”>
7 u( e1 m8 [+ K1 ^<div class=”wp”>
2 K( g* Y9 Y2 {1 y<div class=”hdc cl”>6 }) G5 k4 u! |3 K: e8 j
<h2>logo</h2>———————————->logo8 Q: C0 [3 g1 A" t
                 <div id=”um”>
* C, G7 \9 a8 C0 E$ E3 k<div class=”avt y”>头像</div>—————————–头像8 Y- C; k: n4 }. u9 I8 z+ ]
                       <p>( v+ J  O' z; O/ _8 h* W
<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1
; L+ v7 z7 p: l) a; \8 V7 I                          <!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2  I5 E0 |/ U( V, C0 X( a6 S" G
个人信息—————————————->个人信息% _/ w* d- ^: p8 m# j
</p>
: X4 c  }9 q" ^) `7 ~0 r6 E<p>
+ Q; V; X- M$ g6 E<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3) i2 f7 \0 W! p, |' e
个人信息—————————————->个人信息
& d; ~& t% h. v  V  ~6 u1 \% y8 o1 G</p>$ n. [# N$ G9 G2 P$ K" v+ S
</div>( u0 A# `# w9 \$ @( d) H# z
<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件)                         </div>
- n! X( y; N$ w0 r$ R& q- J6 h- Z7 b% ?<div id=”nv”>
- t8 H+ O: j  \<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航
. X- Q) N7 k) T# \                <ul>
) E. [( t! O1 B$ n! C<li>栏目导航</li>———————————>栏目导航
% A5 |2 g: k6 ~' f+ h2 W                 </ul>
( K0 l* D0 z/ X0 u) Z</div>/ `; \0 v8 J( X5 ?0 d
<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>+ @( [$ Y6 y+ B& Y- a7 v
二级导航菜单样式——————————————————>二级导航菜单样式
# p. L5 x% g! F8 T</ul>
9 i8 E( a( c1 K  P, ]4 ?/ R, |< div id=”mu” class=”cl”>
" y' X  ^1 `1 A8 `! N  @2 z4 ]二级导航横排>————->二级导航横排样式
3 i5 c8 Z9 k) ?: b              </div>% K& B7 x) J% v; d: u; p. N" a1 B
<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)
& c% T0 L9 F8 _3 H  ?( O0 X8 N<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件)                   </div>
' Z6 m5 l- }& m6 y( R2 N. Y</div><!–{hook/global_header}–>插件嵌入点9 o2 O5 K, J" B4 F% X! A

6 m0 [! W5 |8 ?总结:大家在修改的时候他的每个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 | 显示全部楼层
我是个凑数的。。。
回复

使用道具 举报

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