Liferay主题的创建
1、在Eclipse的工具条上,点击New Liferay Project,在plugin type里面选择Theme,点击finish。则完成了theme工程的建立。
2、Liferay的主题开发是在他提供的一个模板的基础上进行修改。我们将个性化的内容放置于_diffs目录下面,在deploy的时候,liferay会自动的将此文件的内容合并到主题中,并覆盖原先相应的内容。如果没有覆盖的则采用默认的样式等。
3、liferay的主题主要有四部分组成,CSS、images、js、template。这几部分中前三部分,不需要特别说明。template里面是使用Velocity编写的模板,方便我们修改他相应的模板内容。
4、依次说明:
CSS
CSS里面的文件是分类的,如forms.css里面是定义的表单相关的,navigation.css里面是定义的导航相关的,layout.css是定义的布局相关的等等。比如我们需要修改导航的样式,则在_diffs目录下面建立css目录,并将上面的navigation.css复制到_diffs/css/下面。我们在此文件上修改,liferay IDE会自动的编译覆盖原先的内容。
如果我们需要定义的CSS内容,不是liferay本身提供的,而是我们自己新建立的样式,则推荐将此样式写在_diffs/css/custom.css里面。
JS
js的内容一般不做修改,也没有必要在主题包里面定义太多的JS相关的内容。
images
将和自己编辑的主题相关的图片存于images目录下面。如果需要在代码中引用,可以使用
String imgpath = themeDisplay.getPathThemeImages();
这里取到的imgpath,即为images目录。
templates
模板文件,用于定义常用的portlet、导航、通用的等模板文件。可以根据自己的实际需求进行修改。和普通的Velocity一样,如果对于Velocity不熟悉的,可以大概了解一下,使用起来和普通的HTML没有太大的区别。
主题的发布
主题创建修改完成后,点击ant中的deploy进行发布即可。
其他说明
在_diffs目录里面只需要复制自己要修改的内容,不需要修改的则不需要复制过来,如下图:
1、我需要修改layout.css,则只需要从上级的CSS目录里面将此文件复制过来,在此文件上进行修改。不需要修改navigation.css则不用复制。其他的也类似。
2、图片,我需要将自定义的图片保存到common目录下面,则需要要创建一个comon目录,在引下面存放自己的文件即可。
3、tumbnail.png文件是存放的主题的缩略图,方便在切换主题时预览。