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的背景色
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
yii: :app()->theme->baseUrl . '/images/FileName.gif'
修改後的布局檔案如下:
<!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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
