xoops theme 教學

XOOPS Theme 设计宝典

北京众锐普斯信息技术有限公司陈伟(domecc) 2007年8月23日

曾经有人说XOOPS的风格很难看，曾经有人说XOOPS的风格设计很难，曾经有人说XOOPS的风格设计功能太弱。。。。。。。。。

其实，这都是谬论，不经大脑思考的谬论！！真实的情况是：

XOOPS风格漂亮与否，完全取决于设计师的设计水准，与技术无关；XOOPS风格设计难度，比WordPress还简单，不必懂php就可以设计；XOOPS的功能已经足够强大，只有你想不到的，没有XOOPS做不到的。。。。。。。。。

希望《XOOPS Theme设计宝典》能带给你正确的判断，Let‘s Go!!!

第2页

常见疑问解答


问：我已经会Photoshop + HTML + CSS等静态网页设计技能了，现在学习XOOPS的theme设计困难吗？

答：有HTML+CSS基础的人学习起来超级容易！

问：设计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

MySQL

…

让视觉设计师专注于网页排版，让网页看起来更具有专业感

Photoshop

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

第14页

<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变量的含义，在适当位置插入即可！！

2、程序开发员设计PHP程序: webroot/sample.php

第15页

<?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‘);?>

浏览器执行webroot/sample.php后生成的源文件：

第16页

<html><head><title>Smarty sample</title></head><body>

num1 = 1000<br />num2 = 2000<br />num1 + num2 = <span style=―color:#FF0000;‖>3000<span>

</body></html>

在template_c可看到经过smarty编译后的模板：

webroot/templates_c/%%98^984164B3%%sample.html.php

第17页

<?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>

1、XOOPS的theme（主题、风格模板）主要就是由Smarty的template（数据模板）组成

第18页

2、theme会调用每个模块的templates

第19页

3、 Smarty编译后带有变量的PHP文件，会出现在XOOPSROOT/templates_c文件夹中

第20页

4、 Smarty在处理完模板时，会将产生的结果复制一份到XOOPSROOT/cache缓存文件夹中

第21页

5、XOOPS ROOT/class/smarty文件夹，其中可以为XOOPS自定义合适的plugins

第22页

第23页

视觉设计师独步江湖的秘诀Smarty在XOOPS中的用法


Smarty的默认标签语法：{ 和 }

XOOPS中的Smarty标签：<{ 和 }>

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_topleft 或者 $xoops_clblocks

中上中区块：$xoBlocks.page_topcenter 或者 $xoops_ccblocks

中上右区块：$xoBlocks.page_topright 或者 $xoops_crblocks

中下左区块：$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

案例：

第30页

<{if $xoops_showrblock == 1}><{foreach item=block from=$xoops_rblocks}>

<{include file="default/theme_blockright.html"}><{/foreach}>

<{/if}>

正文内容左右

中上中

中上左中上右

中下中

中下左中下右

用户相关的变量 <{$xoops_userid}> - 用户ID

<{$xoops_uname}> - 用户姓名 <{$xoops_isuser}> - 如果是注册用户则为1，否则为0

<{$xoops_isadmin}> - 如果是管理员则为1，否则为0 注意：管理员是指当前模块的管理员，不是全站的

<{$user_method}> - 注册用户在个人资料中所选择的通知方式

模块输出页面相关的变量 <{$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页

第32页

访问常数：<{$smarty.const.常数名}>

第33页

定义常数：define(“常数名”，“值”)

通常以下划线“_”开头通常在语言包中定义，可以针对不同语言定义不同的值

条件语句

<{if 判断语句1}>

执行任务1

<{else}>

执行任务2

<{/if}>

第34页

<{if 判断语句1}>执行任务1

<{elseif 判断语句2}>执行任务2

<{else}>执行任务3

<{/if}>

循环语句 <{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的安装与剖析


1. 上传yourtheme文件夹到XOOPS/themes/

请确保theme核心文件theme.html的安装路径正确

XOOPS/themes/yourtheme/theme.html

请不要在XOOPS/themes/目录中放置非theme的文件夹

2. 在―后台/系统/系统参数/基本参数设置‖指定默认theme

第42页

XOOPS/themes/default/theme.html

第43页

第44页

请打开上述两个theme的theme.html

default

Mor.pho.GEN.e.sis

详细地看看每一行代码

如果有任何疑惑，请参考之前Smarty基础知识

直到你看懂每一行代码，才可继续往下。。。

第45页

Theme设计高级进阶


第47页

正文内容左右

中上中

中上左中上右

中下中

中下左中下右

第48页

正文内容A B

C

D E

F

G H

正文内容左右

中上中

中上左中上右

中下中

中下左中下右

正文内容左右

中上中

中上左中上右

中下中

中下左中下右

左\中\右等八个区块位置仅仅是形象概念而已，我们完全可以重新命名为ABCDEFGH等任意名称

第49页

正文内容A

C

D E

F

G H

正文内容 B

C

D E

F

G H

正文内容正文内容A B

CD E

FG H

正文内容A B

CD E

FG H

正文内容B A

C

D E

F

G H

正文内容A B

C

D E

F

G H

正文内容

AC

D E

F

G HB

第50页

原理：想办法把区块从某个区块位置中提取出来，然后把它们放置到网页中的任意位置。

正文内容A B

C

D E

F1 F2 F3 F4

G H

页眉

页脚

正文内容F2A B

C

D E

F3

G H

页眉 F1

页脚 F4

提取重组

第51页

XOOPS会给每个区块设置一个唯一的ID，因此可用于控制

第52页

代码实现：

具体的区块位置(from值)和$block.id值要看后台的区块设置

至于include的文件则可以自行任意定义

<{foreach item=block from=$xoBlocks.page_bottomcenter}><{if $block.id eq 206}>

<{include file=―$xoops_theme/theme_blockcenter_c.html‖}><{/if}>

<{/foreach}>

第53页

XOOPS China的fragttdg在秀贝(YIYYA宝贝)项目中的代码片断

问题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页

第55页

问题2：使用$block.id提取出区块进行任意布局后，原来的区块位置还会出现该区块，因此区块会重复显示。

正文内容A B

C

D E

F1 F2 F3 F4

G H

页眉

页脚

正文内容F2A B

C

D E

F1 F2 F3 F4

G H

页眉 F1

页脚 F4

提取重组

解决策略：把xoops默认的八个区块位置的其中之一，专门作为放置“希望任意布局的区块”，同时把该区块位置从theme布局中删除，这样就可以避免区块的重复显示了。

第56页

F

自由布局的区块位置F1 F2

F3 F4

……

正文内容A B

C

D E

F1 F2 F3 F4

G H

页眉

页脚

策略正文内容F2

F3

A B

C

D E

G H

页眉F1

页脚F4

未来的XOOPS将为区块输出两组变量：

一组依然保持现状，把它们添加到各区块位置

另一组则是为每个区块输出独立变量，以便单独控制。

如果实现第2组变量的话，那么―实现XOOPS区块的任意布局‖就简单多了，直接引用相应的区块变量，然后放置到网页的适当位置即可。

第57页

二、自由添删改区块内容

三、设置独特CSS属性 class id

第58页

一、判断

<{if 判断语句1}>执行任务1

<{elseif 判断语句2}>执行任务2

<{else}>执行任务3

<{/if}>

典型应用案例1，如：blockleft.html

第59页

<{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}>

典型应用案例2，如：blockright.html

第60页

<{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}>

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页

人外有人，天外有天


区块(block)可以说是XOOPS Theme设计中最重要的概念之一，是theme的基本构成单位。

然而，xoops默认的block管理应付小站点还可以，对于大型的网站，当有大量的block时，要查找和管理某一个区块就比较麻烦了。

为此，日本的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常用代码及相关资源


<{if !$xoops_isuser}>

<form action="<{$xoops_url}>/user.php" method="post">

<label for="uname"><{$smarty.const._USERNAME}></label><input type="text" name="uname" id="uname" size="10" maxlength="25" style="width: 80px;"/>

<label for="pass"><{$smarty.const._PASSWORD}></label><input type="password" name="pass" id="pass" size="10" maxlength="32" style="width: 80px;" />

<input type="hidden" name="xoops_redirect" value="<{$xoops_requesturi}>" />

<input type="hidden" name="op" value="login" />

<input type="submit" class="loginbtn" value="<{$smarty.const._LOGIN}>" />

<a href="<{$xoops_url}>/user.php#lost"><{$smarty.const._MB_SYSTEM_LPASS}></a>

<a href="<{$xoops_url}>/register.php"><{$smarty.const._MB_SYSTEM_RNOW}></a>

</form>

<{else}>

<span class="bold" style="padding-left:20px;">»</span>

<span><{$xoops_uname}>:</span>

<{if $xoops_isadmin}>

<span><a href="<{$xoops_url}>/admin.php"><{$smarty.const._MB_SYSTEM_ADMENU}></a></span>

<{/if}>

<span><a href="<{$xoops_url}>/user.php"><{$smarty.const._MB_SYSTEM_VACNT}></a></span>

<span><a href="<{$xoops_url}>/edituser.php"><{$smarty.const._MB_SYSTEM_EACNT}></a></span>

<span><a href="<{$xoops_url}>/user.php?op=logout"><{$smarty.const._LOGOUT}></a></span>

<{/if}>

第70页

为XOOPS定制的Smarty Plugins：xoInboxCount xoops_plugins/function.xoInboxCount.php

第71页

<{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}>

<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/

jQuery: JavaScript Library

http://jquery.com/

第74页

Theme设计的调试


第76页

打开Smarty侦错模式

选择―从/themes/yourtheme/templates更新模块的模板文件‖

不要使用模块缓存

清空XOOPS/template_c/文件夹中的编译文件，但如果有index.html，则要保留

清空XOOPS/cache/文件夹中的缓存文件，但如果有index.html，则要保留

清空浏览器缓存，如果有必要，甚至重启浏览器

第77页

第78页

第79页

UTF-8编码的theme


乱码~~~

变量结果输出错误

无故出现空白行

。。。。。。

第81页

第82页

第83页

第84页

第85页

第86页

第87页

功夫在诗外……


完美的theme仅仅靠技术是解决不了的，更重要的，还要有来自设计师的艺术智慧！

只有你想不到的，没有XOOPS做不到的。

xoops theme 教學

Documents