您的位置：首页 > 编程语言 > PHP开发

Yii Framework 开发教程(47) 主题 Theme 示例

2014-01-20 12:58 211 查看


Theming是一个在Web应用程序里定制网页外观的系统方式。通过采用一个新的主题，可以非常方便的改变应用的外观。

在Yii，每个主题由一个目录代表，包含view文件，layout文件和相关的资源文件，如图片， CSS文件， JavaScript文件等。主题的名字就是他的目录名字。全部主题都放在在同一目录
WebRoot/themes
下 。在任何时候，只有一个主题可以被激活。

提示：默认的主题根目录
WebRoot/themes
可被配置成其他的。只需要配置themeManager应用部件的属性basePath和baseUrl为你所要的值。

要激活一个主题，设置Web应用程序的属性theme为你所要的名字。可以在application
configuration中配置或者在执行过程中在控制器的动作里面修改。

注：主题名称是区分大小写的。如果您尝试启动一个不存在的主题， 
yii:
:app()->theme
将返回
null
。

主题目录里面内容的组织方式和application
base path目录下的组织方式一样。例如，所有的view文件必须位于
views
下 ，布局view文件在
views/layouts
下
，和系统view文件在
views/system
下。例如，如果我们要替换
PostController
的
create
view文件为
classic
主题下，我们将保存新的view文件为
WebRoot/themes/classic/views/post/create.php
。

对于在module里面的控制器view文件，相应主题view文件将被放在
views
目录下。例如，如果上述的
PostController
是在一个命名为
forum
的模块里
，我们应该保存
create
view 文件为
WebRoot/themes/classic/views/forum/post/create.php
。如果 
forum
模块嵌套在另一个名为
support
模块里
，那么view文件应为
WebRoot/themes/classic/views/support/forum/post/create.php
。

本例通过修改Yii Framework 开发教程(11) UI 组件 ActiveForm示例 ，为它添加两个主提，为简单起见，两个主题名字分别为cyan,grey,
以其背景颜色命名。

首先在应用目录结构下创建themes 目录，然后创建cyan,grey 两个子目录，然后将缺省的protected/views分别复制到两个子目录下，作为Theme的初始版本。





并使用Yii缺省的Css定义，也分别拷贝到两个主题子目录下，作为CSS的初始文件。

下面分别对两个主题下的CSS文件稍微做些修改，以示区别，修改css/main.css 修改body的背景色

[css]
view plaincopyprint?

body
{
margin: 0;
padding: 0;
color: #555;
font: normal 10pt Arial,Helvetica,sans-serif;
background: #00FFFF;
} 

body
{
	margin: 0;
	padding: 0;
	color: #555;
	font: normal 10pt Arial,Helvetica,sans-serif;
	background: #00FFFF;
}


分别该为Cyan和Grey的颜色。

然后修改layout/main.php 引用主题下的CSS文件，在一个主题的视图，我们经常需要链接其他主题资源文件。例如，我们可能要显示一个在主题下images目录里的图像文件。使用当前激活主题的baseurl属性，我们就可以为此图像文件生成如下url

[php]
view plaincopyprint?

yii::app()->theme->baseUrl . '/images/FileName.gif' 

yii::app()->theme->baseUrl . '/images/FileName.gif'


修改后的布局文件如下:

[html]
view plaincopyprint?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<!-- blueprint CSS framework -->
<link rel="stylesheet" type="text/css"
href="<?php echo Yii::app()->theme->baseUrl; ?>/css/screen.css"
media="screen, projection" />
<link rel="stylesheet" type="text/css"
href="<?php echo Yii::app()->theme->baseUrl; ?>/css/print.css"
media="print" />
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css"
href="<?php echo Yii::app()->theme->baseUrl; ?>/css/ie.css"
media="screen, projection" />
<![endif]-->

<link rel="stylesheet" type="text/css"
href="<?php echo Yii::app()->theme->baseUrl; ?>/css/main.css" />
<link rel="stylesheet" type="text/css"
href="<?php echo Yii::app()->theme->baseUrl; ?>/css/form.css" />
<title><?php echo Yii::app()->name . ' ' . Yii::app()->theme->name; ?></title>
</head>

<body>

<h1>Theme Name:<?php echo Yii::app()->theme->name;?></h1>

<?php echo $content; ?>

</body>
</html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="language" content="en" />
	<!-- blueprint CSS framework -->
	<link rel="stylesheet" type="text/css"
		href="<?php echo Yii::app()->theme->baseUrl; ?>/css/screen.css"
		media="screen, projection" />
	<link rel="stylesheet" type="text/css"
		href="<?php echo Yii::app()->theme->baseUrl; ?>/css/print.css"
		media="print" />
	<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css"
		href="<?php echo Yii::app()->theme->baseUrl; ?>/css/ie.css"
		media="screen, projection" />
	<![endif]-->

	<link rel="stylesheet" type="text/css"
		href="<?php echo Yii::app()->theme->baseUrl; ?>/css/main.css" />
	<link rel="stylesheet" type="text/css"
		href="<?php echo Yii::app()->theme->baseUrl; ?>/css/form.css" />
	<title><?php echo  Yii::app()->name . ' ' . Yii::app()->theme->name;    ?></title>
</head>

<body>

<h1>Theme Name:<?php echo Yii::app()->theme->name;?></h1>

<?php echo $content; ?>

</body>
</html>


定义好主题后，就可以通过配置Application的theme属性来设置当前主题：

[php]
view plaincopyprint?

return array(
'theme'=>'cyan',
......
); 

return array(
    'theme'=>'cyan',
    ......
);


两个主题显示如下：











如果指定的主题不存在，相当于没有主题，将使用缺省的显示方式：





本例下载
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航