Yii框架官方指南系列44－專題：Theming(主題)

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 。

註：由於views目錄可能包含安全敏感數據，應當配置以防止被網路使用者存取。

當我們呼叫render或renderPartial顯示視圖，對應的view檔案以及佈局檔案將在目前啟動的主題中尋找。如果發現，這些檔案將會被render渲染。否則，就後退到viewPath和layoutPath 所指定的預設位置尋找。

baseurl屬性，我們就可以為此圖像檔案產生如下url，

yii">

提示：在一個主題的視圖，我們經常需要連結其他主題資源。例如，我們可能要顯示一個在主題下images目錄裡的圖像檔案。使用目前啟動主題的baseurl屬性，我們就可以為此圖像檔案產生如下url，

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

Below is an example of directory organization for an li .

WebRoot/
    assets
    protected/
        .htaccess
        components/
        controllers/
        models/
        views/
            layouts/
                main.php
            site/
                index.php
    themes/
        basic/
            views/
                .htaccess
                layouts/
                    main.php
                site/
                    index.php
        fancy/
            views/
                .htaccess
                layouts/
                    main.php
                site/
                    index.php

In the application configuration, if we configure

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

one under the directory 

themes/basic /views/layouts

, and the site's index view will use the one under

themes/basic/views/site. In case a view file is not found in the theme, it will fall back to the one undertec the proproftec views directory.1. 主題掛飾Starting from version 1.1.5, views used by a widget can also be themed. In particular, when tempweallCWidgetrwill the CWidgetr. search under theme folder as well as the widget view folder for the desired view file.To theme the view 

xyz

 for a widget whose 類as the widget class name) under the currently active theme's view folder. If the widget class is namespaced (available in PHP 5.3.0 or above), such as 

appwidgetsFoo

, weets create a fota. we replace the namespace separators with the underscore characters.

We then create a view file named xyz.php under the newly created folder. To this endswephp under the newly created folder. To this end, we under the newly created folder. To this endsweweet php, which will be used by the widget to replace its original view, if the currently active theme is basic.2. 自定義全局挂件

Note: this feature has been available since version 1.1. 3.<p>When using a widget provided by third party or Yii, we often need to customize it for specific needs. For example, we may want to change the value of CLinkPager::maxButtonCount from 10 (default) to 5. We can accomplish this by passing the initial property values when calling CBaseController::widget to create a widget. However, it becomes troublesome to do so if we have to repeat the same customization in every place we useCLinkPager.</p> <p><br></p> <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$this-&gt;widget('CLinkPager', array(     'pages'=&gt;$pagination,     'maxButtonCount'=&gt;5,     'cssFile'=&gt;false, ));</pre><div class="contentsignin">登入後複製</div></div> <p></p> <p>Using the global widget customization feature, we only need to specify these initial values in a single place, i.e., the application configuration. This makes the customization of widgets more manageable.</p> <p>To use the global widget customization feature, we need to configure the widgetFactory as follows:</p> <p><br></p> <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return array(     'components'=&gt;array(         'widgetFactory'=&gt;array(             'widgets'=&gt;array(                 'CLinkPager'=&gt;array(                     'maxButtonCount'=&gt;5,                     'cssFile'=&gt;false,                 ),                 'CJuiDatePicker'=&gt;array(                     'language'=&gt;'ru',                 ),             ),         ),     ), );</pre><div class="contentsignin">登入後複製</div></div> <p></p> <p>In the above, we specify the global widget customization for both CLinkPager and CJuiDatePicker widgets by configuring the CWidgetFactory::widgets property. Note that the global customization for each widget is represented as a key-value pair in the array, where the key refers to the wiget class name while the value specifies the initial property value array.</p> <p>Now, whenever we create a CLinkPager widget in a view, the above property values will be assigned to the widget, and we only need to write the following code in the view to create the widget:</p> <p><br></p> <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$this-&gt;widget('CLinkPager', array(     'pages'=&gt;$pagination, ));</pre><div class="contentsignin">登入後複製</div></div> <p></p> <p>We can still override the initial property values when necessary. For example, if in some view we want to set<code>maxButtonCount to be 2, we can do the following:

$this->widget('CLinkPager', array(
    'pages'=>$pagination,
    'maxButtonCount'=>2,
));

3. 皮肤

Note: The skin feature has been available since version 1.1.0.

While using a theme we can quickly change the outlook of views, we can use skins to systematically customize the outlook of the widgets used in the views.

A skin is an array of name-value pairs that can be used to initialize the properties of a widget. A skin belongs to a widget class, and a widget class can have multiple skins identified by their names. For example, we can have a skin for the CLinkPager widget and the skin is named as classic.

In order to use the skin feature, we first need to modify the application configuration by configuring theCWidgetFactory::enableSkin property to be true for the widgetFactory application component:

return array(
    'components'=>array(
        'widgetFactory'=>array(
            'enableSkin'=>true,
        ),
    ),
);

Please note that in versions prior to 1.1.3, you need to use the following configuration to enable widget skinning:

return array(
    'components'=>array(
        'widgetFactory'=>array(
            'class'=>'CWidgetFactory',
        ),
    ),
);

We then create the needed skins. Skins belonging to the same widget class are stored in a single PHP script file whose name is the widget class name. All these skin files are stored under protected/views/skins, by default. If you want to change this to be a different directory, you may configure the skinPath property of thewidgetFactory component. As an example, we may create under protected/views/skins a file namedCLinkPager.php whose content is as follows,

<?php
return array(
    &#39;default&#39;=>array(
        'nextPageLabel'=>'&gt;&gt;',
        'prevPageLabel'=>'&lt;&lt;',
    ),
    'classic'=>array(
        'header'=>'',
        'maxButtonCount'=>5,
    ),
);

In the above, we create two skins for the CLinkPager widget: default and classic. The former is the skin that will be applied to any CLinkPager widget that we do not explicitly specify its skin property, while the latter is the skin to be applied to a CLinkPager widget whose skin property is specified as classic. For example, in the following view code, the first pager will use the default skin while the second the classic skin:

<?php $this->widget('CLinkPager'); ?>

<?php $this->widget('CLinkPager', array('skin'=>'classic')); ?>

If we create a widget with a set of initial property values, they will take precedence and be merged with any applicable skin. For example, the following view code will create a pager whose initial values will bearray('header'=>'', 'maxButtonCount'=>6, 'cssFile'=>false), which is the result of merging the initial property values specified in the view and the classic skin.

<?php $this->widget('CLinkPager', array(
    'skin'=>'classic',
    'maxButtonCount'=>6,
    'cssFile'=>false,
)); ?>

Note that the skin feature does NOT require using themes. However, when a theme is active, Yii will also look for skins under the skins directory of the theme's view directory (e.g.WebRoot/themes/classic/views/skins). In case a skin with the same name exists in both the theme and the main application view directories, the theme skin will take precedence.

如果一個小部件使用的皮膚不存在，Yii 仍然會照常創建該小部件，不會出現任何錯誤。

資訊： 使用皮膚可能會降低效能，因為 Yii 需要第一次查找皮膚檔案正在創建一個小部件。

皮膚與全局小部件自訂功能非常相似。主要區別如下。

• 皮膚更多的是與展示屬性值的定制相關；

• 一個widget可以有多個皮膚；

• 皮膚是可主題化的；全局小部件定制貴。

•  以上就是Yii框架官方指南系列44－專題：Theming(主題)的內容，更多相關內容請關注PHP中文網（www.php.cn）！