In the background application of Yii2 Starter Kit, create a new set of theme processes
1. Create a new directory: \backend\views\themes\default, specify the base directory containing the theme resources (css, js, images, etc.), as shown in Figure 1
Figure 1
2. Copy the directory: all files under \backend\views\ (excluding themes), as shown in Figure 2
Figure 2
3. Paste it to the directory: \backend\views\themes\default\, the copy has been successful, as shown in Figure 3
Figure 3
4. Configure the View application component[[yii\base\View::theme|theme]] attribute, as shown in Figure 4
'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)
Figure 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'
]
]
];
}
Figure 5
6. Theme module, such as: I18n, create a new directory:\backend\modules\i18n\views\themes\default, as shown in Figure 6
Figure 6
7. Copy the directory: \backend\modules\i18n\views\ all the files (remove themes), as shown in Figure 7
Figure 7
8. Paste it to the directory: \backend\modules\i18n\views\themes\default\, the copy has been successful, as shown in Figure 8
8
9. Configure the View application component[[yii\base\View::theme|theme]] attribute, as shown in Figure 9
'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)
Figure 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)
Figure 10
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]=>
)
Figure 11
12. Set the theme name in .env: default, as shown in Figure 12
# Themes
# ----
BACKEND_THEME = default
Figure 12
13. Set the related alias of the theme, edit: \backend\config\bootstrap.php, and define the alias, as shown in Figure 13
/**
* Setting theme aliases
*/
Yii::setAlias('@themePath', '@backend/web/themes/' . env('BACKEND_THEME'));
Yii::setAlias('@themeUrl', '@backendUrl/themes/' . env('BACKEND_THEME'));
Figure 13
14. Setting and adjustment of the fifth step, as shown in Figure 14
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'
]
]
];
}
Figure 14
15. The setting and adjustment of the 9th step, as shown in Figure 15
'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'),
],
],
],
Figure 15
16. Create a new directory: \backend\web\themes\default, specify the base directory containing the theme resources (css, js, images, etc.), as shown in Figure 16
Figure 16
17. Copy the directory: the directory (CSS, IMG, JS) under \backend\web\, as shown in Figure 17
Figure 17
18. Paste it into the directory: \backend\web\themes\default\, the copy has been successful, as shown in Figure 18
18
19. Redefine the resource package based on the theme, edit: \backend\assets\backendsset.php, as shown in Figure 19
public $basePath = '@themePath';
public $baseUrl = '@themeUrl';
Figure 19
20. Check the source code of the login page. The biggest change is the included CSS/JS file, and its path is an absolute path, as shown in Figure 20
Figure 20
