主题(themes)

界面主题

界面主题(theme)是一个视图和布局文件目录。每个主题中的文件用于在渲染时覆盖相应的应用程序文件。可以为一个应用程序开发具有不同用户体验的界面主题,但任何时候只能有一个被激活。

界面主题配置

界面主题配置通过应用程序的 view 组件来指定。在高级应用程序中backend要使用界面主题,可配置如下:

'components' => [
    'view' => [
        'theme' => [
            'pathMap' => ['@backend/views' => '@backend/themes/blog/views'],
            'baseUrl' => '@web/themes/blog',
        ],
    ],
],

在上述的 pathMap 中,定义了原路径到主题路径的映射表,

而 baseUrl 定义了主题中所引用的资源的基础路径。

在我们的例子中,pathMap 是 ['@backend/views' => '@backend/themes/blog/views']。这意味着所有@backend/views 中的视图将首先查找 @backend/themes/blog/views目录,如果找到了则将使用该视图文件,而不是原视图。

比如,通过上述的配置, @backend/views/site/index.php 视图文件的一个主题化版本会是 @backend/themes/blog/views/site/index.php

基本上就是把路径中的 @backend/views 替换为 @backend/themes/blog/views

实例:

以高级版为例

  1. 在 backend中 新建 themes 文件夹作为主题文件,里面创建一个博客主题文件夹 blog

  2. backend/web 中也创建步骤一中的文件目录,即 backend/web/themes/blog

这样我们的主题就算搭建完成了,但打开页面并没有任何效果,原因是我们并没有在我们的主题中添加任何主题文件,从原理中我们得知,系统会先去主题目录中获取对应的视图,没有则会调用默认的视图。

那么我们新建一个主题文件,打开 backend/themes/blog,新建 views/site/index.php, index.php 为空

然后在 backend/web 中将 css 这个文件目录整个拷贝到 web 中的 themes 文件夹中

如下图所示:

然后登录访问我们的backend主页,会发现一个空白的界面,这说明主题的调用已经成功了,后面我们就可以在这个主题中创建属于自己的主题代码了

上一篇 下一篇