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

访客 阅读:270 2021-04-01 00:25:17 评论:0


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

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

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

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

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

主题目录里面内容的组织方式和application base path目录下的组织方式一样。例如,所有的view文件必须位于views下 ,布局view文件在views/layouts下 ,和系统view文件在views/system下。例如,如果我们要替换PostControllercreate 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的初始版本。

201212129016

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

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

  1. body  
  2. {  
  3.     margin0;  
  4.     padding0;  
  5.     color#555;  
  6.     fontnormal 10pt Arial,Helvetica,sans-serif;  
  7.     background#00FFFF;  
  8. }  
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

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

修改后的布局文件如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
  4. <head>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.     <meta name="language" content="en" />  
  7.     <!-- blueprint CSS framework -->  
  8.     <link rel="stylesheet" type="text/css"  
  9.         href="<?php echo Yii::app()->theme->baseUrl; ?>/css/screen.css"  
  10.         media="screen, projection" />  
  11.     <link rel="stylesheet" type="text/css"  
  12.         href="<?php echo Yii::app()->theme->baseUrl; ?>/css/print.css"  
  13.         media="print" />  
  14.     <!--[if lt IE 8]>  
  15.     <link rel="stylesheet" type="text/css"  
  16.         href="<?php echo Yii::app()->theme->baseUrl; ?>/css/ie.css"  
  17.         media="screen, projection" />  
  18.     <![endif]-->  
  19.   
  20.     <link rel="stylesheet" type="text/css"  
  21.         href="<?php echo Yii::app()->theme->baseUrl; ?>/css/main.css" />  
  22.     <link rel="stylesheet" type="text/css"  
  23.         href="<?php echo Yii::app()->theme->baseUrl; ?>/css/form.css" />  
  24.     <title><?php echo  Yii::app()->name . ' ' . Yii::app()->theme->name;    ?></title>  
  25. </head>  
  26.   
  27. <body>  
  28.   
  29. <h1>Theme Name:<?php echo Yii::app()->theme->name;?></h1>  
  30.   
  31. <?php echo $content; ?>  
  32.   
  33. </body>  
  34. </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属性来设置当前主题:

  1. return array(  
  2.     'theme'=>'cyan',  
  3.     ......  
  4. );  
return array( 
    'theme'=>'cyan', 
    ...... 
); 

两个主题显示如下:

201212129017

201212129018

 

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

201212129019

本例下载

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号