Liferay 6.1开发学习(八):主题开发

2012年09月25日 Liferay 评论 9 条 阅读 20,592 views 次

Liferay可以为不同的页面、社区、组织等提供不同的主题。方便实现用户的个性化配置,同时Liferay提供的IDE方便开发人员进行主题的个性化开发。

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目录里面只需要复制自己要修改的内容,不需要修改的则不需要复制过来,如下图:

liferay主题包

1、我需要修改layout.css,则只需要从上级的CSS目录里面将此文件复制过来,在此文件上进行修改。不需要修改navigation.css则不用复制。其他的也类似。

2、图片,我需要将自定义的图片保存到common目录下面,则需要要创建一个comon目录,在引下面存放自己的文件即可。

3、tumbnail.png文件是存放的主题的缩略图,方便在切换主题时预览。

用户头像

9 条留言  访客:8 条  博主:1 条

  1. avatar fxllong262553

    楼主 顶你啊

  2. avatar congcizui

    最上方的管理栏(显示用户名的那个),怎么让它对普通用户不显示,只对管理员显示?

  3. avatar congcizui

    找到了一个解决办法,在主题中,去掉这句#dockbar()
    可以取消显示,但是怎么针对普通用户呢? 怎么判断一个用户的role?

  4. 你好,按照上面的方法我也建立了一个主题,可怎么没有CSS 等系列样式包,新建的包只有一个_diffs,本该带的[img]http://www.huqiwen.com/wp-content/uploads/2012/09/liferay-theme-diffs.png[/img]这些包没有没有,只有一个空_diffs的文件夹。这个问题怎么解决啊

    • avatar 胡启稳

      默认是空的,这个是要自己建的,需要啥就从下面的相应目录里面复制到上面的_diffs目录里面

    • avatar 齐天大圣David

      您好!我也遇到了同样的问题。请问这个问题解决了吗?怎么解决的?谢谢!

    • avatar 齐天大圣David

      我也遇到的同样问题,后来是按照胡启稳网易云课堂里面介绍的安装部署流程(除了ivy-2.4.0.LIFERAY-PATCHED-1-SNAPSHOT拷贝自原来的开发环境),重新安装部署了开发环境后解决了。下面列出了该环境的主要版本。
      liferay-ide-eclipse-windows-x64-2.2.4-ga5-201507230603.zip
      liferay-plugins-sdk-6.2-ce-ga6-20160112152609836.zip
      liferay-portal-tomcat-6.2-ce-ga2-20140319114139101.zip
      liferay-portal-src-6.2-ce-ga6-20160112152609836.zip

  5. [img]http://www.huqiwen.com/wp-content/uploads/2012/09/liferay-theme-diffs.png[/img]就这张图片

  6. avatar 桃子

    为什么我创建的主题工程部署后没有显示呢

给我留言

Copyright © IT人生录 保留所有权利.   主题设计 知更鸟 滇ICP备16001547号-1

用户登录

分享到: