Professional Documents
Culture Documents
其实,这都是谬论,不经大脑思考的谬论!!真实的情况是:
XOOPS风格漂亮与否,完全取决于设计师的设计水准,与技术无关;
XOOPS风格设计难度,比WordPress还简单,不必懂php就可以设计;
XOOPS的功能已经足够强大,只有你想不到的,没有XOOPS做不到的
。。。。。。。。。
第2页
常见疑问解答
问:设计XOOPS theme有什么特殊的技能要求?
答:除了HTML+CSS外,再学习一点Smarty基础即可。
问:XOOPS theme设计有什么局限吗?
答:XOOPS的theme设计机制非常灵活,只要设计师能
设计出平面图,XOOPS都能轻易实现。theme漂亮与否,
完全取决于设计师的设计水准,XOOPS没有任何限制!!
第4页
XOOPS theme的核心文件是theme.html
theme.html 的位置:XOOPS/themes/yourtheme/theme.html
theme.html的内容可以是任意的:
如果空白,那么整个网站就只能输出空白网页;
如果是静态HTML,那么就是静态网站;
如果使用了XOOPS定义的一些smarty变量,那么就是真正的
功能强大的XOOPS动态网站了。
因此,区别仅仅在于多了几个Smarty变量而已!
如果我们能掌握十多个常用的Smarty变量,就
能进行XOOPS theme设计!!
第5页
Smarty入门
第7页
斯密(Adam Smith)在1776年发表
亚当·
的《国富论》中,以制造针为例来说明分工
的好处:
经由分工,将整个制造程序―分为十八个阶段,
每一个阶段都雇用技艺熟练的好手……我曾
看到一家很小的工厂中,一共只雇用十个工
人,但每天可以生产四万八千根针。‖ 他指
出,―这是由于正确的分工和将他们困难的作
业适当编组起来的结果。 ‖
经济学界的“至圣先师”
第8页
其实,早在公元前300多年,
苏格拉底的学生Xenophon
(瑟诺芬,430–355 B.C.)
就对劳动分工作了如下论述:
―在制鞋工厂中,一个人只
以缝鞋底为业,另一个人进
行剪裁,还有一个人制造鞋
帮,再由一个人专门把各种
部件组装起来。这里所遵循
的原则是:一个从事高度专
业化工作的人一定能工作得
最好。 ‖
第9页
让程序开发员专注于 让视觉设计师专注于
数据、逻辑的控制或 网页排版,让网页看
功能的达成 起来更具有专业感
PHP Photoshop
MySQL HTML
… CSS
…
合理分工的关键在于合作双方有衔接点
第10页
Template Engine
第11页
第12页
Smarty是唯一出现在PHP官方
网站(*.php.net)里的模板引擎。
Smarty是编译型的模板引擎:
对于已经编译过的网页,如果模
板没有变动的话,Smarty就自动
跳过编译的动作,直接执行编译
过的网页,以节省编译的时间。
Cache 机 制 : Cache 机 制 不 仅
能减少系统与数据库的负担,而
且也能节省页面产生的时间,从
而大大提高网站的执行效率。
多样化的Plugins:除了Smarty
内置的众多Plugins外,我们可根
据自己的需要自行创建Plugins。
第13页
1、视觉设计师设计smarty模板: webroot/templates/sample.html
<html>
<head>
<title>Smarty sample</title>
</head>
<body>
num1 = 1000<br />
num2 = 2000<br />
num1 + num2 = <span style=―color:#FF0000;‖><{$num3}><span>
</body>
</html>
视觉设计师只要知道smarty变量的含义,在适当位置插入即可!!
第14页
2、程序开发员设计PHP程序: webroot/sample.php
<?php
//加载smarty类文件
include (‗Smarty/Smarty.class.php‘);
//创建smarty对象
$smarty = new Smarty();
//定义smarty的工作路径
$smarty->template_dir = ―c:/webroot/templates/‖;
$smarty->compile_dir = ―c:/webroot/templates_c/‖;
//应用程序运算逻辑
$num1 = 1000;
$num2 = 2000;
$num3 = $num1 + $num2;
//定义smarty变量
$smarty->assign(‗num3‘, $num3);
//输出结果到smarty模板
$smarty->display(‗sample.html‘);
?>
第15页
浏览器执行webroot/sample.php后生成的源文件:
<html>
<head>
<title>Smarty sample</title>
</head>
<body>
num1 = 1000<br />
num2 = 2000<br />
num1 + num2 = <span style=―color:#FF0000;‖>3000<span>
</body>
</html>
第16页
在template_c可看到经过smarty编译后的模板:
webroot/templates_c/%%98^984164B3%%sample.html.php
<?php /* Smarty version…, created on… compiled from sample.html */>
<html>
<head>
<title>Smarty sample</title>
</head>
<body>
num1 = 1000<br />
num2 = 2000<br />
num1 + num2 = <span style=―color:#FF0000;‖>
<?php echo $this->_tpl_vars[‘num3’]; ?>
<span>
</body>
</html>
第17页
1、XOOPS的theme(主题、风格模板)主要就是由Smarty的
template(数据模板)组成
第18页
2、theme会调用每个模块的templates
第19页
3、 Smarty编译后带有变量的PHP文件,会出现在XOOPS
ROOT/templates_c文件夹中
第20页
4、 Smarty在处理完模板时,会将产生的结果复制一份到XOOPS
ROOT/cache缓存文件夹中
第21页
5、XOOPS ROOT/class/smarty文件夹,其中可以为
XOOPS自定义合适的plugins
第22页
第23页
视觉设计师独步江湖的秘诀
Smarty在XOOPS中的用法
HTML的标签语法:< 和 >
PHP的标签语法:<?php 和 ?>
第25页
引用Smarty变量:<{$变量}>
定义Smarty变量:
在模板内定义变量:
<{assign var=变量名称 value=值}>
在PHP中定义变量:
$smarty->assign(„var‟, $num)
第一个参数是smarty变量
第二个参数是PHP变量,是真正要显示的值
变量类型还可以是数组、对象
第26页
网站相关的变量
<{$xoops_sitename}> - 网站名称
<{$xoops_slogan}> - 网站口号
<{$xoops_charset}> - 网页编码(字符集),如UTF-8 ,GB2312
<{$xoops_langcode}> - 语言代码,如en,zh-CN
<{$xoops_banner}> - 广告内容:系统/广告管理
<{$xoops_footer}> - 页脚信息
Meta相关的变量
<{$xoops_meta_keywords}> - Meta关键词
<{$xoops_meta_description}> - Meta网站描述
<{$xoops_meta_copyright}> - Meta版权
<{$xoops_meta_robots}> - Meta机器人
<{$xoops_meta_rating}> - Meta等级
<{$xoops_meta_author}> - Meta作者
第27页
XOOPS相关的变量
<{$xoops_version}> - XOOPS版本
<{$xoops_rootpath}> - XOOPS的安装路径
<{$xoops_upload_url}> - XOOPS uploads目录的URL
<{$xoops_url}> - 网站根目录的URL
URL最后不包括斜杆,如,http://www.yourdomain.com
它不同于域名,可以在服务器子目录,如,http://localhost/yourdomian.com
<{$xoops_js}> - xoops默认的javascript:ROOT/include/xoops.js
Theme相关的变量
<{$xoops_theme}> - 当前theme文件夹的名称
使用include语句时,尽量使用该变量,以加强theme迁移的灵活性
<{$xoops_themecss}> - 当前theme默认css文件的URL
若有css目录,则http://www.yourdomain.com/themes/yourtheme/css/style.css
否则,http://www.yourdomain.com/themes/yourtheme/style.css
系统还可自动判断浏览器而选择style.css或styleNN.css、styleMAC.css
<{$xoops_imageurl}> - 当前theme文件夹的URL
该URL最后包括的斜杆,http://www.yourdomain.com/themes/yourtheme/
第28页
区块位置相关的变量
左区块:$xoBlocks.canvas_left 或者 $xoops_lblocks
右区块:$xoBlocks.canvas_right 或者 $xoops_rblocks
中下中
中下左区块:$xoBlocks.page_bottomleft
中下左 中下右
中下中区块:$xoBlocks.page_bottomcenter
中下右区块:$xoBlocks.page_bottomright
区块标题 区块相关的变量
<{$block.id}> - 区块ID,每个区块安装后都有唯一的ID
区块内容 <{$block.title}> - 区块标题
<{$block.content}> - 区块内容
第29页
判断区块位置是否有区块的变量
$xoops_showlblock:
若$xoBlocks.canvas_left或$xoops_lblocks非空, 中上中
则$xoops_showrblock值为1,否则为0
中上左 中上右
$xoops_showrblock:
若$xoBlocks.canvas_right或$xoops_lblocks非空,
左 正文内容 右
则$xoops_showrblock值为1,否则为0
$xoops_showcblock: 中下中
若以下三个任何一个非空:$xoBlocks.page_topleft、
$xoBlocks.page_topcenter、$xoBlocks.page_topright, 中下左 中下右
则$xoops_showcblock值为1,否则为0
案例:
模块输出页面相关的变量
<{$xoops_dirname}> - 当前模块的目录名称
<{$xoops_contents}> - 模块输出的页面内容
<{$xoops_pagetitle}> - 模块输出的页面标题
<{$xoops_module_header}> - 模块输出的header内容
<{$SCRIPT_NAME}> - 当前访问页面的php文件
注意:该变量名必须使用大写
输出结果,如,XOOPS_ROOT_PATH/modules/news/index.php
<{$xoops_requesturi}> - 当前访问页面的URI
输出结果,如,/modules/news/article.php?storyid=1
第31页
访问常数:<{$smarty.const.常数名}>
第32页
定义常数:define(“常数名”,“值”)
通常以下划线“_”开头
通常在语言包中定义,可以针对不同语言定义不同的值
第33页
条件语句
<{if 判断语句1}> <{if 判断语句1}>
执行任务1
执行任务1
<{elseif 判断语句2}>
<{else}> 执行任务2
执行任务2 <{else}>
执行任务3
<{/if}> <{/if}>
第34页
循环语句
<{foreach item=数组元素名称 from=$数组变量 key=数
组索引名称 name=foreach名称}>
。。。
<{/foreach}>
案例:
<{foreach item=block from=$xoops_lblocks}>
<div class="blockTitle"><{$block.title}></div>
<div class="blockContent"><{$block.content}></div>
<{/foreach}>
第35页
嵌套语句
<{include file=模板文件路径}>
注意:模板文件的路径相对于“XOOPS/themes/”
案例:
<{foreach item=block from=$xoops_lblocks}>
<{include file="default/theme_blockleft.html"}>
<{/foreach}>
第36页
foreachq:循环语句,用于替代foreach
xoops_plugins/compiler.foreachq.php
案例:
<{foreachq item=block from=$xoops_lblocks}>
<div class="blockTitle"><{$block.title}></div>
<div class="blockContent"><{$block.content}></div>
<{/foreach}>
注意:结束标签依然使用<{/foreach}>,而不是<{/foreachq}>
includeq :嵌套语句,用于替代include
xoops_plugins/compiler.includeq.php
案例:<{includeq file=模板文件路径}>
foreachq、includeq与foreach、include的区别:
主要区别在编译后的Smarty代码: foreach/include会在调用foreach或include的
时候把现有的变量做一个备份,这样是安全的,但是大部分情况下是没有必要的,
做了备份会增加内存消耗,同时降低速度;而foreachq/includeq则没有备份。
第37页
xoAppUrl:
xoops_plugins/compiler.xoAppUrl.php
案例:
<{xoAppUrl /}>:输出结果与<{$xoops_url}>相同
<{xoAppUrl modules/something/yourpage.php}>
<{xoAppUrl "modules/something/yourpage.php?order=`$sortby`"}>
xoImgUrl :
xoops_plugins/compiler.xoImgUrl.php
案例:
<{xoImgUrl style.css}>
<{xoImgUrl icons/action/zoom_in.png}>
使用xoAppUrl和xoImgUrl的好处:在其基础上,可以实现URL重写
注意:
xoAppUrl和xoImgUrl是函数方法,而不是变量
未来的theme设计中,将大量使用这两个plugin,参见Mor.pho.GEN.e.sis
第38页
在Smarty模板中直接使用PHP代码
<{php}>
your php codes here
<{/php}>
用$smarty.now定制日期、时间格式
<{$smarty.now|date_format:"%a, %b %e, %Y | %H:%M %Z"}>
short-form date and time: Fri, Jun 18, 2004 | 08:18:00 PDT
<{$smarty.now|date_format:"%A, %B %e, %Y | %H:%M %Z"}>
long-form date and time: Friday, June 18, 2004 | 08:18:00 PDT
注意:smarty.now定义的是服务器时间,不是本地电脑的时间
更多Smarty语法
http://smarty.php.net
第39页
http://www.myxoops.com/
$20.00
第40页
Theme的安装与剖析
2. 在―后台/系统/系统参数/基本参数设置‖指定默认theme
第42页
XOOPS/themes/default/theme.html
第43页
第44页
请打开上述两个theme的theme.html
default
Mor.pho.GEN.e.sis
详细地看看每一行代码
如果有任何疑惑,请参考之前Smarty基础知识
直到你看懂每一行代码,才可继续往下。。。
第45页
Theme设计高级进阶
中上左 中上右
左 正文内容 右
中下中
中下左 中下右
第47页
中上中 C
中上左 中上右 D E
左 正文内容 右 A 正文内容 B
中下中 F
中下左 中下右 G H
左\中\右等八个区块位置仅仅是形象概念而已,
我们完全可以重新命名为ABCDEFGH等任意名称
第48页
D E
D C E
C C
B 正文内容 A A 正文内容 B 正文内容
D E G H
F G F H
A 正文内容 B
C C C
A
F D E D E D E
A 正文内容 正文内容 B 正文内容
G H F F F
B
G H G H G H
第49页
原理:想办法把区块从某个区块位置中提取出来,然后把它们放置到
网页中的任意位置。
页眉 页眉 F1
C C
D E D E
提取
A 正文内容 B 重组 A 正文内容F2 B
F1 F2 F3 F4 F3
G H G H
页脚 页脚 F4
第50页
XOOPS会给每个区块设置一个唯一的ID,因此可用于控制
第51页
代码实现:
具体的区块位置(from值)和$block.id值要看后台的区块设置
至于include的文件则可以自行任意定义
第52页
XOOPS China的fragttdg在秀贝(YIYYA宝贝)项目中的代码片断
第53页
问题1:
XOOPS >= 2.0.17可直接使用$block.id
XOOPS < 2.0.17则不能直接使用$block.id
解决办法:2.0.17之前的版本需要如下hack:
找到class/theme_blocks.php的函数buildBlock
在„title‟=> $xobject->getVar( „title‟ )的后面
加上'id‟=> $xobject->getVar( 'bid' )
第54页
问题2:使用$block.id提取出区块进行任意布局后,原来的区块位置
还会出现该区块,因此区块会重复显示。
页眉 页眉 F1
C C
D E D E
提取
A 正文内容 B 重组 A 正文内容F2 B
F1 F2 F3 F4 F1 F2 F3 F4
G H G H
页脚 页脚 F4
第55页
解决策略:把xoops默认的八个区块位置的其中之一,专
门作为放置“希望任意布局的区块”,同时把该区块位置从
theme布局中删除,这样就可以避免区块的重复显示了。
页眉 页眉F1
C C F
自由布
D E D E
局的区
块位置
A 正文内容 B 策略 A 正文内容 B
F1 F2
F2
F3 F4
F1 F2 F3 F4 F3
……
G H G H
页脚 页脚F4
第56页
未来的XOOPS将为区块输出两组变量:
一组依然保持现状,把它们添加到各区块位置
另一组则是为每个区块输出独立变量,以便单独控制。
如果实现第2组变量的话,那么―实现XOOPS区块
的任意布局‖就简单多了,直接引用相应的区块变
量,然后放置到网页的适当位置即可。
第57页
一、判断 二、自由添删改区块内容
第58页
典型应用案例1,如:blockleft.html
<{if $block.id eq 3}>
<div class="blockContentLogin"><{$block.content}></div>
<{elseif $block.id eq 6}>
<div class="blockTitleUser"><{$block.title}></div>
<div class="blockContentUser"><{$block.content}></div>
<{elseif $block.id eq 9}>
<div class="blockPoll">
<div class="blockTitlePoll"><{$block.title}></div>
<div class="blockContentPoll"><{$block.content}></div>
</div>
<{else}>
<div class="blockTitle"><{$block.title}></div>
<div class="blockContent"><{$block.content}></div>
<{/if}>
第59页
典型应用案例2,如:blockright.html
<{if $block.title == "要闻公告"}>
<div class="blockTitle">
<div class="blockTitle"><{$block.title}></div>
<div class="blockTitleMore"><a href="<{$xoops_url}>/modules/news/">more</a></div>
<div class="clear"></div>
</div>
<div class="blockContent"><{$block.content}></div>
<{elseif $block.title == "论坛热帖"}>
<div class="blockTitle">
<div class="blockTitle"><{$block.title}></div>
<div class="blockTitleMore"><a href="<{$xoops_url}>/modules/bbs/">more</a></div>
<div class="clear"></div>
</div>
<div class="blockContent"><{$block.content}></div>
<{else}>
<div class="blockTitle"><{$block.title}></div>
<div class="blockContent"><{$block.content}></div>
<{/if}>
第60页
Template Overriding(模板覆写):添加自定义的模板(template)到
风格(theme)中,这些自定义的模板将会取代默认的模板。
要使用这个功能,自定义的模板文件必须放在当前风格的文件夹之中,
而且其目录结构一定要这样——复制原来模板文件所在的目录结构,但
要删除其中的―templates‖,如:
案例1:为了覆写modules/system/templates/system_userinfo.html,
必须创建这样的目录结构<yourthemefolder>/modules/system/system_userinfo.html,
然后根据需要修改system_userinfo.html即可。
案例2:为了覆写modules/system/templates/blocks/system_block_login.html,
必须这样创建<yourthemefolder>/modules/system/blocks/system_block_login.html,
然后根据需要修改system_block_login.html即可
第61页
为设计者准备的输出资源覆写(Output resources overriding)
如果模块提供了上述输出资源覆写的支持,那么设计者就可以通过使
用模板文件中类似的结构,为绝大多数输出资源提供自定义的版本,
如:
案例1:为了创建自定义的CSS,以便覆盖
modules/newbb/style.css,可以创建这样的文件
<yourthemefolder>/modules/newbb/style.css;
案例2:为了创建自定义的图片,以便覆盖
modules/newbb/images/reply.png,可以创建这样的文件
<yourthemefolder>/modules/newbb/images/reply.png
第62页
优先采用模块的canvas.html,否则采用默认canvas.html
第63页
xoops/themes/yourtheme/theme.html
如果模块目录下有canvas.html,则优先采用,否则采用默认的canvas.html
如果模块目录下有style.css,则自动添加该css到<{$xoops_module_header}>
定义了两个好用的变量:
<{$xoops_themeurl}>:http://www.yourdomain.com/themes/yourtheme
<{$xoops_module_theme}>:yourtheme/modules/yourmodule
第64页
至此,你已学会了XOOPS Theme设计的经典秘
籍,但要设计出适合的、有创意的theme,还得
开动你的智慧,多观摩各位前辈的设计,更重要
地是多实践体会,才能灵活、熟练地应用秘籍中
的每一招每一式,最终达到无剑胜有剑的境界。
请细细把玩kaifulee.com的theme,体会其中所
蕴藏的智慧吧。
第65页
人外有人,天外有天
为此,日本的PEAK XOOPS开发了模块blocksadmin,大大方便了区块管
理;不过blocksadmin只支持XOOPS=<2.0.13,因为它只管理原来的5个
区块位置,而不是xoops>=2.0.14的8个区块位置。
后来,PEAK XOOPS又开发了模块altsys,用于替代blocksadmin,不过目
前还处于开发版,大家可关注其发展:http://xoops.peak.ne.jp/
XOOPS China的ncnynl曾在kaifulee.com项目中,参考blocksadmin的原
理,对XOOPS核心作了相应改造,大大方便了后期管理。
对于某些theme更复杂,或者对性能要求更高的网站,也许就需要通过模块
来管理theme了。
大家比较熟悉的就要数XOOPS China的文明猪发布的page模块了,此外我
所知道的还有XOOPS China的agl在lvye.info项目中开发的theme管理模
块。这些模块的功能确实很强大,灵活而且方便。
不过,我要告诉大家的是,如果你不是程序员,请不要轻易决定使用这些模
块,因为它们都对XOOPS核心作了hack,是非标准的,这将不利于今后的
维护、升级。
从D.J.(phppp)那里了解到,在XOOPS的未来版本中, XOOPS官方的核心
开发团队将参考这些theme管理模块中所蕴含的智慧,开发更有生命力、更
易为大家所接受的theme内核,期待!
第68页
Theme常用代码及相关资源
第70页
为XOOPS定制的Smarty Plugins:xoInboxCount
xoops_plugins/function.xoInboxCount.php
<{if $xoops_isuser}>
<a href="<{$xoops_url}>/user.php">帐号信息</a>
<a href="<{$xoops_url}>/viewpmsg.php">短信箱
<{xoInboxCount assign=pmcount}>
<{if $pmcount}>
<span style="font-weight: bold;―>(<{xoInboxCount}>)</span>
<{/if}>
</a>
<a href="<{$xoops_url}>/user.php?op=logout">退出</a>
<{/if}>
第71页
<form name="search" method="get" action="<{xoAppUrl /search.php}>">
<input type="text" name="query" maxlength="255" tabindex="1" />
<input type="hidden" name="action" value="results" />
<input type="submit" value="<{$smarty.const._SEARCH}>"
tabindex="2" />
</form>
第72页
XOOPS/include/common.php
// ####### Include theme lang file - Morphogenesis #######
if ( file_exists(XOOPS_ROOT_PATH."/language/".$xoopsConfig['language']."/theme.php") ) {
include_once XOOPS_ROOT_PATH."/language/".$xoopsConfig['language']."/theme.php";
} else {
include_once XOOPS_ROOT_PATH."/language/english/theme.php";
}
// ####### End Morphogenesis
Yahoo! UI Library
http://developer.yahoo.com/yui/
第74页
Theme设计的调试
选择―从/themes/yourtheme/templates更新
模块的模板文件‖
不要使用模块缓存
第76页
清空XOOPS/template_c/文件夹中的编译文件,
但如果有index.html,则要保留
清空XOOPS/cache/文件夹中的缓存文件,但如
果有index.html,则要保留
清空浏览器缓存,如果有必要,甚至重启浏览器
第77页
第78页
第79页
UTF-8编码的theme
第81页
第82页
第83页
第84页
第85页
第86页
第87页
功夫在诗外……
只有你 想不到 的 ,没
有XOOPS做不到的。