在 Yii2 Starter Kit 的后台应用中，新建一套主题的流程
1、新建目录：\backend\views\themes\default，指定包含主题资源(CSS, JS, images, 等等)的基准目录，如图1
图1
2、复制目录：\backend\views\ 下的所有文件(除去themes)，如图2
图2
3、粘贴至目录：\backend\views\themes\default\ 下，已经复制成功，如图3
图3
4、配置 view 应用组件的 [[yii\base\View::theme|theme]] 属性，如图4
1 2 3 4 5 6 7 8 9 10 11 | '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]] 属性](http://www.shuijingwanwq.com/wp-content/uploads/2017/11/4-2.png)
图4
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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、主题化模块，如：i18n ，新建目录：\backend\modules\i18n\views\themes\default，如图6
图6
7、复制目录：\backend\modules\i18n\views\ 下的所有文件(除去themes)，如图7
图7
8、粘贴至目录：\backend\modules\i18n\views\themes\default\ 下，已经复制成功，如图8
图8
9、配置 view 应用组件的 [[yii\base\View::theme|theme]] 属性，如图9
1 2 3 4 5 6 7 8 9 10 | '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]] 属性](http://www.shuijingwanwq.com/wp-content/uploads/2017/11/9.png)
图9
1 2 3 | $theme = $this->theme;print_r($theme);exit; |
![通过 [[yii\base\View::theme]] 属性访问 [[yii\base\Theme]] 对象。编辑：\backend\views\themes\default\sign-in\login.php](http://www.shuijingwanwq.com/wp-content/uploads/2017/11/10.png)
图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] =>
)
图11
12、在 .env 中设置主题名称：default，如图12
1 2 3 | # Themes# ----BACKEND_THEME = default |
图12
13、设置主题相关别名，编辑：\backend\config\bootstrap.php，定义别名，如图13
1 2 3 4 5 | /** * Setting theme aliases */Yii::setAlias('@themePath', '@backend/web/themes/' . env('BACKEND_THEME'));Yii::setAlias('@themeUrl', '@backendUrl/themes/' . env('BACKEND_THEME')); |
图13
14、第5步骤的设置，调整，如图14
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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
15、第9步骤的设置，调整，如图15
1 2 3 4 5 6 7 8 9 10 | '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、新建目录：\backend\web\themes\default，指定包含主题资源(CSS, JS, images, 等等)的基准目录，如图16
图16
17、复制目录：\backend\web\ 下的目录(css、img、js)，如图17
图17
18、粘贴至目录：\backend\web\themes\default\ 下，已经复制成功，如图18
图18
19、基于主题重新定义资源包，编辑：\backend\assets\BackendAsset.php，如图19
1 2 | public $basePath = '@themePath';public $baseUrl = '@themeUrl'; |
图19
20、查看登录页面的源代码，最大的变化在于包含的CSS/JS文件，其路径为绝对路径，如图20
图20
近期评论