主题（themes）

优质

小牛编辑

130浏览

2023-12-01

界面主题

界面主题（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。

实例：

以高级版为例

在 backend中新建 themes 文件夹作为主题文件，里面创建一个博客主题文件夹 blog
在 backend/web 中也创建步骤一中的文件目录，即 backend/web/themes/blog

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

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

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

如下图所示：

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