Yii Framework 开发教程(47) 主题 Theme 示例

2023-11-18



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

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

提示:默认的主题根目录WebRoot/themes可被配置成其他的。只需要配置themeManager应用部件的属性basePathbaseUrl为你所要的值。

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

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

主题目录里面内容的组织方式和application base path目录下的组织方式一样。例如,所有的view文件必须位于views下 ,布局view文件在views/layouts下 ,和系统view文件在views/system下。例如,如果我们要替换PostControllercreate 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的初始版本。

201212129016

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

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

  1. body  
  2. {  
  3.     margin0;  
  4.     padding0;  
  5.     color#555;  
  6.     fontnormal 10pt Arial,Helvetica,sans-serif;  
  7.     background#00FFFF;  
  8. }  
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

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

修改后的布局文件如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
  4. <head>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.     <meta name="language" content="en" />  
  7.     <!-- blueprint CSS framework -->  
  8.     <link rel="stylesheet" type="text/css"  
  9.         href="<?php echo Yii::app()->theme->baseUrl; ?>/css/screen.css"  
  10.         media="screen, projection" />  
  11.     <link rel="stylesheet" type="text/css"  
  12.         href="<?php echo Yii::app()->theme->baseUrl; ?>/css/print.css"  
  13.         media="print" />  
  14.     <!--[if lt IE 8]>  
  15.     <link rel="stylesheet" type="text/css"  
  16.         href="<?php echo Yii::app()->theme->baseUrl; ?>/css/ie.css"  
  17.         media="screen, projection" />  
  18.     <![endif]-->  
  19.   
  20.     <link rel="stylesheet" type="text/css"  
  21.         href="<?php echo Yii::app()->theme->baseUrl; ?>/css/main.css" />  
  22.     <link rel="stylesheet" type="text/css"  
  23.         href="<?php echo Yii::app()->theme->baseUrl; ?>/css/form.css" />  
  24.     <title><?php echo  Yii::app()->name . ' ' . Yii::app()->theme->name;    ?></title>  
  25. </head>  
  26.   
  27. <body>  
  28.   
  29. <h1>Theme Name:<?php echo Yii::app()->theme->name;?></h1>  
  30.   
  31. <?php echo $content; ?>  
  32.   
  33. </body>  
  34. </html>  
<!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属性来设置当前主题:

  1. return array(  
  2.     'theme'=>'cyan',  
  3.     ......  
  4. );  
return array(
    'theme'=>'cyan',
    ......
);

两个主题显示如下:

201212129017

201212129018

 

如果指定的主题不存在,相当于没有主题,将使用缺省的显示方式:

201212129019

本例下载

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Yii Framework 开发教程(47) 主题 Theme 示例 的相关文章

  • 被C语言的malloc给坑了

    事情是这样的 最近想用C语言实现一些数据结构 今天在写二叉树时在linux下使用gcc编码是没有任何问题的 然而当我在本地window使用clion编写时 同样的代码竟然不能用了 反复看了下代码没有任何问题 然后我把代码拷贝到linux中用

随机推荐

  • redis集群配置

    分片集群搭建 springboot集成redis 相关配置 spring redis timeout 3000 database 0 cluster node 127 0 0 1 7000 127 0 0 1 7001 127 0 0 1
  • SpringBoot 文件上传解决跨域问题

    后端解决跨域问题 在Controller接口上加上 CrossOrigin注解就可以 该注解可以加在类上 也可以加在方法上 一般的请求处理数据都没有问题 但是如果上传文件就会报跨域的错误 解决这个文件上传跨域的问题 就需要增加一个过滤器配置
  • django解决跨域的方法,django如何解决跨域问题,django如何跨域

    django 使三方工具包解决跨域问题 1 安装 pip install django cors headers 2 到django的配置文件settings py中配置 1 注册到app中 INSTALLED APPS corsheade
  • Thread.UncaughtExceptionHandler

    1 自定义Application继承Application 在清单文件中将默认的Application的android name 替换成自定义的Application对象名称即可 在Oncreate中写入要实现的内容 2 在编写APK程序时
  • SpringBoot @EnableAutoConfiguration exclude属性失效

    在学习SpringBoot的时候 入了不少的坑 今天学习 SpringBootApplication里面的 EnableAutoConfiguration注解的exclude属性的 加载配置中 发现了属性失效的case 病状 exclude
  • NMEA协议解析

    文章目录 一 NMEA0183协议 1 NMEA基本框架 2 常用语句 1 GNGGA 2 GNGLL 3 GNGSA 4 GPGSV 5 GNRMC 6 GNVTG 7 GNZDA 8 PAIRCLK等 二 异或校验和代码 1 网址在线计
  • Pycharm启动失败的可能原因之一

    下载好Python后下载Pycharm应用 但是点击应用配置后有时启动失败 有时弹框提示错误 看进程均不占CPU 尝试网上各种解决方案 重新下载软件 重装系统都没能解决 最终发现是因为电脑上装的加密软件导致 卸载后重新安装即可 Pychar
  • 解决 java.lang.noclassdeffounderror: XXX 相关问题

    本文能临时解决所有与noclassdeffounderror相关的报错 首先说下这个错误 它表示你在运行的时候没有找到这个包 但是我们在编译的时候反而有这个包 这里需要理解下 我们java在编译和运行的时候都会编译jar包 但是你肯定是id
  • 记一次Spark打包错误:object java.lang.Object in compiler mirror

    使用maven compile和package 一直报错scala reflect internal MissingRequirementError object scala runtime in compiler mirror not f
  • 【Linux】实现简易的Shell命令行解释器

    大家好我是沐曦希 文章目录 一 前言 二 准备工作 1 输出提示符 2 输入和获取命令 3 shell运行原理 4 内建命令 5 替换 三 整体代码 一 前言 前面学到了进程创建 进程终止 进程等待 进程替换 那么通过这些来制作一个简易的S
  • 多任务:分层特征融合网络 NDDR-CNN

    论文链接 NDDR CNN 论文摘要 In this paper we propose a novel Convolutional Neural Network CNN structure for general purpose multi
  • sqli-labs/Less-34

    这一关虽然属于宽字节注入 但是回归了post请求了 而且欢迎界面还是存在转义之后的样子和十六进制的样子 首先我们试试在username处输入admin 转义之后变成了admin 所以我们进行宽字节注入将注入修改为admin c0 结果界面还
  • 微信小程序隐私保护指引设置

    今天修改了发布规则 发布前必须填写用户隐私保护指引设置 就是以下内容
  • 解决Unity导出的APK启动黑屏的问题

    今天准备把最近写的Unity游戏编一个版本 但是放真机上运行时 一启动就黑屏 网上各种查资料 折腾半天后 找到了解决方案 需要指定Graphics APIs 为OpenGLES3 在 Project Settings gt Player g
  • sort中用lambda函数(看完就会)

    介绍 sort函数是默认从小到大排列的 如果我们想要改变排序方式就要自己写个cmp函数 如果排列方式比较简单的话我们可以在sort函数中用一个简单的lambda函数 源码及讲解 对非结构体的数组 前面的 表示对数的操作方式 如果填个 说明是
  • shell指令,通过函数实现数组求和,通过函数获取用户uid和gid

    一 实现一个对数组求和的函数 数组通过实参传递给函数 num 0 read p 请输入一组数据 a arr function add for i 0 i lt arr i do num arr i done return num add a
  • CSS中如何实现文字描边效果(Text Stroke)?

    聚沙成塔 每天进步一点点 专栏简介 文字描边效果 Text Stroke 示例 写在最后 专栏简介 前端入门之旅 探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅 这个专栏是为那些对
  • 手把手接入【微信测试公众号】,不会还有人不会调试公众号吧?

    仅使用微信的测试公众号 Java开发内容 遇错与参考 Java接入测试微信公众号调试流程 前提 创建并配置测试号 登陆注册微信测试公众号 沙箱 微信验签 免登授权获取用户信息 微信接口调试工具的使用 创建服务号菜单 常见错误 invalid
  • 最高月薪15K! 这个30岁的奶茶店老板说:这次转行,转对了!

    人生没有一成不变的风景 这一路上 我们会走过晴天 也会踏过泥泞 会穿越风雨 也将沐浴暖阳 不同的年龄 有不同的风景 不同的阶段 有不同的境遇 也许每个人的经历不同 对人生的感受也各异 但只要内心强大 不断让自己淬炼成长 就能从容面对人生 行
  • Yii Framework 开发教程(47) 主题 Theme 示例

    Theming是一个在Web应用程序里定制网页外观的系统方式 通过采用一个新的主题 可以非常方便的改变应用的外观 在Yii 每个主题由一个目录代表 包含view文件 layout文件和相关的资源文件 如图片 CSS文件 JavaScript