坏蛋网络

 找回密码
 立即注册

微信登录

只需一步,快速开始

手机动态码快速登录

手机号快速注册登录

搜索

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

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

2 y/ ^2 C5 F2 Z! t7 A第1行代码:9 l- B) Q4 y) @/ Y& u9 c
<!–{subtemplate common/header_common}–>
' a/ t  P' [1 S& B9 _代码解释:用于调用common文件下的header_common.html文件,: G6 b0 N$ o# C
备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。
  K( Z1 h" _/ p$ g# H9 Q1 p+ {5 i. ~* R. F3 z9 C
第2-29行代码:
$ B5 Y5 s& b- _, K/ ^$ i# ^从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾$ `8 R% i& t0 L$ K4 a
代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
2 |- ?4 ]* v+ X$ @备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写
$ F7 `# `" _3 K  o  U0 J4 W
, N& C8 a" H# o% z8 x3 m6 u第30-186行代码:
1 }& h2 A4 x" Z: ?6 Q从<body>处开始到此文件的最下方
# A2 v5 v9 B) R0 ^0 R( S+ I  q代码解释:这是首部文件的核心
3 t4 V. g/ Q. W7 |& Y0 q4 g+ D备注:在修改时请注间要提前备份文件
9 B* U( ]( |5 h' Q  c% p+ _( U2 s) t. C4 O
第32-44行代码:0 E9 `% f- |( y6 }+ H& i# d; ]
从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾$ {+ \4 t& T9 ~: ^
代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
4 U1 I. z% P+ N- }6 Z. ]备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!
/ r3 z, X4 b3 q2 g0 U, [7 U. z) F# k4 ?7 U- J- d
第32-44行代码:9 k1 \4 N7 l! g) Y, r
从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>
  `6 ^: ?1 b7 O3 ~: C$ P代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
0 h' [$ r) E7 @; ~备注:在后台=》界面=》顶部导航。可以设置
# N# |& R- p! H4 y4 K
& ]  x  C" X3 U7 s6 Q第70-78行代码:: n' m% b' o6 ^- ?# v8 f
; w9 R+ }+ H- s+ j% ~* R
<!–{if !IS_ROBOT}–>2 W: M. ]$ N8 [5 G& d
                        <!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>6 Q0 h! g4 `) K) M$ ?! r) }
                                <div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>9 O, {1 ]* `2 B
                                        <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>
% i9 e$ h4 p8 r0 P9 l                                        <!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>& U! k+ y' B" o; e7 b# e8 ]& |1 C
                                                <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’backgroundextstyle[2]’></i></span>
6 p2 i& t( O1 Z) q% X9 g                                        <!–{/loop}–>
4 [0 U# x( e: J/ l# N                                </div>
& }' l' `% ?2 ^; F, B                        <!–{/if}–>' M6 K4 j$ e- y8 x) a

- @! [! y. N7 c- h& [代码解释:此处是拓展色的切换的菜单
9 c" g* W$ {9 _( W3 y5 v8 B; L备注:如里不需要可以删除
- b2 j0 _' A$ r8 S8 F! a! |+ @% ^5 X/ X, Q1 ]; V) r. m! O5 |
第80-96行代码:7 j  n; ]; d2 S6 s0 R3 K/ l

3 Q4 b' d1 j, |+ y4 k& {5 s<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>* Q1 ?' C9 F5 c, l: K6 [+ |( g6 @
                                        <!–{if $_G[‘uid’]}–>
: F9 t3 K! X  \5 M% _' d                                        <ul>1 J. K0 L8 d) G+ N) \
                                                <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>0 A  [1 Q9 j& i
                                                        <!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>; ]  L+ B( G; J) q: K! W/ X7 |8 z1 y
                                                                <li>$nav[code]</li>
9 H5 F+ h, J* \) C                                                        <!–{/if}–>
- q9 V- z& Q* D2 e& L9 n                                                <!–{/loop}–>; ]+ v+ I, g" S* H/ g' g
                                        </ul>
' W2 j7 e1 ]- L! w                                        <!–{else}–>
* h. f# L8 R1 x  n) _                                                <div class=”ptm pbw hm”>4 |& S2 |  S, _2 R$ @6 D* z/ _
                                                        {lang my_nav_login}1 C! Z6 X+ ?. x. l% c( k. `3 L- |
                                                </div>2 z# r' l& a$ x$ F' f  Y, l
                                        <!–{/if}–>8 j* Z$ S. _  c+ |
                                </div>6 p3 W$ o7 I- Y) S, v+ J! ?
                <!–{/if}–>, ^# P8 a- Y5 p& q
2 b' D9 n" S$ P3 \
代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
4 D) v% y5 I. i- H/ r  W/ [备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!, j2 W3 a4 P2 ]9 a0 u3 m

4 @$ c( T1 e1 L  v, C第97行代码:) W, `; z7 Z2 h" U' U1 j* j" r
2 m: K" [3 g/ f/ ^
<!–{ad/headerbanner/wp a_h}–>4 S0 c2 R9 A' ~& \- O

- K/ |- V  ]; M! B2 d代码解释:头部的广告代码,
: O8 X6 s5 g1 h) Z  W( \* T& j! r备注:可以在后台=》运营=站内广告添加第98-184行代码:
) g, j6 b' L% T: U0 e2 V6 _4 Q从<div id=”hd”>到 </div><!–{/if}–>9 x2 I3 u: j, _# D& h  g
代码解释:头部的核心文件
* k& _+ {6 A' k  z' g: O$ u备注:下面是头部核心的DIV指引
' e0 w& H6 A9 I* ^0 C* E/ s1 y<div id=”hd”>
8 s6 a8 D" i1 y$ z: J6 W6 s. |3 J<div class=”wp”>
: O) o8 F) i. `. l( J<div class=”hdc cl”>( ]) C, A8 E- i( Q; `
<h2>logo</h2>———————————->logo
4 W9 G: ]7 T- J6 \0 a9 b                 <div id=”um”>" P1 Y" s- B( V( t
<div class=”avt y”>头像</div>—————————–头像- d" }9 O0 M+ e( u) t
                       <p>
; `1 a. W$ l. i# j3 @<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1
$ g: [) \4 b" F3 t8 q                          <!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2* C- g/ i/ V# c2 }
个人信息—————————————->个人信息
) L4 Y$ |% O9 @$ O! c$ M! l6 Y0 k</p>( S+ y" C, G  ?, N, h9 i
<p>& U! C* j8 B% P
<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点31 F4 N1 x" z3 S% Y% i
个人信息—————————————->个人信息
# i' @! z% [; ^0 C, v</p>
8 ^; Y+ J. U& K( y2 Q, D' ^& y</div>
0 K8 D. q3 G& B* T7 W5 g3 b<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件)                         </div>2 f) H( [$ ^* k* Q3 a: f
<div id=”nv”>) ~0 i7 c2 E6 J% |( Z! h4 x+ @
<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航
6 b$ z+ ^# v8 G! f' i, x                <ul>
0 R7 D4 P, F0 p5 ?<li>栏目导航</li>———————————>栏目导航" @& A( ~5 Y3 _) F
                 </ul>9 A" A6 J; U. m3 A1 X
</div>
# ~) w9 C0 V1 r( L+ ?<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>
& O4 V  r6 {2 U+ `二级导航菜单样式——————————————————>二级导航菜单样式
( n. V5 g( b/ {</ul>! Y  P% _6 `* {8 R  Q8 }( N  J
< div id=”mu” class=”cl”>
' C7 |" g/ c2 a二级导航横排>————->二级导航横排样式. B, I7 q! V/ n5 G
              </div>* L1 d% g1 l. ]. N' k
<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)% n. P6 n+ ?# Y" _
<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件)                   </div>. b# a+ _2 @+ ~! x
</div><!–{hook/global_header}–>插件嵌入点7 S! w8 C# K( r) ?
! v1 _( ]# S3 @
总结:大家在修改的时候他的每个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 | 显示全部楼层
我是个凑数的。。。
回复

使用道具 举报

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