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
'components' => [ 'view' => [ 'theme' => [ 'basePath' => '@app/views/themes/default', 'baseUrl' => '@web/views/themes/default', 'pathMap' => [ '@app/views' => '@app/views/themes/default', ], ], ], ],
5、配置 Gii 模板文件,其主题为:default,如图5
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' ] ] ]; }
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' => [ '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', ], ], ],
10、通过 [[yii/base/View::theme]] 属性访问 [[yii/base/Theme]] 对象。编辑:/backend/views/themes/default/sign-in/login.php,如图10
$theme = $this->theme; print_r($theme); exit;
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
# Themes # ---- BACKEND_THEME = default
13、设置主题相关别名,编辑:/backend/config/bootstrap.php,定义别名,如图13
/** * Setting theme aliases */ Yii::setAlias('@themePath', '@backend/web/themes/' . env('BACKEND_THEME')); Yii::setAlias('@themeUrl', '@backendUrl/themes/' . env('BACKEND_THEME'));
14、第5步骤的设置,调整,如图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' ] ] ]; }
15、第9步骤的设置,调整,如图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'), ], ], ],
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
public $basePath = '@themePath'; public $baseUrl = '@themeUrl';
20、查看登录页面的源代码,最大的变化在于包含的CSS/JS文件,其路径为绝对路径,如图20
原创文章,作者:kepupublish,如若转载,请注明出处:https://blog.ytso.com/tech/webdev/180754.html