Yii 主题化
主题化可以帮助您在不修改原来的视图文件的情况下替换一组视图。您需要将视图应用组件的 theme 属性设置为使用主题化。
您还应该定义以下属性:
- yii\base\Theme::$basePath - 定义CSS、JS、图片等资源的基础目录。
-
yii\base\Theme::$baseUrl - 定义主题化资源的基础URL。
-
yii\base\Theme::$pathMap - 定义替换规则。
例如,如果您在UserController中调用 $this->render(‘create’) ,将渲染 @app/views/user/create.php 视图文件。然而,如果您像下面的应用配置一样启用了主题化,将会渲染 @app/themes/basic/user/create.php 视图文件。
步骤1 - 修改 config/web.php 文件的方式如下。
<?php
params = require(__DIR__ . '/params.php');config = [
'id' => 'basic',
'basePath' => dirname(__DIR__),
'bootstrap' => ['log'],
'components' => [
'request' => [
// !!! insert a secret key in the following (if it is empty) - this
//is required by cookie validation
'cookieValidationKey' => 'ymoaYrebZHa8gURuolioHGlK8fLXCKjO',
],
'cache' => [
'class' => 'yii\caching\FileCache',
],
'user' => [
'identityClass' => 'app\models\User',
'enableAutoLogin' => true,
],
'errorHandler' => [
'errorAction' => 'site/error',
],
'mailer' => [
'class' => 'yii\swiftmailer\Mailer',
// send all mails to a file by default. You have to set
// 'useFileTransport' to false and configure a transport
// for the mailer to send real emails.
'useFileTransport' => true,
],
'log' => [
'traceLevel' => YII_DEBUG ? 3 : 0,
'targets' => [
[
'class' => 'yii\log\FileTarget',
'levels' => ['error', 'warning'],
],
],
],
'view' => [
'theme' => [
'basePath' => '@app/themes/basic',
'baseUrl' => '@web/themes/basic',
'pathMap' => [
'@app/views' => '@app/themes/basic',
],
],
],
'db' => require(__DIR__ . '/db.php'),
],
'modules' => [
'hello' => [
'class' => 'app\modules\hello\Hello',
],
],
'params' => params,
];
if (YII_ENV_DEV) {
// configuration adjustments for 'dev' environmentconfig['bootstrap'][] = 'debug';
config['modules']['debug'] = [
'class' => 'yii\debug\Module',
];config['bootstrap'][] = 'gii';
config['modules']['gii'] = [
'class' => 'yii\gii\Module',
];
}
returnconfig;
?>
我们已经添加了视图应用组件。
步骤2 − 现在创建 web/themes/basic 目录结构和 themes/basic/site 。在themes/basic/site文件夹内创建一个名为 about.php 的文件,并添加以下代码。
<?php
/* @var this yii\web\View */
use yii\helpers\Html;this->title = 'About';
this->params['breadcrumbs'][] =this->title;
this->registerMetaTag(['name' => 'keywords', 'content' => 'yii, developing,
views, meta, tags']);this->registerMetaTag(['name' => 'description', 'content' => 'This is the
description of this page!'], 'description');
?>
<div class = "site-about">
<h1><?= Html::encode($this->title) ?></h1>
<p style = "color: red;">
This is the About page. You may modify the following file to customize its content:
</p>
</div>
步骤3 − 现在,转到 http://localhost:8080/index.php?r=site/about ,将会呈现 themes/basic/site/about.php 文件,而不是 views/site/about.php 。
步骤4 − 针对主题模块,按照以下方式配置 yii\base\Theme::$pathMap 属性。
'pathMap' => [
'@app/views' => '@app/themes/basic',
'@app/modules' => '@app/themes/basic/modules',
],
步骤5 - 要为小部件设置主题,请按以下方式配置 yii\base\Theme::$pathMap 属性。
'pathMap' => [
'@app/views' => '@app/themes/basic',
'@app/widgets' => '@app/themes/basic/widgets', // <-- !!!
],
有时您需要指定一个包含应用程序的基本外观的基本主题。为了实现这个目标,您可以使用主题继承。
步骤6 - 以以下方式修改视图应用程序组件。
'view' => [
'theme' => [
'basePath' => '@app/themes/basic',
'baseUrl' => '@web/themes/basic',
'pathMap' => [
'@app/views' => [
'@app/themes/christmas',
'@app/themes/basic',
],
]
],
],
在上述配置中, @app/views/site/index.php 视图文件将会被主题化为 @app/themes/christmas/site/index.php 或 @app/themes/basic/site/index.php,取决于哪个文件存在。如果两个文件都存在,则使用第一个。
步骤7 - 创建目录结构 themes/christmas/site 。
步骤8 - 现在,在 themes/christmas/site 文件夹中,创建一个名为 about.php 的文件,其中包含以下代码。
<?php
/* @var this yii\web\View */
use yii\helpers\Html;this->title = 'About';
this->params['breadcrumbs'][] =this->title;
this->registerMetaTag(['name' => 'keywords', 'content' => 'yii, developing,
views, meta, tags']);this->registerMetaTag(['name' => 'description', 'content' => 'This is the
description of this page!'], 'description');
?>
<div class = "site-about">
<h2>Christmas theme</h2>
<img src = "http://pngimg.com/upload/fir_tree_PNG2514.png" alt = ""/>
<p style = "color: red;">
This is the About page. You may modify the following file to customize its content:
</p>
</div>
步骤9 − 如果你访问 http://localhost:8080/index.php?r=site/about ,你将会看到使用圣诞主题的更新的关于页面。