在 Yii2 Starter Kit 的后台应用中,新建一套主题的流程

1、新建目录:/backend/views/themes/default,指定包含主题资源(CSS, JS, images, 等等)的基准目录,如图1

新建目录:/backend/views/themes/default,指定包含主题资源(CSS, JS, images, 等等)的基准目录

图1

2、复制目录:/backend/views/ 下的所有文件(除去themes),如图2

复制目录:/backend/views/ 下的所有文件(除去themes)

图2

3、粘贴至目录:/backend/views/themes/default/ 下,已经复制成功,如图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',
                ],
            ],
        ],
    ],

配置 view 应用组件的 [[yii/base/View::theme|theme]] 属性

图4

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'
            ]
        ]
    ];
}
配置 Gii 模板文件,其主题为:default

图5

6、主题化模块,如:i18n ,新建目录:/backend/modules/i18n/views/themes/default,如图6

主题化模块,如:i18n ,新建目录:/backend/modules/i18n/views/themes/default

图6

7、复制目录:/backend/modules/i18n/views/ 下的所有文件(除去themes),如图7

复制目录:/backend/modules/i18n/views/ 下的所有文件(除去themes)

图7

8、粘贴至目录:/backend/modules/i18n/views/themes/default/ 下,已经复制成功,如图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',
                ],
            ],
        ],

配置 view 应用组件的 [[yii/base/View::theme|theme]] 属性

图9

10、通过 [[yii/base/View::theme]] 属性访问 [[yii/base/Theme]] 对象。编辑:/backend/views/themes/default/sign-in/login.php,如图10

$theme = $this->theme;
print_r($theme);
exit;

通过 [[yii/base/View::theme]] 属性访问 [[yii/base/Theme]] 对象。编辑:/backend/views/themes/default/sign-in/login.php

图10

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] =>
)

打印出的对象

图11

12、在 .env 中设置主题名称:default,如图12

# Themes
# ----
BACKEND_THEME = default
在 .env 中设置主题名称:default

图12

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'));
设置主题相关别名,编辑:/backend/config/bootstrap.php,定义别名

图13

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'
            ]
        ]
    ];
}
第5步骤的设置,调整

图14

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'),
                ],
            ],
        ],
第9步骤的设置,调整

图15

16、新建目录:/backend/web/themes/default,指定包含主题资源(CSS, JS, images, 等等)的基准目录,如图16

新建目录:/backend/web/themes/default,指定包含主题资源(CSS, JS, images, 等等)的基准目录

图16

17、复制目录:/backend/web/ 下的目录(css、img、js),如图17

复制目录:/backend/web/ 下的目录(css、img、js)

图17

18、粘贴至目录:/backend/web/themes/default/ 下,已经复制成功,如图18

粘贴至目录:/backend/web/themes/default/ 下,已经复制成功

图18

19、基于主题重新定义资源包,编辑:/backend/assets/BackendAsset.php,如图19

    public $basePath = '@themePath';
    public $baseUrl = '@themeUrl';
基于主题重新定义资源包,编辑:/backend/assets/BackendAsset.php

图19

20、查看登录页面的源代码,最大的变化在于包含的CSS/JS文件,其路径为绝对路径,如图20

查看登录页面的源代码,最大的变化在于包含的CSS/JS文件,其路径为绝对路径

图20

原创文章,作者:kepupublish,如若转载,请注明出处:https://blog.ytso.com/180754.html

(0)
上一篇 2021年10月31日
下一篇 2021年10月31日

相关推荐

发表回复

登录后才能评论