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

罗码gitluo

 找回密码
 立即注册

QQ登录

只需一步,快速开始

微信登录

微信扫一扫,快速登录

手机动态码快速登录

手机号快速注册登录

搜索
开启左侧

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

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

5 n- j  D7 ^! F4 f% K' h* I- oheader.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!  Q+ a* A$ z' w( p
1 X  E  P; E/ H. x/ ]" y7 G* p
第1行代码:" [" P# R% }7 \) F$ F, w- z
<!–{subtemplate common/header_common}–>1 A% f2 v2 M! U: L- {5 h% P! b( d
代码解释:用于调用common文件下的header_common.html文件,! y  W: y/ f: O: x
备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。) S5 b5 ^1 C/ Q0 a' N& U
) y$ I$ I9 J4 k9 P0 U
第2-29行代码:
; [/ M$ ]& p# p* O6 R0 s; M从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾' M3 t0 B- s6 k* u
代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
. c1 e) u( `. J; Q1 L# i备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写
9 m( M' g/ I: L2 l; D, w( [* I/ M# Z
4 B% t' K9 b  M) L, n- P( {第30-186行代码:8 Z! i1 V: a9 \* D: ~
从<body>处开始到此文件的最下方5 _; s6 u  \; W7 \  f
代码解释:这是首部文件的核心# s: W1 X& j+ t  v
备注:在修改时请注间要提前备份文件
" a( t, q, J; I7 V1 x' e7 V) ^; F; n+ X( P
第32-44行代码:% `; d. q9 I# w% R) g6 K  G
从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾% l: |6 \8 `2 K0 k4 n$ H
代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,) y" j8 }+ x; a1 m8 y1 f& X4 Z7 b
备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!. |" N" w, E' {" C' g/ i' G

" t! U3 T* j- E9 s" y( Q  S第32-44行代码:/ L8 q  F: o9 ~
从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>7 M. [3 x5 s. h! u4 ^  u8 i
代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
+ |0 B: j1 V" |备注:在后台=》界面=》顶部导航。可以设置
0 w! x/ I, n( ]& {& F+ @: w
+ |5 T, G" q; y: I2 @第70-78行代码:
% i  i" ~* M  S6 D
5 w% A4 \4 G& \0 m  j( O1 i! N<!–{if !IS_ROBOT}–>
+ u+ |$ c7 ^3 G4 [0 H, c                        <!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>
; P% k/ V! U& I  D$ n5 g; N2 o                                <div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>, O, c2 u& D8 U  B
                                        <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>
6 v. K$ i- L' x                                        <!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>
. q! ?3 m1 k5 n/ M7 N; k                                                <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’backgroundextstyle[2]’></i></span>
8 k  E% N+ o% s3 \$ z$ [$ f) K                                        <!–{/loop}–>
" T. P* t# M& f+ W6 ~, h9 h                                </div>
9 V3 v. g. @2 u- \' Q                        <!–{/if}–>8 ^& Q' m. w2 F( u8 o4 h) l

* p& h: a% z9 n) `; l3 J代码解释:此处是拓展色的切换的菜单, {/ s2 H. }$ z, g
备注:如里不需要可以删除
: H5 L9 q: Q8 W( ]- E9 l2 ~8 _4 Y4 `/ |* L% r, j* U8 v; z0 B/ Y
第80-96行代码:5 ]  s2 c; z( |- ]/ g- e7 z4 D
7 k6 I% w2 c# i/ u) K' n* ]$ ]
<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>
8 h! G) _' i' @, A+ A" p                                        <!–{if $_G[‘uid’]}–>& x. S: @( H+ k" \7 D. a
                                        <ul>
# f  S! \0 Z# B$ Q  Z+ V                                                <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>
) x1 f; Y& Q4 S& _8 n                                                        <!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>
* O! ]' W9 Z' k4 z% b3 x5 A                                                                <li>$nav[code]</li>
# ^7 v' f! y! D                                                        <!–{/if}–>
) L- \' s# Z' Q7 \; K- ~                                                <!–{/loop}–>. x' l: C  K3 o( `4 g
                                        </ul>! _5 O1 y9 _  h2 _& V0 b
                                        <!–{else}–>' m  O. L6 |% J$ Y' S* M% h
                                                <div class=”ptm pbw hm”>
- V- D6 F7 m- v# L                                                        {lang my_nav_login}
! s6 i. N8 S- L# J9 F                                                </div>
/ ^0 f9 v: v& K5 ]' F" V                                        <!–{/if}–>6 z6 A' p1 P- x' ~
                                </div>
; H2 @' P$ ~) y                <!–{/if}–>' K8 o; ?0 y0 L+ _. K; f
, x3 f! y8 }, z8 f' ]) i" P, ]8 C
代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈; q/ K" F6 E' Q* r1 f% q) e6 v
备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!
$ n- m& \( E$ G+ C' g; f. i
9 S; A( J! d4 d第97行代码:$ ?8 T) E$ k1 X( c( a  G

9 A6 }/ a+ O1 `<!–{ad/headerbanner/wp a_h}–>
$ {. n* f+ k9 M+ ~7 z' U% M# ~& q" h% f8 P5 ]& v9 Q- h
代码解释:头部的广告代码,4 l# c7 X( p6 g& ~7 M( Q
备注:可以在后台=》运营=站内广告添加第98-184行代码:( ?# O) \5 }" [3 ?0 E
从<div id=”hd”>到 </div><!–{/if}–>; [4 ]3 S# [* Q! F2 |& ?2 {
代码解释:头部的核心文件
( y0 p! H" I+ R( Z# ~! y: t备注:下面是头部核心的DIV指引
* Y" o: a  t7 D# P, C! k<div id=”hd”>
8 x8 w2 e6 s0 g<div class=”wp”>1 L( b9 ^) X( h9 J$ R
<div class=”hdc cl”>
; x& x3 L0 G$ Q/ }, F5 o<h2>logo</h2>———————————->logo+ B5 y( C4 B7 i; z/ F0 ?4 p0 j
                 <div id=”um”>3 I. b( v2 T2 i% S. _+ _
<div class=”avt y”>头像</div>—————————–头像
8 H, I/ X) N- K; u, ]/ N                       <p>  r( h: T; u/ O& D7 C
<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1
" ?) @) }+ X+ F/ \  Q: [6 @                          <!–{hook/global_usernav_extra2}–>———————————>插件嵌入点24 K; ?' ~2 p6 m) Z1 c7 s. n% P
个人信息—————————————->个人信息, j2 F4 p8 B! ]; k( l) Q
</p>
3 Z$ e$ |, |/ m<p>4 W, x* U. C9 k. l! j+ Z7 b: K
<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3
- T( K; `# w* [" u6 E个人信息—————————————->个人信息
- N5 i5 e) R7 e  u: H4 p: k6 Q</p>5 q! e- |2 J* N' x, ^9 ]
</div>" I* F8 Z- q& X' ~
<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件)                         </div>) L. }$ y- Z0 P+ B: E6 I: a  x; ^
<div id=”nv”>- e* B7 A( U/ N% ~
<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航
* T& J" J8 ?, T/ Z0 c                <ul>
9 R3 i# w$ q: p0 @( A<li>栏目导航</li>———————————>栏目导航
, c. B6 ~3 D4 D2 b9 H$ e                 </ul>
* y# |5 ]: Z5 [; t2 E1 c: x</div>
' y+ Y8 O, b& J% G6 E6 w<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>
& x( j% R: _# P. T+ \8 Q/ U二级导航菜单样式——————————————————>二级导航菜单样式
* w9 F3 R4 n- c3 g6 A5 n, I</ul>' r/ Z/ a: ~4 M9 P5 Q7 q
< div id=”mu” class=”cl”>) R7 B; I0 Z4 T0 \( |. l
二级导航横排>————->二级导航横排样式
+ h. n; P8 C, J5 f+ Y; q$ _5 s              </div>
' W5 j  }/ |$ z" _<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加); Y9 Q) `& _( A- n9 r& b
<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件)                   </div>& F5 U2 D% n; n+ i+ ?
</div><!–{hook/global_header}–>插件嵌入点
2 N& o+ R: c' z7 \9 U- l1 Q' @
7 c3 E: X, G- u总结:大家在修改的时候他的每个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, 2026-1-14 08:23 , Processed in 0.157609 second(s), 59 queries .

Powered by 罗码网络! X3.4

© 2001-2017

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