腾讯云网站解决方案帮您轻松应对建站成本高/网络不稳等常见问题

Discuz!前端模板入门指导

1
回复
1550
查看
[复制链接]

765

主题

779

帖子

3万

积分

董事

Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72

积分
33025
发表于 19-4-8 11:46:42 | 显示全部楼层 |阅读模式      紫钻仅向指定用户开放  
                为了能更形象的形貌模板制作的原理和根本构造,我们做一个团体的比喻:Discuz! X  比如一个人,我们提供的步调架构就好比一个人的骨架和团体器官,模板就好比是这个人穿的一套衣服。Discuz! X  默认内置一套模板,模板扩展机制就是一套针对Discuz! X 的服装制作尺度。根据这个标准可以给Discuz!  X穿上你量身制作的衣服。下面我向导各人相识一下这套标准的团体架构和机制。
& g( ^+ W' i  q2 P- |! X) G; v" s, q+ U* c3 O
熟悉默认内置的模板套系
( {  R+ u) k6 M; t2 `8 ?1 ]% H  B起首,我们必须先来看看默认内置的这套模板套系。这套模板将是我们学习和扩展模板套系的先决根本。Discuz!  X 默认的模板全部同一放在网站根目次下./template/default/,当你全新安装一个Discuz! X  社区论坛之后,你看到的全部论坛界面的源html文件都是存放在这个目次下面的。这个目次下面同样按照模块功能将每个模块用到的模板都单独做了分类,分别放到对应的模块模板文件夹下面。下面是对每个文件夹的概括先容(以Discuz!  X2.5为例):. T* s* {* N4 R; b! ^6 Y, Y
1、公共模板文件夹(内含大部门模板css样式文件)./template/default/common/。
2 ]* y( k  d# q1 B6 f
提示:包罗header.htm,footer.htm,pubsearchfrom.htm等公共模块模版文件和css文件。
2、论坛模板文件夹./template/default/froum/。2 W6 U& u( {% \3 W
提示:包罗论坛首页discuz.htm,帖子列表页forumdisplay.htm,帖内容页viewthread.htm模板文件等。
3、群组模板文件夹./template/default/group/。
提示:包罗group.htm欣赏群组时的模板,group_index.htm群组首页模板等模板文件等。
4、空间故里模板文件夹./template/default/home/。
提示:包罗space_home.htm空间,home页模板文件,space_header.htm空间头部模板文件等。
5、会员模块模板文件夹./template/default/member/。
提示:包罗登录login.htm,register.htm册,getpassword找回暗码模板文件等。
6、首页流派、频道、专题的模板文件夹./templatedefault/portal/。
提示:模板文件夹!view.htm  查察页面,comment.htm 品评页面模板文件,index.htm流派首页模板文件等。
7、排行榜模板文件夹./template/default/ranklist/。
提示:包含member.htm用户排行模版文件,activity.htm运动排行模版文件等。
8、搜索模板文件夹./template/default/search/。
提示:包含搜索效果页footer.htm尾部模版,thread_list.htm帖子搜索结果展示模版等。
9、网站扩展配色模板文件夹./template/default/style/。
提示:默认内置5个扩展配色模板。
10、tag模块模板文件夹./template/default/tag/。
提示:包含论坛标签展示页面tag.htm。
11、会员模块模板文件夹./template/default/userapp/。
提示:包含娱乐广场(云平台开启周游应用)首页userapp_index  模版文件等。
12、网站初始化模板设置文件discuz_style_default.xml。
13、巨细两张预览图preview.jpg和preview_large.jpg。
以上为内置默认模板套系的文件目次布局,这些静态的html构成了Discuz! X  看到的默认展示样式。别的这套模板套系中出现的笔墨,都同一存储在语言包当中网站根目次./source/language下,一样寻常是不须要修改的。
8 t0 n2 m0 N  |) \
$ B# _. @) ]; wDiscuz!  X模板扩展机制的3点注意事项& l  ]1 e6 g( a% S8 @" o/ g

$ m( e& l( r' w+ s7 _! f. M+ U; F) l! M通过上面的先容我们对默认的内置模板已经有了一个大要的相识,那么我们怎样去扩展一套新的模板以更加个性化展示我们的网站呢。这里你就须要对Discuz!  X  默认的模板扩展机制有个根本的解了。以下使我们必须清晰的:% {# J+ }7 S. M+ A( F
$ d7 J# c2 Y9 o9 S% a6 x( m
1、任何扩展模板都是以内置默认模板套系为根本的!比方:
; A& c' h; M4 r7 N/ e2 M* D我们要新建一套yourstyle扩展模板套系。Discuz!  X步调读取模板的机制是,读取当前模板套系目录下的模板文件,如yourstyle文件夹下common/header.htm文件(扩展的模板套系的文件夹目录结构、名称和文件名要对应默认default),假如yourstyle扩展模板套系没有对应文件夹目录下的对应文件,则自动读取默认风格  /tempalte/default目录下的common/header.htm文件。默认风格/tempalte/default相当于我们的根本模块,如果我们不消修改这个模块模板,我们就不须要在重新去天生这个地方的模板了!
0 Y: J& A2 c1 Y, {6 a9 z2 ~4 S/ L5 @
2、扩展的风格不再须要原来的css文件,只须要新建一个以extend_为前缀加源文件名的扩展css文件即可,比方:
4 G. A4 F% Y8 C3 [' f* P( S; h# k9 Rextend_common.css文件、extend_module.css这内里只必要到场你自界说的扩展css源码即可,这部分代码将在天生  css缓存时和默认的default模板文件夹下的对应css文件中的代码一起分析天生新的当前模板样式文件。
. `7 w2 c2 Z* Q/ D' k- i; j4 s# |7 k+ ~- h
3、module.css文件的模块化分部加载css!需要完全按照现有格式举行扩展,比方:' }5 f9 P6 ]) c+ q, r8 ]
/**  forum::viewthread,home  **/
! }; _9 B' E8 f' X. A这里的css代码将会加载到指定的(即forum.php?mod=viewthread,和home.php脚本所访问的页面)页面当中,已镌汰css冗余。0 Z. {) c  l4 O3 L! U4 Z
/**  end **/  t  d" r1 [: ]( R, G& A) o9 T% h
只在指定的当前访问脚本所在CURSCRIPT:mod单独加载,比方:forum.php?mod=forumdisplay
3 l5 L" p- Q- q- F4 U% I4 O怎样制作模板套系风格
# k/ n- u- R2 H0 z- V6 j7 T7 N) \8 t9 P  R+ i
相识了以上内容之后,各人就可以开始扩展制作自己的模板套系风格。
! S5 q& s% T/ L5 _( x1 b
+ \- I5 J" l' L4 {# ^$ ]: `) W: G1、起首我们需要在template/文件夹下新建一个yourstyle文件夹放置模板文件,然后复制default下的  discuz_style_default.xml,重定名为discuz_style_你的风格名称.xml(注意这里discuz_style_是必须生存的)。这个文件设置的便是下图中配景体现的设置地域中的变量内容。
- ?  J& z/ [8 a1 [

' O% O* L% k; C9 N5 h% N' p+ l                               
登录/注册后可看大图

* W; x7 ^7 _4 V3 X3 F7 [9 D
表明:这个文件是我们风格模板套系的设置文件,此中指定了你的扩展风格名称,设置风格的初始化id,风格模板地点文件夹和一些初始化参数,如:整个模板的字体巨细,颜色等一些通用参数的配置。
 2、修改文件中以下四个参数9 ^1 j  L6 M$ x/ _5 d( C/ K3 Q

3 K7 }4 Z( G( M- L: W                               
登录/注册后可看大图

* M- {# ?" Y1 h1 }% O7 J
表明:有了这个文件后,配景界面-》风格管理就可以革新看到一个扩展风格了。
别的我们复制的配置文件中需要我们特殊注意的就是以下两个参数:
+ a6 x7 i- D# F) \1 m

7 c" s# k0 \8 \$ Q2 v7 ^                               
登录/注册后可看大图
1 d- C* w; ~7 }* ^0 |  P
修改完成后,去配景界面-》风格管理,革新就会看到我们刚才刚刚添加的yourstyle模板。在配景安装并将扩展风格yourstyle设置为当前模板套系,由于这个目录下如今还没有文件,那么他会完全去调用默认模板template/default/文件夹下的文件,如许一个完全和默认风格类似的扩展模板风格就创建完成了.如果你想自界说展示谁人页面只要把对应的默认模板defalut下对应的文件模块模板文件在你新扩展的风格中重新界说就好了。8 V! ]3 j6 W0 O; i) ~5 I! r4 R
实比方下图:! v0 X& o9 l+ J
! K1 B. g) J" M* v5 A& l
1. 在template下新建一个文件夹,放置扩展的模板套系文件。
, @1 k" I4 b# V0 a+ W: S3 u

, V  Q2 ]2 d" `- d" n0 |                               
登录/注册后可看大图
+ _# i  _4 g& T% K$ R% A* D  R
 2.  扩展文件夹下的文件目录名称和模板文件名称完全按照default默认模板定名。注意:也可以自己定名,但是要在模板文件中自己修改模板的对应文件调用,不发早先学者使用。
6 A- i7 Z. V/ }9 f

7 `, R' c0 \& `0 v0 b7 e                               
登录/注册后可看大图

- k0 i; t$ J/ F3 B如上图,现在举行最简朴的修改,此扩展风格只对应了默认模板default下的common文件夹。common中只有一个header.htm文件,也就是说在应用这套模板后,由于它只对应默认模板default下面的common/header.htm,  以是应用此套模板后只能读到header.htm头部模板文件,而其他的如果没有全部自动调用template/default下的header.htm  模板文件。
3 M" A: [4 I3 y! k

, i' Y) i1 o/ j  }                               
登录/注册后可看大图

! W: [& S7 d, l+ a$ N3. 配景应用扩展模板:
9 o: o" _& P. @7 }' b

  E' Y. L' |9 I+ E1 W                               
登录/注册后可看大图

! p5 c- l* z* [* F9 X* G' s) d4. 在header.htm中恰当位置添加一句话,以此来测试读取当前模板的模板文件。9 S/ |1 E; G& }" E. w6 X) b; v
+ [# F, v: `# l8 F0 f
                               
登录/注册后可看大图
' J1 P3 W: v  A$ N9 Z1 |9 M8 [5 g
5. 对应与前台表现结果:
5 s5 g+ x# Z& t2 \- R& t
2 b: H# `# `5 R" K
                               
登录/注册后可看大图

6 u& m5 C8 e8 J3 y4 z$ F4 [演示完成。
& b, b. W: a0 f$ a/ @# k6 [3 bDiy 功能先容:0 I9 |! o: B! W8 M& Q
Diy  功能是资助网站管理职员通过前台点击利用,快速调用网站数据的一种便捷功能,可以大概让网站管理职员在不消自己手动编写代码的情况下快速调用自己网站的特定条件下的数据到页面指定位置的功能!
# [, C# y/ X1 a% w3 T# z5 _1 w" a3 z% X" c+ X- {
Diy  使用指南:" _8 n  |! c5 V" X% \
如果你想在一个页面举行diy 数据必须注意以下事项:: Q% K6 l! I! ?( y2 N- g/ `
1、页面上必须存在可diy 地区。默认模板套系中内置了许多可diy  的地区。但是如果没有你需要参加如下情势的可diy 模板标签。
$ P, D1 }; X% `$ G- Q' v. B<!--[diy=diy1]--><div id="diy1"  class="area"></div><!--[/diy]-->6 X$ F5 P( X0 B: H1 \% O
表明:两部分必须划一,且页面中此id  标识要唯一,如果你想在指定的地方调用diy 数据,就在对应的模板相应位置处添加diy 标签代码。
2、页面中必须有 (style id="diy_style" type="text/css") (/style)代码。
2 E/ S, e- s! d# {% j( X
表明:这段代码是用来存放diy  时的样式设置,没有无法写入。
对于已经满足条件的diy 页面我们可以按照下面步调举行 diy 数据的调用:
* U# G+ h5 L# j: I起首管理员登录后点击进入diy 模式:8 E7 r! `( G' M( l
7 T/ ^' i' z8 Q. P& P
                               
登录/注册后可看大图
2 o. f& f5 h. W/ W' n( B% f) G3 ]
进入diy 模式后,页面中的内置拖拽地区将会变成灰色的可拖拽地区。有了此区域,我们便可以在页面的对应位置拖拽我们需要的数据!1 W  @; V. M: }
/ b" T3 n6 [/ `4 s
(1)  点击 添加框架 先添加框架。
( l. W% U' C+ l2 l5 j* o9 z. ~% L7 l( [(2) 可拖拽区域中有框架后,然后点击 添加模块
$ a  o4 m" q9 K( H" D

  i) U8 N* w( J1 T$ E                               
登录/注册后可看大图

8 H5 B$ u1 F% X  a(3) 如图所示, 根据你需要调用的数据范例添加模块数据即可:
$ w, x( r6 ?! b2 A' L. h
  F; @5 j5 |2 q! r
                               
登录/注册后可看大图

4 h* Q5 z+ F1 H. h9 \0 H(4)获取的数据是按照差异数据范例调用差别的默认内置展示模版举行前台展示的。, h( C; r0 a9 a* h! @
. g  J% i( h- t& E. _5 w: T) J
这些模版  后台-》流派-》模块模版进行管理。
/ H4 K& z8 V" k; d( E$ q$ T6 n( S+ h2 h5 L* |
在这里你可以自己界说展示获取数据的模板,  只要在它对应的分类里按照特定分类对应的模板格式进行修改即可。- b, O" R' O2 e# @, D0 Y! p
- V. q: E: K& `1 P8 ~8 Q. ~/ f
                               
登录/注册后可看大图

% V6 n8 x0 ?6 I( z
/ b: \2 e4 I8 ~5 G3 O5 ~/ `            

0

主题

9

帖子

4

积分

1°伸手党

Rank: 2

积分
4
发表于 19-12-11 10:19:09 | 显示全部楼层         
相当不错,感谢无私分享精神!
回复

使用道具 举报

网站简介

球球发,是一家 Discuz! 商业插件、风格模板、网站源码、 Discuz!运营维护技术等于一体的交流分享网站,全站95%的资源都是免费下载,对于资源我们是每天更新,每个亲测资源最新最全---球球发(如果我们有侵犯了您权益的资源请联系我们删除