在 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
'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
近期评论