lifeary主题修改总结.docx

Liferay主题修改总结 在eclipce中新建一个lifeary portlet工程，选择类型theme，工程名为：mytheme 如图所示： 选择插件类型Plugin type为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文件，在我们的脑海中应该有如下模式： nav ul lia/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的模板引擎（template engine）。它允许任何人仅仅简单的使用模板语言（template language）来引用由java代码定义的对象。 当Velocity应用于web开发时，界面设计人员可以和java程序开发人员同步开发一个遵循MVC架构的web站点，也就是说，页面设计人员可以只关注页面的显示效果，而由java程序开发人员关注业务逻辑编码。Velocity将java代码从web页面中分离出来，这样为web站点的长期维护提供了便利，同时也为我们在JSP和PHP之外又提供了一种可选的方案。 Velocity的能力远不止web站点开发这个领域，例如，它可以从模板（template）产生SQL和PostScript、XML，它也可以被当作一个独立工具来产生源代码和报告，