首页 > 代码库 > Discuz3.3精仿小米风格整站模板制作——1、新建模板方案

Discuz3.3精仿小米风格整站模板制作——1、新建模板方案

术语说明:

 

模板——模板是一堆按照规定命名方式的html文件,用于指定整个论坛不同页面的外观。
标签——标签和模板共同作用以实现论坛换肤功能,其中标签主要控制页面显示什么数据,显示多少条等。
风格——风格是一个xml配置文件,用于配置一些固定区域字体的大小、颜色、背景色等。例如春节时,整个版面变成喜庆红色等。风格这个功能实质上是一种可以直接在后台设置论坛中固定格式的文字(如标题列表等)的大小、颜色、背景色等而不用单独写css文件进行覆盖的技术。对于有编码能力的站长来说,其实无多大意义。
 

Discuz模板制作官方说明: http://faq.comsenz.com/library/template/made/made_extend.htm

本部分内容是对Discuz官方提供的模板概述的扩展说明。请参阅上述网址,对Discuz模板制作有个初步认识。discuz模板文件位于网站根目录/template/目录下。其中子目录default是其默认模板,站长可以根据需要在此目录下新建模板目录以放置自己的模板。

Discuz的模板是固定文件名的htm文件。例如,首页的模板文件叫discuz.html。其中,默认模板的首页模板文件位于站点根目录/template/default/forum/discuz.html。discuz对模板做了两点基本要求:

  1. 模板名称固定——对于不同的功能,模板的文件名是固定的,例如首页的模板名叫discuz.htm,板块的主体列表页模板文件名叫forumdisplay_list.htm等等。http://faq.comsenz.com/library/template/filelist/filelist_index.htm 此网址给出了默认模板目录下各个模板文件所对应的功能区域名称。我们所要做的工作就是按照这个目录列表,创建对应的htm文件,以实现论坛换肤。
  2. 模板文件扩展名固定为htm——html文件的扩展名有两种,分别为htm和html。以htm为后缀的文件一般在早期linux中比较常见。现在大多为html为后缀,同时这也是w3c推荐的做法。

个人认为,discuz如此设计恨怪异,让新上手的使用者理解起来非常困难。良好的设计方案应该让使用者自由选择模板才对。例如,对于论坛首页这个功能而言,使用者能自由决定是选择x模板方案下的index.html还是default.php或是其他什么文本文件。如此做法更符合一般人的直觉。后续,作者将对discuz的源码做小小修改,使其可以识别html后缀的文件(修改为识别html后缀文件或其他后缀文件,例如asp、jsp、php等代码大同小异,使用者可以自行参照修改)。在discuz模板目录下,有一特殊目录——common,此目录下的文件为非必须模板文件,它只是将各个模板的公用部分提纯,其本身可有可无,完全依照制作者的思路而定。

discuz读取模板的规则(以首页模板举例):首先读取后台指定的模板目录中是否存在discuz.htm文件,如存在,直接以此文件做为模板,如不存在,则取默认模板文件中的discuz.html文件作为模板。

Discuz新建模板方案的主要流程

一、新建风格方案

登录后台,点击顶部【界面】功能区,页面刷新后,左侧会显示关于【界面】的功能导航,此时选择左侧的【风格管理】。在新增输入区域输入自定义的风格名称,点击【新增】。此时系统会复制一套空的风格方案。(风格方案实质上是一堆css和图片路径设置,先忽略这个,后续再详细说明具体设置)然后选择,当浏览者使用什么浏览设备时,采用此风格(模板)方案。系统提供了

四个选项,其中,【电脑版】必选。其他可忽略,此处的判断是通过http头进行筛选的。意味着我们可以建立四套风格及对应的模板,分别为不同的浏览者提供不同的显示效果。

二、新建模板目录

在站点根目录/template/下新建模板目录,并将默认模板目录(default)中的discuz_style_default.xml文件拷贝到新建的目录中,修改文件名为:discuz_style_新建的目录名.xml。模板目录建议采用英文字符。以防止服务器不识别中文目录。然后用记事本打开该xml文件进行编辑,修改对应的配置项。具体修改参见官方提供的模板制作概述下图为修改好的示例:

技术分享

注意:directory项中,路径要和模板文件夹所在的路径保持一致。templateid项中,具体的值修改为对应风格方案的id,(在风格方案中,点击编辑,从网址栏中可以看到具体的id。)

三、后台新建模板套系

在【界面】——【模板管理】中,新增模板名称(建议和风格名称保持一致)并指定正确的路径。参见下图:

技术分享

 

至此,新建模板方案就大功告成了。在【工具】——【更新缓存】中更新一次缓存。前台样式就是新建的模板了。此时我们会发现前台没有任何变化,这是因为我们只是新建了模板方案,但是没有建立具体的模板文件,系统检测到没有模板文件后,自动采用了默认模板方案中的对应模板文件(在discuz模板读取规则中有叙述),故前台没有任何变化。在后续的章节中,我们将制作各个模板文件,此时前台就会发生对应的变化。

Discuz3.3精仿小米风格整站模板制作——1、新建模板方案