在 Yii2 Starter Kit 的后台应用中，新建一套主题的流程
1、新建目录：\backend\views\themes\default，指定包含主题资源(CSS, JS, images, 等等)的基准目录，如图1
2、复制目录：\backend\views\ 下的所有文件(除去themes)，如图2
3、粘贴至目录：\backend\views\themes\default\ 下，已经复制成功，如图3
4、配置 view 应用组件的 [[yii\base\View::theme|theme]] 属性，如图4![配置 view 应用组件的 [[yii\base\View::theme|theme]] 属性](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201093%20613'%3E%3C/svg%3E)
5、配置 Gii 模板文件，其主题为：default，如图5
6、主题化模块，如：i18n ，新建目录：\backend\modules\i18n\views\themes\default，如图6
7、复制目录：\backend\modules\i18n\views\ 下的所有文件(除去themes)，如图7
8、粘贴至目录：\backend\modules\i18n\views\themes\default\ 下，已经复制成功，如图8
9、配置 view 应用组件的 [[yii\base\View::theme|theme]] 属性，如图9![配置 view 应用组件的 [[yii\base\View::theme|theme]] 属性](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201294%20667'%3E%3C/svg%3E)
10、通过 [[yii\base\View::theme]] 属性访问 [[yii\base\Theme]] 对象。编辑：\backend\views\themes\default\sign-in\login.php，如图10![通过 [[yii\base\View::theme]] 属性访问 [[yii\base\Theme]] 对象。编辑：\backend\views\themes\default\sign-in\login.php](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201294%20456'%3E%3C/svg%3E)
11、打印出的对象，如图11
yii\base\Theme Object
(
[pathMap] => Array
(
[@app/views] => @app/views/themes/default
[@app/modules/i18n/views] => @app/modules/i18n/views/themes/default
)
[_baseUrl:yii\base\Theme:private] => /views/themes/default
[_basePath:yii\base\Theme:private] => E:\wwwroot\cmcp\backend/views/themes/default
[_events:yii\base\Component:private] => Array
(
)
[_behaviors:yii\base\Component:private] =>
)
12、在 .env 中设置主题名称：default，如图12
13、设置主题相关别名，编辑：\backend\config\bootstrap.php，定义别名，如图13
14、第5步骤的设置，调整，如图14
15、第9步骤的设置，调整，如图15
16、新建目录：\backend\web\themes\default，指定包含主题资源(CSS, JS, images, 等等)的基准目录，如图16
17、复制目录：\backend\web\ 下的目录(css、img、js)，如图17
18、粘贴至目录：\backend\web\themes\default\ 下，已经复制成功，如图18
19、基于主题重新定义资源包，编辑：\backend\assets\BackendAsset.php，如图19
20、查看登录页面的源代码，最大的变化在于包含的CSS/JS文件，其路径为绝对路径，如图20
图1
图2
图3
'components' => [
'view' => [
'theme' => [
'basePath' => '@app/views/themes/default',
'baseUrl' => '@web/views/themes/default',
'pathMap' => [
'@app/views' => '@app/views/themes/default',
],
],
],
],
![配置 view 应用组件的 [[yii\base\View::theme|theme]] 属性](https://www.shuijingwanwq.com/wp-content/uploads/2017/11/4-2.png)
图4
if (YII_ENV_DEV) {
$config['modules']['gii'] = [
'class' => yii\gii\Module::class,
'generators' => [
'crud' => [
'class' => yii\gii\generators\crud\Generator::class,
'templates' => [
'yii2-starter-kit' => Yii::getAlias('@backend/views/themes/default/_gii/templates')
],
'template' => 'yii2-starter-kit',
'messageCategory' => 'backend'
]
]
];
}
图5
图6
图7
图8
'view' => [
'theme' => [
'basePath' => '@app/views/themes/default',
'baseUrl' => '@web/views/themes/default',
'pathMap' => [
'@app/views' => '@app/views/themes/default',
'@app/modules/i18n/views' => '@app/modules/i18n/views/themes/default',
],
],
],
![配置 view 应用组件的 [[yii\base\View::theme|theme]] 属性](https://www.shuijingwanwq.com/wp-content/uploads/2017/11/9.png)
图9
$theme = $this->theme;
print_r($theme);
exit;
![通过 [[yii\base\View::theme]] 属性访问 [[yii\base\Theme]] 对象。编辑：\backend\views\themes\default\sign-in\login.php](https://www.shuijingwanwq.com/wp-content/uploads/2017/11/10.png)
图10
图11
# Themes
# ----
BACKEND_THEME = default
图12
/**
* Setting theme aliases
*/
Yii::setAlias('@themePath', '@backend/web/themes/' . env('BACKEND_THEME'));
Yii::setAlias('@themeUrl', '@backendUrl/themes/' . env('BACKEND_THEME'));
图13
if (YII_ENV_DEV) {
$config['modules']['gii'] = [
'class' => yii\gii\Module::class,
'generators' => [
'crud' => [
'class' => yii\gii\generators\crud\Generator::class,
'templates' => [
'yii2-starter-kit' => Yii::getAlias('@backend/views/themes/' . env('BACKEND_THEME') . '/_gii/templates')
],
'template' => 'yii2-starter-kit',
'messageCategory' => 'backend'
]
]
];
}
图14
'view' => [
'theme' => [
'basePath' => '@app/views/themes/' . env('BACKEND_THEME'),
'baseUrl' => '@web/views/themes/' . env('BACKEND_THEME'),
'pathMap' => [
'@app/views' => '@app/views/themes/' . env('BACKEND_THEME'),
'@app/modules/i18n/views' => '@app/modules/i18n/views/themes/' . env('BACKEND_THEME'),
],
],
],
图15
图16
图17
图18
public $basePath = '@themePath';
public $baseUrl = '@themeUrl';
图19
图20
