Liferay 6.1开发学习（八）：主题开发

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文件是存放的主题的缩略图，方便在切换主题时预览。

转载于:https://my.oschina.net/ckaifeng/blog/473179