文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

47 主题 Theme 示例

发布于 2025-02-21 12:35:57 字数 4730 浏览 0 评论 0 收藏 0

Theming 是一个在 Web 应用程序里定制网页外观的系统方式。通过採用一个新的主题，可以非常方便的改变应用的外观。

在 Yii，每个主题由一个目录代表，包含 view 文件，layout 文件和相关的资源文件，如图片， CSS 文件， JavaScript 文件等。主题的名字就是他的目录名字。全部主题都放在在同一目录 WebRoot/themes 下。在任何时候，只有一个主题可以被激活。

提示：默认的主题根目录 WebRoot/themes 可被配置成其他的。只需要配置 themeManager 应用部件的属性 basePath 和 baseUrl

要激活一个主题，设置 Web 应用程序的属性 theme 为你所要的名字。可以在 application configuration 中配置或者在执行过程中在控制器的动作裡面修改。

注：主题名称是区分大小写的。如果您尝试启动一个不存在的主题， yii: :app()->theme 将返回 null 。

主题目录裡面内容的组织方式和 application base path 目录下的组织方式一样。例如，所有的 view 文件必须位于 views 下，布局 view 文件在 views/layouts 下，和系统 view 文件在 views/system 下。例如，如果我们要替换 PostController 的 create view 文件为 classic 主题下，我们将保存新的 view 文件为 WebRoot/themes/classic/views/post/create.php。

对于在 module 裡面的控制器 view 文件，相应主题 view 文件将被放在 views 目录下。例如，如果上述的 PostController 是在一个命名为 forum 的模块里，我们应该保存 create view 文件为 WebRoot/themes/classic/views/forum/post/create.php 。如果 forum 模块嵌套在另一个名为 support 模块里，那麽 view 文件应为 WebRoot/themes/classic/views/support/forum/post/create.php 。

本例通过修改 Yii Framework 开发教程(11) UI 组件 ActiveForm 示，为它添加两个主提，为简单起见，两个主题名字分别为 cyan,grey, 以其背景颜色命名。

首先在应用目录结构下创建 themes 目录，然后创建 cyan,grey 两个子目录，然后将预设的 protected/views 分别复制到两个子目录下，作为 Theme 的初始版本。

picture47.1

图片 47.1 picture47.1

并使用 Yii 预设的 Css 定义，也分别拷贝到两个主题子目录下，作为 CSS 的初始文件。

下面分别对两个主题下的 CSS 文件稍微做些修改，以示区别，修改 css/main.css 修改 body 的背景色

 
    body
    {
        margin: 0;
        padding: 0;
        color: #555;
        font: normal 10pt Arial,Helvetica,sans-serif;
        background: #00FFFF;
    }

分别该为 Cyan 和 Grey 的颜色。

然后修改 layout/main.php 引用主题下的 CSS 文件，在一个主题的视图，我们经常需要链接其他主题资源文件。例如，我们可能要显示一个在主题下 images 目录里的图像文件。使用当前激活主题的 baseurl 属性，我们就可以为此图像文件生成如下 url

 
 
    yii: :app()->theme->baseUrl . '/images/FileName.gif'

修改后的布局文件如下：

 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="language" content="en" />
        <!-- blueprint CSS framework -->
        <link rel="stylesheet" type="text/css"
            href="<?php echo Yii::app()->theme->baseUrl; ?>/css/screen.css"
            media="screen, projection" />
        <link rel="stylesheet" type="text/css"
            href="<?php echo Yii::app()->theme->baseUrl; ?>/css/print.css"
            media="print" />
        <!--[if lt IE 8]>
        <link rel="stylesheet" type="text/css"
            href="<?php echo Yii::app()->theme->baseUrl; ?>/css/ie.css"
            media="screen, projection" />
        <![endif]-->
 
        <link rel="stylesheet" type="text/css"
            href="<?php echo Yii::app()->theme->baseUrl; ?>/css/main.css" />
        <link rel="stylesheet" type="text/css"
            href="<?php echo Yii::app()->theme->baseUrl; ?>/css/form.css" />
        <title><?php echo  Yii::app()->name . ' ' . Yii::app()->theme->name;?></title>
    </head>
 
    <body>
 
    <h1>Theme Name:<?php echo Yii::app()->theme->name;?></h1>
 
    <?php echo $content; ?>
 
    </body>
    </html>

定义好主题后，就可以通过配置 Application 的 theme 属性来设置当前主题：

 
    return array(
        'theme'=>'cyan',
        ......
    );

两个主题显示如下：

picture47.2

图片 47.2 picture47.2

picture47.3

图片 47.3 picture47.3

如果指定的主题不存在，相当于没有主题，将使用预设的显示方式：

picture47.4

图片 47.4 picture47.4

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

47 主题 Theme 示例

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。