立即注册 登录
彼岸网 返回首页

天香公主的个人空间 http://www.bian-wang.com/discuz/?10005 [收藏] [复制] [分享] [RSS] txgz999@yahoo.com

日志

Discuz系统结构分析(三): 模板和风格

热度 4已有 6325 次阅读2015-5-14 04:38 PM |个人分类:Discuz|系统分类:社交网理论与实践

Discuz系统结构分析(三): 模板和风格

Discuz软件将不同作用的代码有序的分离开来,遵循软件构架的MVC模式(链接)。其中的视图(View)部分是以模板(template)形式实现的。Discuz系统提供的所有模块都存在网站子目录/template/default里的。在那里有很多个模板,不仅每个主要的网页都有对应的模板,而且模板还可以分割成多个单独的模板,即一个模板可以用多个其它的模板合成。 这些模板总称为默认(default)模板套系。 比如多个网页上的头部都是定义在common/header.htm 里的(这里和下面写的路径为方便起见都假定是相对于/template/default的)。而这些网页对应的模板则调用了它。


比如门户页就是这样定义的:
<!--{template common/header}--> <style id="diy_style" type="text/css"></style> <div class="wp"> <!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]--> </div> <script src="misc.php?mod=diyhelp&action=get&type=index&diy=yes&r={echo random(4)}" type="text/javascript"></script> <!--{template common/footer}--> 它除了调用头部模板 header.htm <!--{template common/header}--> 和底部模板外,就是保留了一块需要用DIY来添加内容的地方。又如头部有一个搜索网站内容的部分(上图中红框里的部分)并没有定义在头部模板里,而是定义在了一个单独的模板文件 common/pubsearchform.htm  里: <!--{subtemplate common/pubsearchform}--> 一般情况下,subtemplate 可以和 template 是等效的,区别在于前者有利于提速 (链接)。

模板决定了网页的布局,而网页上各部分的色彩字体背景等外观因素则是在风格(style)文件中定义的,其中最主要的风格文件是 common/common.css。注意这些风格文件不是普通的风格文件,它带着些网站可以自我调配的变量,如 body, input, button, select, textarea { font: {FONTSIZE} {FONT}; color: {TABLETEXT}; } 这里FONTSIZE, FONT 和 TABLETEXT 都是可以设置的变量,它们的值存在数表 common_stylevar 中(可以不存在)。


管理中心里提供了设置这些值的界面:界面->风格管理->编辑风格。

这些变量往往用于定义多种元素的风格,所以被多次使用,把它们的值集中起来定义,比把这些固定值直接写在风格定义里灵活。

注意在/template/default 里有一个叫 discuz_style_default.htm 的文件,它也包含了前面提到的那些变量的值。但改动其中的值对网站并没任何影响。这是因为这只是个模板安装文件,仅在模板安装时有用,它包含的这些值在该风格模板安装时储存在数据库里( common_style 和 common_stylevar )。它在安装后就不起作用了。这也是当我们从Discuz应用中心里安装一个第三方模板后,在模板目录里可能没有类似文件的原因。一般而言,在管理中心内可以更改或添加的内容都是存在数据库里的,而不会去通过修改文件来存在文件里。<item id="fontsize"><![CDATA[12px/1.5]]></item> <item id="font"><![CDATA[Tahoma,'Microsoft Yahei','Simsun']]></item>
扩展配色
前面说了风格文件主要在 common 里,而模板和风格用到的图片文件 /static/image 里。但是另有一个名叫 style 的目录 ,它下面有五个子目录t1,t2,t3,t4和t5,各包含一些图片和一个风格文件(style.css)。这是因为Discuz软件除了提供安装后出现的天蓝色的网页色调(称为默认配色)外,还提供了五种其它色调(称为扩展配色)供网站用户选择,这五个子目录就对应着这五种色调,它里面的文件并不包含该色调所用的所有风格和图片,而仅包含该色调专用的图片和改写的风格部分。



模板开发
除了Discuz软件提供的默认风格模板外,Discuz网站的应用中心里也提供了很多第三方开发的风格模板。下面我们来讨论一下建造模板的步骤。
在 /template 下新建一个目录,为方便叙述起见下面我们假定它叫 mytest,加入一个名叫 discuz_style_mytest.xml 的安装文件,它的结构应该和默认模板里的相应文件相同,所以我们也可以直接拷贝那个文件过来后修改,注意我们可以添加这模板用到的变量名。

我们需要修改文件中至少以下四个参数 name, templateid, tplname, directory,使之区分于已安装的模板,其中templateid 必需与之不同。其它参数的值可以在这里初始化,比如如果这个模板里有图片,可以用styleimgdir指明图片目录的路径: <item id="imgdir"><![CDATA[template/mytest/image]]></item> <item id="styleimgdir"><![CDATA[template/mytest/image]]></item> 这个模板并不需要有完整的模板套系,它只需给出与默认模板不同的内容:在Discuz系统使用这个模板时对缺省的内容会自动使用模认模板里的相应内容。这个目录会包含一些模板文件,风格文件和图片文件:
1)如果我们要提供与默认模板里不同的模板,我们只要在相应位置建一个同名文件,比如 /template/mytest/common/header.htm 对应于 /template/default/common/header.htm,这样如果 mytest 是网站在用的模板的话,Discuz就会使用/template/mytest/common/header.htm 而不是 /template/default/common/header.htm。我们可以拷贝/template/default/common/header.htm 到 /template/mytest 里修改。
2)如果我们要提供与默认模板里不同的风格,我们不需象模板文件那样拷贝和修改整个文件来覆盖默认模板里的相应文件,而只要将不同的内容放在相应位置,但要在原文件名前加个 extend_ 的前缀,比如 /template/mytest/common/extend_common.css 对应于 /template/default/common/common.css。
3)如果我们要提供与系统里不同的图片,我们只需将这些图片放在指定的扩展图片目录。系统会先在这个目录里寻找图片,如果没有再去 /static/image/common 寻找。所以这个目录的图片会覆盖 /static/image/common 里的同名图片。

当我们建立了/template 下的一个新的子目录并添加了一个安装文件后,在管理中心的界面->风格管理里就会出现这个新风格模板,点击它旁边的安装按钮后,这个风格模板名等信息就会存入数表 common_style 而它包含的变量名则存入数表 common_stylevar内。这时在界面上就可以选择它作为网站当前使用的风格模板。
安装前:

安装后:

如果我们要把这个模板交给别人用,直接拷贝整个风格模板目录放入对方网站的相应位置再在管理中心里设置即可。如果以后对模板风格图片等有更新的话,只需拷贝覆盖原来文件。但如果添加或修改了变量名或值的话,就需先卸载再重新安装。

记得以前有一次建议某站长做个模板或是风格的修改,他问是改在默认风格模板里还是改在当前风格模板里(我机器上只有默认风格模板),我说改当前风格模板里的文件,他回答我说当前模板里没有这个文件而默认模板里有,结果就改在了默认模板里。现在我终于知道他那个模板里没那个文件的原因了。更恰当的方法也许是将那个文件从默认模板里拷贝到当前模板后再修改。保存默认模板目录不变的话方便网站Discuz软件升级。

在管理中心里还可以连到Discuz网站的应用中心下载安装第三方提供的风格模板。

DIY模块和模块模板
一些网页如门户页在功能开启时除公共的头部和底部外并没有其它内容,这些网页需要站长用DIY功能来添加各种所需的模块到网页上去,对添加的每个模块都要指明一个现有的模块数据类和一个模块模板,参见这里的介绍 (链接)。模块数据类是PHP语言定义的,存放在目录 /source/class/block 里。第三方提供风格模板时往往带着些模块和模块模板,但好像Discuz公司不允许第三方出售模块数据类。在应用中心里提供的风格模板往往要分两步安装:
1)在应用中心点击安装应用后,会将与该模板有关的文件拷贝到目录 /template 的一个子目录里去,同时将模板信息和有关的风格变量分别存入数表 common_style 和 common_stylevar 里。
2)在站长选择新风格模板称为当前模板后,在相关网页(如门户页,论坛页)上导入他们提供的DIY xml文件,该文件记载了若干他们提供的模块模板和建议添加在网页上的模块,这些内容分别存入了数表 common_block_style 和 common_block 里。


注:如果不知在管理中心里看到的可编辑内容会存在哪个数表的话,可以在文件 /install/data/install_data.sql 里查一下类似的Discuz自带的内容是由哪个命令存到数据库里去的,就能找到存储该内容的数表。


参考资料:
1) Discuz!资料库 - 模板 http://faq.comsenz.com/library/template/made/made_extend.htm
特别有对于模板制作的介绍  http://faq.comsenz.com/library/template/made/made_extend.htm
2) cr180 编写的开发手册有很有用制作模板的内容,如
2a) 模板配色方案注解图 http://discuzt.cr180.com/discuzcode-template_code_a.html
2b) 各种风格类的说明 - common.css  http://discuzt.cr180.com/discuzcode-templte_common_css.html

发表评论 评论 (57 个评论)

回复 carry0987 2018-4-25 08:37 AM
天香公主: 好啊
沒問題!!
回复 天香公主 2018-4-25 08:01 AM
carry0987: 感謝天香的救命稻草,我終於解決一個大問題了....
我打算將你寫進我的感謝名單,不知道你意下如何?
我使用這個格式:[TXGZ](你的email) ...
好啊
回复 carry0987 2018-4-25 07:34 AM
天香公主: 我按你的要求尝试了一下,见我更新过的文件 http://www.bian-wang.com/discuz/data/userupload/10005/DiscuzTemplate.zip,供参考。

在其中我新添了在模板文件 ...
感謝天香的救命稻草~
已列入感謝名單~
使用格式:[TXGZ](email)
回复 天香公主 2018-4-25 12:16 AM
carry0987: 我知道呀,但是這個方法相對麻煩,而且用不太上...所以才打算做成我描述的那個樣子,較簡單
我按你的要求尝试了一下,见我更新过的文件 http://www.bian-wang.com/discuz/data/userupload/10005/DiscuzTemplate.zip,供参考。

在其中我新添了在模板文件里加入CSS文件的语法,例如
<!--{css test3/StyleSheet1.css}-->
之所以用css标签而不用csstemplate是不想和Discuz里的csstemplate混淆,也是由于这个标签在这里没有template的含义。
另外类似于template标签的语法,我只支持一个标签里写一个CSS文件名。如果你想支持多个文件名,应该是个简单的改动。

关于verhash的处理,我们需要有个地方记录当前使用的verhash。Discuz的做法是将它存在数据库里。在每次更新缓存时,产生一个新的verhash。我们这里没有数据库,所以就效仿Akon对模板文件的更新方式,将CSS文件内容的md5 hash值以及和Discuz同样方式产生的verhash记载在一个单独的版本文件里。当md5 hash值不变时,我们就使用记载在那里的那个verhash。而当md5 hash值变动时,我们就产生一个新的verhash,并更新版本文件。

我在Template.css.php里大致添加了下面这些函数来支持这个css标签(括号里是类似的用来支持template标签的函数):
_getcssFile (_getTplFile)
_getVersionFile (_getCacheFile)
_saveVersion (cache)
_versionCheck (check)
random (拷贝自Discuz代码 source/function/function_core.php)
linkcssfile (getfile)
parse_template_callback_stripvtags_css1 (parse_template_callback_stripvtags_template1)
回复 carry0987 2018-4-24 05:00 AM
天香公主: 你知道csstemplate的意思吧?它在Discuz代码里只用到一次,就是在文件 template/default/common/header_common.htm 里有
<!--{csstemplate}-->
它的作用是将 tem ...
我知道呀,但是這個方法相對麻煩,而且用不太上...所以才打算做成我描述的那個樣子,較簡單
回复 天香公主 2018-4-23 09:46 PM
carry0987: 天香,想請教一下,discuz的header模板中,有
<!--{csstemplate}--> 這個代碼,我查找了一下後,發現定義在class_template.php 裡面,但是我看不懂它底下的
load ...
你知道csstemplate的意思吧?它在Discuz代码里只用到一次,就是在文件 template/default/common/header_common.htm 里有
<!--{csstemplate}-->
它的作用是将 template/default/common/module.css 里的内容分解成
home_space.css
forum_forumdisplay.css
之类的文件,按当前Request的script名(如home, forum)和module名(如space, forumdisplay),在Response里加入对应的css文件。和你的想法不甚匹配。
回复 carry0987 2018-4-23 07:59 PM
我試了試把常量加上去,不過似乎還是不行..
回复 carry0987 2018-4-17 05:02 AM
天香公主: 好的,我这几天特别忙,等周末再考虑下你的问题
您有空再看就行,不需要浪費週末假日啦
回复 天香公主 2018-4-16 12:58 PM
carry0987: 目前問題:
我試著使用array的方式載入css,但是不知該如何下手..
我想實驗的動作是,先定義CSS_PATH為風格文件的目錄,例如&quot;./static/css/&quot;
當遇到<!-- ...
好的,我这几天特别忙,等周末再考虑下你的问题
回复 carry0987 2018-4-16 11:59 AM
目前問題:
我試著使用array的方式載入css,但是不知該如何下手..
我想實驗的動作是,先定義CSS_PATH為風格文件的目錄,例如&quot;./static/css/&quot;
當遇到<!--{csstemplate style1 style2 style3}-->時,便自動載入位於CSS_PATH下的
style1.css, style2.css, style3.css 文件,並模仿你給我的模板引擎那樣,讀取那些css文件的md5,然後如果有更動,就在輸出的
<link href=&quot;'.CSS_PATH.$css.'.css?v={VERHASH}&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; />
中替換VERHASH常量....

不知天香有空時可否幫我看看該怎麼完善這個功能? 此為未完成的代碼:https://github.com/carry0987/MessageBoard-Beta/blob/master/csstemplate.php
回复 carry0987 2018-4-12 08:48 AM
天香公主: >>不知道有何方法可以在遇到style.css{VERHASH}時
是不是漏了个问号?,即 style.css?{VERHASH}。没看到上下文,不知(?:\?|$)是怎么用的。但我猜它已经能够排 ...
經過多次嘗試後依然不成功...我試試看把Discuz的csstemplate函數解析出來吧(Discuz的代碼真的...不是很明瞭易懂)
回复 天香公主 2018-4-9 09:06 PM
carry0987: 天香,想請教一下,discuz的header模板中,有
<!--{csstemplate}--> 這個代碼,我查找了一下後,發現定義在class_template.php 裡面,但是我看不懂它底下的
load ...
>>不知道有何方法可以在遇到style.css{VERHASH}時
是不是漏了个问号?,即 style.css?{VERHASH}。没看到上下文,不知(?:\?|$)是怎么用的。但我猜它已经能够排除{VERHASH}了吧,因为\?|$就是在看到问号或结尾就停止搜索的意思。
回复 carry0987 2018-4-9 09:38 AM
天香公主: 1. 我试了下放在templates文件夹中的任何子文件夹都行,比如
有两个模板文件test/test.htm和other/common.htm,那在前一个里可以这样嵌入后一个
    <!--{templ ...
天香,想請教一下,discuz的header模板中,有
<!--{csstemplate}--> 這個代碼,我查找了一下後,發現定義在class_template.php 裡面,但是我看不懂它底下的
loadcsstemplate()函數..
我個人研究了一下,只知道 ([^\/]*?)(?:\?|$) 是可以抓取網址後面的文件名稱的,如 www.example.com/css/style.css 會取得 style.css 這樣,那,不知道有何方法可以在遇到style.css{VERHASH}時,自動使用上面所提到的正則以獲取{VERHASH}前面的style.css?
P.S. 單純想要加入Discuz能夠解析 css文件的md5 校驗碼的功能,並沒有要class_template.php那樣如此複雜的功能..
回复 carry0987 2018-4-7 12:48 AM
天香公主: 1. 我试了下放在templates文件夹中的任何子文件夹都行,比如
有两个模板文件test/test.htm和other/common,那在前一个里可以这样嵌入后一个
    <!--{template  ...
原來如此,謝謝天香~
回复 天香公主 2018-4-6 08:58 PM
carry0987: 可以了欸! 原來它是這樣用的...直接載入getfile語句
那,有兩個疑問:
1. 放在別的資料夾也可以用嗎?
例如<!--{template /other/common.htm}-->

2. 你給我的exam ...
1. 我试了下放在templates文件夹中的任何子文件夹都行,比如
有两个模板文件test/test.htm和other/common.htm,那在前一个里可以这样嵌入后一个
    <!--{template other/common.htm}-->
2. 好象不是这意思,只是允许类似下面的写法:
    $template->setOptions(array(
        'template_dir' => 'templates/default/',
        'cache_dir' => 'templates/cache'
    ));
回复 carry0987 2018-4-6 02:17 AM
天香公主: 刚更新了我的下载文件,现在应该是可用了。比如templates文件夹里有两个模板文件test.htm和common.htm。在第一个里可以如下加入第二个:
    <!--{template comm ...
可以了欸! 原來它是這樣用的...直接載入getfile語句
那,有兩個疑問:
1. 放在別的資料夾也可以用嗎?
例如<!--{template /other/common.htm}-->

2. 你給我的example.php有個 [用于批量设置时使用]
$template->setOptions(array('template_dir' => 'templates/default/'));
這難道是指可以可以載入多個模板文件夾? 那該如何使用呢?
回复 天香公主 2018-4-5 08:28 PM
carry0987: 對了,<!--{template common/header}-->
好像不能用,雖然有解析,但是沒有相對應的function template(),天香你知道要怎麼加入嗎? ...
刚更新了我的下载文件,现在应该是可用了。比如templates文件夹里有两个模板文件test.htm和common.htm。在第一个里可以如下加入第二个:
    <!--{template common.htm}-->
回复 carry0987 2018-4-5 09:21 AM
對了,<!--{template common/header}-->
好像不能用,雖然有解析,但是沒有相對應的function template(),天香你知道要怎麼加入嗎?
回复 carry0987 2018-4-5 07:11 AM
天香公主: 估计你研究和对比下模板文件内容和从模板文件自动生成的php文件内容之间的联系就可以回答你的问题。在Discuz里这些文件生成在data/template里,在Akon的文件里这 ...
我找到問題了,原來是因為我在include那些html模板文件時,它是直接連結起來的,所以每個文件之間都是直接合併,才會造成這種問題
我在file_put_contents那邊加上了/n解決了換行問題
回复 天香公主 2018-4-5 06:59 AM
carry0987: 測試完畢,目前來看是沒問題了
那,順便問下,這個class是怎麼讀取html中的格式呢?
因為我發現一個問題,就是在查看源碼時,會發現換行或縮排被打亂了,
主要發 ...
估计你研究和对比下模板文件内容和从模板文件自动生成的php文件内容之间的联系就可以回答你的问题。在Discuz里这些文件生成在data/template里,在Akon的文件里这些文件生成在templates/cache里。
123下一页

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 立即注册

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2018-11-20 04:27 PM , Processed in 0.061736 second(s), 11 queries. ,ApcOn

返回顶部