Discuz!前端模板入门引导

[复制链接]
查看1488 | 回复0 | 2038-1-19 11:14:07 | 显示全部楼层 |阅读模式
为了能更形象的形貌模板制作的原理和底子构造,昨们做一个团体的比喻:Discuz! X  比如一个人,昨们提供的步伐架构就比如一个人的骨架和团体器官,模板就比如是这个人穿的一套衣服。Discuz! X  默认内置一套模板,模板扩展机制就是一套针对Discuz! X 的服装制作尺度。根据这个尺度可以给Discuz!  X穿上你量身制作的衣服。下面我领导各人相识一下这套尺度的团体架构和机制。

熟悉默认内置的模板套系
起首,昨们必须先来看看默认内置的这套模板套系。这套模板将是昨们学习和扩展模板套系的先决底子。Discuz!  X 默认的模板全部同一放在网站根目次下./template/default/,当你全新安装一个Discuz! X  社区论坛之后,你看到的全部论坛界面的源html文件都是存放在这个目次下面的。这个目次下面同样按照模块功能将每个模块用到的模板都单独做了分类,分别放到对应的模块模板文件夹下面。下面是对每个文件夹的概括先容(以Discuz!  X2.5为例):
1、公共模板文件夹(内含大部门模板css样式文件)./template/default/common/。
提示:包罗header.htm,footer.htm,pubsearchfrom.htm等公共模块模版文件和css文件。
2、论坛模板文件夹./template/default/froum/。
提示:包罗论坛首页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下,一样平常是不必要修改的。

Discuz!  X模板扩展机制的3点留意事项

通过上面的先容昨们对默认的内置模板已经有了一个大要的相识,那么昨们怎样去扩展一套新的模板以更加个性化展示昨们的网站呢。这里你就必要对Discuz!  X  默认的模板扩展机制有个根本的解了。以下使昨们必须清晰的:

1、任何扩展模板都是以内置默认模板套系为底子的!比方:
昨们要新建一套yourstyle扩展模板套系。Discuz!  X步伐读取模板的机制是,读取当前模板套系目次下的模板文件,如yourstyle文件夹下common/header.htm文件(扩展的模板套系的文件夹目次布局、名称和文件名要对应默认default),假如yourstyle扩展模板套系没有对应文件夹目次下的对应文件,则主动读取默认风格  /tempalte/default目次下的common/header.htm文件。默认风格/tempalte/default相称于昨们的底子模块,假如昨们不消修改这个模块模板,昨们就不须要在重新去天生这个地方的模板了!

2、扩展的风格不再必要原来的css文件,只必要新建一个以extend_为前缀加源文件名的扩展css文件即可,比方:
extend_common.css文件、extend_module.css这内里只必要参加你自界说的扩展css代码即可,这部门代码将在天生  css缓存时和默认的default模板文件夹下的对应css文件中的代码一起剖析天生新的当前模板样式文件。

3、module.css文件的模块化分部加载css!必要完全按照现有格式举行扩展,比方:
/**  forum::viewthread,home  **/
这里的css代码将会加载到指定的(即forum.php?mod=viewthread,和home.php脚本所访问的页面)页面当中,已淘汰css冗余。
/**  end **/
只在指定的当前访问脚当地址CURSCRIPT::$mod单独加载,比方:forum.php?mod=forumdisplay
怎样制作模板套系风格

相识了以上内容之后,各人就可以开始扩展制作本身的模板套系风格。

1、起首昨们必要在template/文件夹下新建一个yourstyle文件夹放置模板文件,然后复制default下的  discuz_style_default.xml,重定名为discuz_style_你的风格名称.xml(留意这里discuz_style_是必须保存的)。这个文件设置的便是下图中背景表现的设置地区中的变量内容。
源码多多:Discuz!前端模板入门引导
解释:这个文件是昨们风格模板套系的设置文件,此中指定了你的扩展风格名称,设置风格的初始化id,风格模板地点文件夹和一些初始化参数,如:整个模板的字体巨细,颜色等一些通用参数的设置。
 2、修改文件中以下四个参数
源码多多:Discuz!前端模板入门引导
解释:有了这个文件后,背景界面-》风格管理就可以革新看到一个扩展风格了。
别的昨们复制的设置文件中必要昨们特殊留意的就是以下两个参数:
源码多多:Discuz!前端模板入门引导
修改完成后,去背景界面-》风格管理,革新就会看到昨们刚才刚刚添加的yourstyle模板。在背景安装并将扩展风格yourstyle设置为当前模板套系,由于这个目次下如今还没有文件,那么他会完全去调用默认模板template/default/文件夹下的文件,如许一个完全和默认风格雷同的扩展模板风格就创建完成了.假如你想自界说展示谁人页面只要把对应的默认模板defalut下对应的文件模块模板文件在你新扩展的风格中重新界说就好了。
实比方下图:

1. 在template下新建一个文件夹,放置扩展的模板套系文件。
源码多多:Discuz!前端模板入门引导
 2.  扩展文件夹下的文件目次名称和模板文件名称完全按照default默认模板定名。留意:也可以本身定名,但是要在模板文件中本身修改模板的对应文件调用,不发起初学者利用。
源码多多:Discuz!前端模板入门引导
如上图,如今举行最简朴的修改,此扩展风格只对应了默认模板default下的common文件夹。common中只有一个header.htm文件,也就是说在应用这套模板后,由于它只对应默认模板default下面的common/header.htm,  以是应用此套模板后只能读到header.htm头部模板文件,而其他的假如没有全部主动调用template/default下的header.htm  模板文件。
源码多多:Discuz!前端模板入门引导
3. 背景应用扩展模板:
源码多多:Discuz!前端模板入门引导
4. 在header.htm中得当位置添加一句话,以此来测试读取当前模板的模板文件。
源码多多:Discuz!前端模板入门引导
5. 对应与前台表现结果:
源码多多:Discuz!前端模板入门引导
演示完成。
Diy 功能先容:
Diy  功能是资助网站管理职员通过前台点击操纵,快速调用网站数据的一种便捷功能,可以或许让网站管理职员在不消本身手动编写代码的环境下快速调用本身网站的特定条件下的数据到页面指定位置的功能!

Diy  利用指南:
假如你想在一个页面举行diy 数据必须留意以下事项:
1、页面上必须存在可diy 地区。默认模板套系中内置了许多可diy  的地区。但是假如没有你必要参加如下情势的可diy 模板标签。


解释:两部门必须同等,且页面中此id  标识要唯一,假如你想在指定的地方调用diy 数据,就在对应的模板相应位置处添加diy 标签代码。
2、页面中必须有 (style id="diy_style" type="text/css") (/style)代码。
解释:这段代码是用来存放diy  时的样式设置,没有无法写入。
对于已经满意条件的diy 页面昨们可以按照下面步调举行 diy 数据的调用:
起首管理员登录后点击进入diy 模式:
源码多多:Discuz!前端模板入门引导
进入diy 模式后,页面中的内置拖拽地区将会酿成灰色的可拖拽地区。有了此地区,昨们便可以在页面的对应位置拖拽昨们必要的数据!

(1)  点击 添加框架 先添加框架。
(2) 可拖拽地区中有框架后,然后点击 添加模块
源码多多:Discuz!前端模板入门引导
(3) 如图所示, 根据你必要调用的数据范例添加模块数据即可:
源码多多:Discuz!前端模板入门引导
(4)获取的数据是按照差别数据范例调用差别的默认内置展示模版举行前台展示的。

这些模版  背景-》流派-》模块模版举行管理。

在这里你可以本身界说展示获取数据的模板,  只要在它对应的分类里按照特定分类对应的模板格式举行修改即可。
源码多多:Discuz!前端模板入门引导
楼主热帖