罗码网络discuz插件模板教程微信小程序安卓电脑软件htmlphp源码下载

罗码gitluo

 找回密码
 立即注册

QQ登录

只需一步,快速开始

微信登录

微信扫一扫,快速登录

手机动态码快速登录

手机号快速注册登录

搜索
开启左侧

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

[复制链接]
罗码男神 实名认证 官方 发表于 2020-1-20 03:01:00 来自手机 | 显示全部楼层 |阅读模式
很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!4 m* [. c# n2 R# A; _
  M9 d, Y8 T: ^8 X" Y* H5 |2 m/ V
header.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!
- m# b! {5 V: @6 n
1 n6 \1 U- w4 X. Q第1行代码:9 |4 p, E! q' F  H  T8 V
<!–{subtemplate common/header_common}–>) ?" Y9 W2 l1 [7 n
代码解释:用于调用common文件下的header_common.html文件,
; ^. t% H% g1 \. \0 [* g备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。
; l  u3 k9 Q( V! ^9 z7 I
  P* e0 V6 s3 s; R第2-29行代码:! K' M; e/ e+ k$ w/ ]9 x" H$ K: Z. A
从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾
# o" ?3 _& \  y代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!% v7 v" P. C# W
备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写# f6 |3 c: T1 q7 |
9 ?3 J4 L/ s$ x! m7 q" J$ s
第30-186行代码:8 t2 `: q2 p2 C5 r
从<body>处开始到此文件的最下方8 Q0 C; Y, w& d7 a
代码解释:这是首部文件的核心2 L% v5 I# Q9 B0 W( \5 k( d
备注:在修改时请注间要提前备份文件' p' ~0 W( \  }
- M, p+ t( z5 S
第32-44行代码:/ o8 h6 k8 I) F9 ~9 d* {, ^# t3 y
从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾
' ^/ ?- w+ e+ `# K5 {. _' x代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,
" @, w. g, u" x) R+ y& @/ |# K% m备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!
% W0 a- _+ E: R+ N1 e9 I8 H! [; R6 J8 N# u& q/ I
第32-44行代码:% Q  H$ A& F0 Y4 h3 _  V+ W
从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>
# O9 Q5 q4 Z* \; Y" f) z代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
4 U/ L0 c* l% L备注:在后台=》界面=》顶部导航。可以设置
( m" L1 Y  T  a! f1 G# J  d7 Z
# Q3 }$ \9 H; Z2 \9 {8 C1 d% ^第70-78行代码:
% N7 D: k# Z3 Q7 a2 T8 K/ E( a
' ]6 u4 h  U3 `+ r( `6 F' }4 X<!–{if !IS_ROBOT}–>
# Z+ n% L# K: K                        <!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>  C- R: G; Z% |" d+ j0 Y* F
                                <div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>$ l  \& [$ n$ w. j  ^3 ?
                                        <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>$ {, E: R7 v: D4 B( ]: N
                                        <!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>; g, Z, U3 G7 l
                                                <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’backgroundextstyle[2]’></i></span>
, P- [9 J" |/ h# l) B                                        <!–{/loop}–>
$ e' y  g: s$ @5 [! C; T8 ^9 C7 p$ K                                </div>0 u. q! q1 h: ]8 ]
                        <!–{/if}–>
$ l) P$ L9 p4 p! K- F
3 Y9 g* B, m( A9 P代码解释:此处是拓展色的切换的菜单- i- ?8 p. p7 v2 V) O. U, x
备注:如里不需要可以删除
, F# O3 k' q( {0 D, d
' L) [; n0 P; w4 n; K" i第80-96行代码:
' ^, F; h- A( R! R7 n
, `( S- Z! g2 W/ q; _<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>" G3 Q+ u0 S8 L/ P
                                        <!–{if $_G[‘uid’]}–>
& Z* [* V" M" T7 y- g2 ^                                        <ul>
8 m" @3 K3 r6 G( @                                                <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>
. |3 Q  f) I3 c1 D3 ?' N# y                                                        <!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>) {9 w( e! o+ Y
                                                                <li>$nav[code]</li>" ~9 n8 J" D6 f) E
                                                        <!–{/if}–>$ f# |/ W: ?, ?2 ]
                                                <!–{/loop}–>% N) H) H: ]1 k$ C
                                        </ul>/ ]$ [0 A! `$ L4 q' J2 A
                                        <!–{else}–>/ D- _$ P3 i, G/ q8 _7 u) [
                                                <div class=”ptm pbw hm”>0 l0 `8 x# ]4 K" Q& v5 c4 B. C
                                                        {lang my_nav_login}
& \: Z; U8 s+ L# f! L                                                </div>% T9 S( x/ u8 j; K& G) x! j0 q
                                        <!–{/if}–>
: G6 j0 i" |  g3 i5 H! ~                                </div>7 p  m& X' b" q% o
                <!–{/if}–>
* O+ p1 {: u4 W! G0 W
& e. {- \! V9 Y( M代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
; o8 m5 \) T/ \6 a( P0 T0 q备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!  a4 f4 X  I4 ^

8 [7 ^& K7 D4 l2 L第97行代码:
! n; G. e7 I, Z+ p% {  I0 G  `, c, X& V1 M: ^
<!–{ad/headerbanner/wp a_h}–>
6 S, U2 o' Q+ j0 Z: r: G/ ~" g5 i* m: v/ b5 Q8 ]0 a
代码解释:头部的广告代码,: }( j; d" j) u# W2 f
备注:可以在后台=》运营=站内广告添加第98-184行代码:% Q! f& \3 T4 m# l0 r2 ~' L  f
从<div id=”hd”>到 </div><!–{/if}–>: ]2 `) N" a" x, u5 {, D& z
代码解释:头部的核心文件
% C+ |- E+ l' g; L  M+ O, {2 Y备注:下面是头部核心的DIV指引4 v7 ^" z9 U) V6 w3 q% z
<div id=”hd”>$ g3 d  }1 ]& Z$ ~! e
<div class=”wp”>
+ R6 C( _" m- u, B<div class=”hdc cl”>
5 \2 }+ d# U5 M3 C) g8 y<h2>logo</h2>———————————->logo6 |& |: Z& ?, ^7 C5 {* B
                 <div id=”um”>
) `1 d8 R& i0 m<div class=”avt y”>头像</div>—————————–头像" n! j: _! W' v2 y+ A8 ?; N
                       <p>5 [; C/ Q: K3 }
<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1
; k) d, I/ d1 J3 q9 U                          <!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2$ @/ |# [" r, Y% c; [
个人信息—————————————->个人信息
- {) m, j7 l7 R</p>& A, O% E) v5 p( K9 x
<p>
5 x8 w" |* ?* a. J' h, U<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3
( V) z4 f) o! N& o" U9 x! I个人信息—————————————->个人信息1 L; Q# D. K* d" A$ M' L) n: Z3 R* Y9 S, V
</p>
) |' C, ~& {7 ]" ~$ C$ `+ H7 i6 [& r- ~</div>3 V! e& H  m: h9 Z2 u- h' v
<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件)                         </div>+ @4 i; L/ N- ~. p$ |6 E/ L6 ^
<div id=”nv”>: v, P/ @( g" L8 }' k) t
<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航
* ]8 M8 _( ?0 p- _5 q3 v                <ul>
& n, K; `5 Y8 K- a. a<li>栏目导航</li>———————————>栏目导航
  J' C8 J  h" n- W5 O. p. V# F. O0 X                 </ul>
8 W; |& q+ ~& c( Z5 D</div>
  \1 ]* R( c% w, G* f<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>; P2 F* _- ~0 I
二级导航菜单样式——————————————————>二级导航菜单样式& e: U0 G% g% R4 i1 D$ E/ e
</ul>
) @. e8 x( P0 z) H# ]< div id=”mu” class=”cl”>
3 R" d- E. x9 O- p5 L2 i- \3 K二级导航横排>————->二级导航横排样式
: a5 h/ v: k% l              </div>
" H( T4 Z( q; U; e9 B<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)
0 w5 }5 f/ A. G( n, R" {<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件)                   </div>
/ @/ T: ]) q2 @/ I5 }: H3 g</div><!–{hook/global_header}–>插件嵌入点  T# f; w* r. U! b  D
: i6 E( u" M" j& H' h
总结:大家在修改的时候他的每个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 | 显示全部楼层
我是个凑数的。。。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册 微信登录 手机动态码快速登录

本版积分规则

QQ|Archiver|手机版|小黑屋|罗码 ( 粤ICP备17073043号 )https://beian.miit.gov.cn/#/home

GMT+8, 2025-11-29 04:40 , Processed in 0.135886 second(s), 59 queries .

Powered by 罗码网络! X3.4

© 2001-2017

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