搜索
Liferay主题修改总结在eclipce中新建一个lifearyportlet工程，选择类型theme，工程名为：mytheme如图所示：选择插件类型Plugintype为theme，该工程目录结构如下其中css文件存放的是样式表文件，images中存放的是页面中所用到的图片，js中存放脚本文件，_diffs文件存放我们需要自定义的文件，新建的时候为空，webapp目录有个welcom-theme主题，这个是liferay自带的主题，如图所示：打开welcome-theme文件夹，然后拷贝如下几个文件夹然后粘贴在我们新建工程目录下的_diffs文件夹下主题修改，主要是针对templates和css这两个文件夹，templates存放的是vm文件如图所示：这里需要注意了，在_diffs文件夹中的文件，在docroot目录下也各自有一份，我们一般不会直接修改docroot目录下的文件，而是修改_diffs目录下的文件，因为在_diffs目录下修改后的文件会自动覆盖docroot目录下对应的文件。vm文件的格式和html差不多，采用velocity模版语言编写，关于velocity模版语言请参考文章末尾。我们主要针对portal_normal.vm和navigation.vm文件进行修改，portal_normal.vm文件代表整个portal页面，其中navigation.vm文件被包含在了portal_normal文件中在css文件中存放的是样式表文件：其中custom.css文件是我们要修改的样式文件。关于如何找到页面对应的样式需要结合vm文件来寻找，现在我们来把weclcom-theme主题中的横向导航条改成纵向导航条，并修改导航条的背景色、导航条目悬浮时的背景色、导航题目被点击过后的背景色以及下拉菜单条目的背景色，weclcom-theme主题中的原始样式如下：导航顾名思义就应该知道需要到navigation.vm文件中去找，打开该文件：很容易就发现了了class=“navbar-inner”这个css类选择器，那么就打开custom.css文件通过搜索关键字“navbar-inner”就找到了对应的样式代码然后就需要修改导航里面具体题目了，通过观察navigation.vm文件，在我们的脑海中应该有如下模式：navullia/a/li/ul/nav在ul标签中我们找到了名为”nav”的这个类选择器，如图所示：那么修改导航条目相关样式就应该在这个在这个类选择器下去找了，继续在custom.css文件中所示“.nav”找到那部分样式代码，如图所示：通过字面意思就找到了鼠标悬浮时的背景色设置的地方为“&.open”字样下面，被激活时的背景色在“&.active”下面，下拉菜单选项背景色在“.dropdown-menu”字样下面，最后在类选择器“navigation”下面去修改整个导航的宽高以及位置，我将宽度设为了100px，高度随着内容而自动增长，定位方式设为绝对定位，如图所示：所有的样式代码修改完后，保存并编译此工程，修改后的导航如图所示：最后谈谈我对Velocity模版语言的一些理解，Velocity是为Web设计者和开发者而设计的，它可以和HTML标签混合，通过上下文context来控制页面中样式，在还HTML中写的Velocity代码可以被Velocity引擎所解析，Velocity引擎说白了就是一段java代码，就像servlet引擎一样，有了Velocity引擎就达到了视图层与显示层分离的效果，使得代码的维护性变得更加灵活，就拿navigation.vm文件的一段代码来说，如图所示：这段代码的大概意思时，如果有某个导航条目被选中便将某个样式设置为“。。。。”关于Velocity的一些语法细节，请参考下面：Velocity是什么？Velocity是一个基于java的模板引擎（templateengine）。它允许任何人仅仅简单的使用模板语言（templatelanguage）来引用由java代码定义的对象。当Velocity应用于web开发时，界面设计人员可以和java程序开发人员同步开发一个遵循MVC架构的web站点，也就是说，页面设计人员可以只关注页面的显示效果，而由java程序开发人员关注业务逻辑编码。Velocity将java代码从web页面中分离出来，这样为web站点的长期维护提供了便利，同时也为我们在JSP和PHP之外又提供了一种可选的方案。Velocity的能力远不止web站点开发这个领域，例如，它可以从模板（template）产生SQL和PostScript、XML，它也可以被当作一个独立工具来产生源代码和报告，或者作为其他系统的集成组件使用。Velocity也可以为Turbineweb开发架构提供模板服务（templateservice）。Velocity+Turbine提供一个模板服务的方式允许一个web应用以一个真正的MVC模型进行开发。Velocity能为我们作什么？TheMudStoreExample假设你是一家专门出售Mud的在线商店的页面设计人员，让我们暂且称它为“在线MUD商店”。你们的业务很旺，客户下了各种类型和数量的mud订单。他们都是通过输入用户名和密码后才登陆到你的网站，登陆后就允许他们查看订单并购买更多的mud。现在，一种非常流行的mud正在打折销售。另外有一些客户规律性的购买另外一种也在打折但是不是很流行的BrightRedMud，由于购买的人并不多所以它被安置在页面的边缘。所有用户的信息都是被跟踪并存放于数据库中的，所以某天有一个问题可能会冒出来：为什么不使用velocity来使用户更好的浏览他们感兴趣的商品呢？Velocity使得web页面的客户化工作非常容易。作为一个website的设计人员，你希望每个用户登陆时都拥有自己的页面。你会见了一些公司内的软件工程师，你发现他们每个人都同意客户应该拥有具有个性化的信息。那让我们把软件工程师应该作的事情发在一边，看一看你应该作些什么吧。你可能在页面内嵌套如下的VTL声明：htmlbodyHello$customer.Name!table#foreach($mudin$nudsOnSpecial)#if($customer.hasPurchased($mud))trtd$flogger.getPromo($mud)/td/tr#end#end/tableVelocityTemplateLanguage(VTL):ANintroductionVTL意味着提供最简单、最容易并且最整洁的方式合并页面动态内容。VTL使用references来在website内嵌套动态内容，一个变量就是一种类型的reference。变量是某种类型的refreence，它可以指向java代码中的定义，或者从当前页面内定义的VTLstatement得到值。下面是一个VTLstatement的例子，它可以被嵌套到HTML代码中：#set($a=“Velocity”)和所有的VTLstatement一样，这个statement以＃字符开始并且包含一个directive：set。当一个在线用户请求你的页面时，VelocityTemplatingEngine将查询整个页面以便发现所有＃字符，然后确定哪些是VTLstatement，哪些不需要VTL作任何事情。＃字符后紧跟一个directive：set时，这个setdirective使用一个表达式（使用括号封闭）――一个方程式分配一个值给变量。变量被列在左边，而它的值被列在右边，最后他们之间使用＝号分割。在上面的例子中，变量是$a，而它的值是Velocity。和其他的references一样以$字符开始，而值总是以双引号封闭。Velocity中仅有String可以被赋值给变量。记住以下的规则：使用$字符开始的references用于得到什么；使用#字符开始的directives用于作些什么。HelloVelocityWorld!一旦某个变量被分配了一个值，那么你就可以在HTML文件的任何地方引用它。在下面的例子中，一个值被分配给$foo变量，并在其后被引用。htmlbody#set($foo=“Velocity”)Hello$fooWorld!/body/html上面的实现结果是在页面上打印“HelloVelocityWorld！”为了使包含VTLdirectives的statement更具有可读性，我们鼓励你在新行开始每个VTLstatement，尽管你不是必须这么作。Setdirective将在后面详细描述。注释单行注释：##Thisisasinglelinecomment.多行注释：#*Thusbeginsamulti-linecomment.Onlinevisitorswon’tseethistextbecausetheVelocityTemplatingEnginewillignoreit.*#文档格式：#**ThisisaVTLcommentblockandmaybeusedtostoresuchinformationasthedocumentauthorandversioninginformation:@version5@author*#References在VTL中有三种类型的references：变量(variables)、属性(properties)、方法(methods)。作为一个使用VTL的页面设计者，你和你的工程师必须就references的名称达成共识，以便你可以在你的template中使用它们。Everythingcomingtoandfromareference被作为一个String对象处理。如果有一个对象$foo是一个Integer对象，那么Velocity将调用它的toString()方法将这个对象转型为String类型。变量格式要求同java。属性例子：$customer.Address$purchase.Total$customer.Address有两种含义。它可以表示：查找hashtable对象customer中以Address为关键字的值；也可以表示调用customer对象的getAddress()方法。当你的页面被请求时，Velocity将确定以上两种方式选用那种，然后返回适当的值。方法一个方法就是被定义在java中的一段代码，并且它有完成某些有用工作的能力，例如一个执行计算和判断条件是否成立、满足等。方法是一个由$开始并跟随VTL标识符组成的References，一般还包括一个VTL方法体。例如：$customer.getAddress()$purchase.getTotal()$page.setTitle(“MyHomePage”)$person.setAttributes([“Strange”,“Weird”,“Excited”])前两个例子$customer.getAddress()和$purchase.getTotal()看起来挺想上面的属性$customer.Address和$purchase.Total。如果你觉得他们之间有某种联系的话，那你是正确的。VTL属性可以作为VTL方法的缩写。$customer.Address属性和使用$customer.getAddress()方法具有相同的效果。如果可能的话使用属性的方式是比较合理的。属性和方法的不同点在于你能够给一个方法指定一个参数列表。正式reference标记reference的正是格式如下：${mudSlinger}变量${customer.Address}属性${purchase.getTotal()}方法非正是格式更见常用，但是有时还是使用正是格式比较适合。例如：你希望通过一个变量$vice来动态的组织一个字符串。Jackisa$vicemaniac.本来变量是$vice现在却变成了$vicemania