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

罗码gitluo

 找回密码
 立即注册

QQ登录

只需一步,快速开始

微信登录

微信扫一扫,快速登录

手机动态码快速登录

手机号快速注册登录

搜索
开启左侧

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

[复制链接]
罗码男神 实名认证 官方 发表于 2020-1-20 03:01:00 来自手机 | 显示全部楼层 |阅读模式
很多站长在使用DZ的时候,很想修改(header)头部文件,却无从下手,今天我就从文件第一行到最后一行来给大家解剖一下此文件,熟悉的站长都应该知道,Dx的模板制作无不是三个部分,头部(hd)、主体(wp)、底部(ft),这三个部分就是制作模板的关键,然而其中三个部分个人觉得最难的还是主体部分,今天讲下头部文件代码,因为是代码教程,有些代码太长,没必要粘贴过来!我会尽量的写详细点,后须我会将一些常用 的模板文件进行解剖!在这里希望大家支持一下!随便AD下!" U& g+ D- A% V
8 U7 u) }5 B. L4 z* C4 T& b
header.html这个文件存储于common文件下,这个大家应该不陌生吧,我是每个DIV为小节来讲,头部的核心div我就不加if语句来讲解!因为代码太多了!我会在最下面给大家总结一下!修改应该注意的地方!- n: Z9 k7 f4 T. I: |9 g6 A* k

" i; \- N" l8 w$ f% [$ F第1行代码:
0 ]+ J1 O  I7 ^6 W<!–{subtemplate common/header_common}–>
9 N/ `% J2 J3 R代码解释:用于调用common文件下的header_common.html文件,
# E. t6 }1 i, a* E; P备注:<!–{subtemplate}–>与<!–{template}–}–>是有区别的,<!–{subtemplate }–>后面的模板文件通常都是被包含在其他模板文件中的子体。这样在解析模板的时候,程序就会判断<!–{subtemplate }–>所引入的模板会被再一次解析一遍然后再和入口模板拼合,组成一个完整的模板。也就是说,如果我们添加的模板是在别的模板中被调用的话我们需要以<!–{subtemplate 模板名称}–>的方式引入进来。" ~$ n$ \" ]. I: Q" [, d
4 u) v6 D3 Y% h: M4 V$ r
第2-29行代码:
' h) q# {/ A8 O: }  q% Z* C从<meta name=”application-name” content=”$_G[‘setting’][‘bbname’]” />开始到以</head>结尾
* b+ V0 o, c5 d0 s- @' B* R  S代码解释:这里主要放置一些外部文件,其中的代码不多作解释,大家在加的时候请考虑官方的书写规范!
+ `) w8 m0 Y& p* J  [" m备注:此处虽然不解释太多,但大家还是会用到!如果要加外部调用JS、css请按官方的模板制作规范来书写2 P7 e3 Y+ q& m0 W
8 P  P2 N3 q9 K: o) A
第30-186行代码:) u! `+ D) M# P
从<body>处开始到此文件的最下方, Q9 I6 [3 J) A/ B
代码解释:这是首部文件的核心7 a9 V8 W4 q  D' n+ L7 N
备注:在修改时请注间要提前备份文件
! s9 |' K4 q. m, T( l  d* F+ d* {* E* d/ A) d& P) D% f) {7 H7 Y
第32-44行代码:
1 m) l, S  x" \从<div id=”append_parent”></div><div id=”ajaxwaitid”></div>处开始到<!–{/if}–><div id=”toptb” class=”cl”>结尾  V8 x2 A9 E+ v
代码解释:此处是整的DIY样式导入、导出及样式修改等,此处代码是隐藏的,, i7 @, M' ~& O: x% S2 d# f, a
备注:<div id=”toptb” class=”cl”>是方便你查找才写出!此代码不要修改,在修改模板时也不要漏了!9 i$ j. S+ ~( k2 a. x" d

& v  _; I, x+ e/ C& P4 l. F2 }第32-44行代码:( }; y: Q  A; j! H# v; t; G
从代码:<div id=”toptb” class=”cl”>到</div><!–{if !IS_ROBOT}–>
" @. N2 S- S9 E5 k# ^代码解释:顶部文件,用于放置导航与dz内部的一些功能,<div class=”y”>右处内容</div>,<div class=”z”>左处内容</div>
0 q$ L: L+ }* ]5 n) U$ G备注:在后台=》界面=》顶部导航。可以设置
# {* _# C8 c' ~
" _# O5 A5 a* y: c$ S第70-78行代码:5 u5 c( i6 i0 x( B& b
! c3 I  V2 ^3 U
<!–{if !IS_ROBOT}–>3 L7 |6 p: `* O! X* j2 @: E' d
                        <!–{if $_G[‘uid’] && !empty($_G[‘style’][‘extstyle’])}–>2 y1 `& o! ?6 D  j: W* k0 R
                                <div id=”sslct_menu” class=”cl p_pop” style=”display: none;”>) D9 o$ e2 {; K
                                        <!–{if !$_G[style][defaultextstyle]}–><span class=”sslct_btn” onClick=”extstyle(”)” title=”{lang default}”><i></i></span><!–{/if}–>0 C4 ]" L. T0 c7 C; F' J& T
                                        <!–{loop $_G[‘style’][‘extstyle’] $extstyle}–>
' j. v$ q7 J6 ?1 Z6 X; ~                                                <span class=”sslct_btn” onClick=”extstyle(‘$extstyle[0]’)” title=”$extstyle[1]”><i style=’backgroundextstyle[2]’></i></span>; l7 H' Q) A) M
                                        <!–{/loop}–>
; f! K# y* }  f7 D. i; A% `                                </div>
1 E% U3 O3 }* ~9 `7 S; I9 \                        <!–{/if}–>$ o3 T9 w- q" ~' P
, W+ s, J9 E3 h  Y  b% {
代码解释:此处是拓展色的切换的菜单& W5 e5 |! \' H5 a9 p% Q8 ~7 V
备注:如里不需要可以删除; R. j, [) R+ }* T1 I

7 @1 z' C/ u: y5 S6 g第80-96行代码:. m) {& e* W4 O3 P+ J4 D: @; h

; A% G0 I- d" J. j( K; t<div id=”qmenu_menu” class=”p_pop {if !$_G[‘uid’]}blk{/if}” style=”display: none;”>
6 s5 W. Y9 ^+ `# ]; r: @2 Q                                        <!–{if $_G[‘uid’]}–>" ]2 a. S0 A. n1 A, J7 Z; t& l' j$ f* k
                                        <ul>& ~2 ?1 H, @5 h) K1 ^; }' x5 b
                                                <!–{loop $_G[‘setting’][‘mynavs’] $nav}–>. N" ]* Q# f% O0 z; U5 D, t" F, ]
                                                        <!–{if $nav[‘available’] && (!$nav[‘level’] || ($nav[‘level’] == 1 && $_G[‘uid’]) || ($nav[‘level’] == 2 && $_G[‘adminid’] > 0) || ($nav[‘level’] == 3 && $_G[‘adminid’] == 1))}–>/ b2 `* H  z$ n  b% L" p
                                                                <li>$nav[code]</li>  j8 S# k1 K4 j/ a# E4 I
                                                        <!–{/if}–>
# D5 z1 V2 U* L/ H, R                                                <!–{/loop}–>
, j- G  C1 V' Y9 N, V0 H% z                                        </ul>
& n+ H  X" p+ r                                        <!–{else}–>' H$ G- ^& @& i
                                                <div class=”ptm pbw hm”>
  Z2 A: _- n" _                                                        {lang my_nav_login}
( }* g: \& E( C2 p3 C3 H                                                </div>. R# v% T" X6 r: u) H& N
                                        <!–{/if}–>
8 O7 i0 y# f! a' s0 ^" w2 U$ D                                </div>
! n' b" [) A* E; t                <!–{/if}–>9 G, Q! a* h! Q* _

, }2 t4 p. @# \0 [3 k0 l8 i% V代码解释:此处是快捷导航弹出的菜单,里面用到了<!–{if $_G[‘uid’]}–>语句进行判断,意思是只有会员才可以浏览此处内容,循环我就不多讲了哈
" R4 n* P2 t; F# L/ q1 O2 y备注:<!–{if $_G[‘uid’]}–>语句可以用到很多地方,自己在做模板的时候,可能会用到!( b$ G6 {4 c+ \3 W
& q0 X; U$ `5 e% n  q( n  F
第97行代码:4 ?# l7 @, d, N* w$ u: T4 t
8 a- y2 Y1 b) ^6 w
<!–{ad/headerbanner/wp a_h}–>. D! i! D% q% L

5 q: d+ F+ m$ h2 z) a9 ]代码解释:头部的广告代码,9 M* |3 V  ]8 `- E* g$ @
备注:可以在后台=》运营=站内广告添加第98-184行代码:+ M1 D( k3 M& q9 N5 E
从<div id=”hd”>到 </div><!–{/if}–>
) `8 `2 f" x" f2 S" t- [代码解释:头部的核心文件
+ \& o( o9 _# D) l2 L- v( L备注:下面是头部核心的DIV指引
4 s& o) c* A4 I/ b5 l: L1 G! s! k<div id=”hd”>6 C! m, j8 R- [" c. M! y
<div class=”wp”>
7 ^* r" v% P6 K/ U/ y6 W8 j<div class=”hdc cl”>
9 g2 h; B) o4 z, K' B! U  a<h2>logo</h2>———————————->logo/ Q& R% D. }2 l' d. X% v. Z+ V$ Z
                 <div id=”um”>- W4 O$ j* i+ F
<div class=”avt y”>头像</div>—————————–头像" X& T6 ~3 h/ w* t2 S) J$ z
                       <p>
- A  {0 ?% b3 ~& n' D6 G<!–{hook/global_usernav_extra1}–>————————————>插件嵌入点1. z2 b5 }' j, |  `
                          <!–{hook/global_usernav_extra2}–>———————————>插件嵌入点2/ I9 R! o+ v, Y- d; O$ ?7 _
个人信息—————————————->个人信息
. B3 q# a$ T3 ^4 e+ \' O</p>% O1 H* _, g5 \. x3 T& a1 H
<p>- G0 f/ t$ C3 T% n7 B- @/ ?% z
<!–{hook/global_usernav_extra3}–>—————————>插件嵌入点3
1 l2 C8 |" ?6 c6 c' ~个人信息—————————————->个人信息
, V/ @4 p% n& ], z- d</p>/ \4 ?% y; P, B& Y+ g, s
</div>3 C  W7 N8 W9 ~: a9 i
<!–{template member/login_simple}–>—– > 登录框(此处调用member/login_simple.html文件)                         </div>
& r9 }# b' H# u7 N7 y+ D<div id=”nv”>/ L  g3 N1 v+ f8 q4 |
<a href=”javascript:;” id=”qmenu” >快捷导航</a>————–>快捷导航
' f- O$ q- w3 k# C% O6 K) ?1 M+ z                <ul>
  r' m1 A4 H' h3 `4 x<li>栏目导航</li>———————————>栏目导航
% K; I) X; S; I( p7 Z  o                 </ul>
( @6 H! i; N& f2 Q: _- r+ X5 s</div>, \$ Y0 j+ ~& S0 X) E" ^. s( b5 c
<ul class=”p_pop h_pop” id=”plugin_menu” style=”display: none”>
$ ^9 I  H/ @9 |+ E  u/ r& m二级导航菜单样式——————————————————>二级导航菜单样式
( X% q% n& U1 t( R( g( s+ u! }1 C$ k</ul>4 N& u$ e0 y" m
< div id=”mu” class=”cl”>
  U7 h5 y2 P' d" d+ x. d" J$ p二级导航横排>————->二级导航横排样式
. y3 g) j  ~/ [              </div>
' _, a# e$ J* t( F  [<!–{ad/subnavbanner/a_mu}–>————————->头部广告(后台站点广告处可以添加)
% [; \3 y# G5 C, k<!–{subtemplate common/pubsearchform}–>——–>搜索(此处调用common/pubsearchform文件)                   </div>
+ b0 u9 u$ t* r2 e0 n  f8 x) v# S</div><!–{hook/global_header}–>插件嵌入点
- M: N1 w7 v# e/ p' I- g
* M9 y4 E5 |' k5 f/ P- L总结:大家在修改的时候他的每个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-2-20 14:16 , Processed in 0.133263 second(s), 59 queries .

Powered by 罗码网络! X3.4

© 2001-2017

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