Liferay Theme的使用范例

我们可以开发Theme来让系统不使用默认的风格。

当我们用向导创建一个Theme项目并且编译之后,这个项目结构如下图所示:

其中docroot下面所有在_diffs目录外面的都是Liferay从默认的复制过来的资源文件。我们需要改动的都应该在_diffs目录下建平行的目录。

例子1,改动页面或者样式表:

对于改动页面和样式表,这个最简单,只要在_diffs目录下建立平行的目录并且覆盖你要改动的同名文件就可以,比如我们要在主题的顶部添加一行文字叫“Add the content here!”,那么我们只需要在_diffs下建立templates文件夹,然后修改portal_normal.vm,如下代码第27行所示:

<!DOCTYPE html> 

#parse ($init) 

<html class="#language("lang.dir")" dir="#language("lang.dir")" lang="$w3c_language_id"> 

<head>
    <title>$the_title - $company_name</title> 

    $theme.include($top_head_include) 

</head> 

<body class="$css_class"> 

$theme.include($body_top_include) 

#if ($is_signed_in)
    #dockbar()
#end 

<div id="wrapper">
    <a href="#main-content" id="skip-to-content">#language("skip-to-content")</a> 

    <header id="banner" role="banner">
        <div id="heading">
            Add the content here!
            <h1 class="site-title">
                <a class="$logo_css_class" href="$site_default_url" title="#language("go-to") $site_name">
                    <img alt="$logo_description" height="$site_logo_height" src="$site_logo" width="$site_logo_width" />
                </a> 

... 

</html>

我们编译,部署这个Theme到Liferay服务器上,然后在Lifray控制面板中选择我们自定义的主题(charles-theme),则在页面顶部就会显示这行我们新加的内容:

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索目录
, 编译
, 页面
, 样式
, themes
, theme
liferay
liferay theme、liferay theme 开发、liferay 7 theme开发、liferay theme js、liferay 7.0 theme,以便于您获取更多的相关知识。

时间: 2016-11-22

Liferay Theme的使用范例的相关文章

Liferay theme上传logo的详细分析

结论: theme上传logo会做以下事情: (1)用UploadPortletRequest对象来处理页面的<input type=file> (2)对于上传的logo图片为空,则抛出异常. (3)对于上传的logo图片不为空,则先从数据库中找到当前layout,为logo定义logoId,并吧logoId添加到当前layout并存回数据库,然后根据布尔变量设定,来决定是否吧这个logo关联到hook,以及这个这个logo图片是否要持久化. 过程展示: 当在Liferay中的某个theme选

使用 Ant 构建 Liferay Theme的详细过程

记录今天吧Liferay项目从Ant切换到Maven的教训吧. 为了明天的Demo,我们吧所有原来用Ant构建的Liferay项目全部切换到了Maven,结果在把Maven构建的某个theme应用部署到Liferay服务器时始终看不到效果.我忙活了半个小时,才发现了原因,是因为_diffs下面的内容根本就没有复制到Theme根目录中. 因为我们以前都是用Ant来打包和部署的,而Liferay的Ant脚本会自动的把_diffs下面的所有资源都merge到外层(也就是theme应用根目录下).我们当

Liferay使用Maven创建Theme

在吸取了Ant构建theme时,Liferay theme的教训后,我们很轻松就把theme项目移植到了Maven.以下是具体步骤: 假定: 因为我们采用了http://supercharles888.blog.51cto.com/609344/890525 文章所示的多项目开发结构,所以假定我们把我们要开发的theme 放在 D:\WalmartProject中. 首先:我们还是用Maven Theme向导来创建一个Theme: 创建完毕之后,因为我们要让我们的pom.xml继承父亲pom,所

使用Liferay Maven 编译部署Theme 深入分析

今天同事问我在Maven构建Theme时Liferay框架默认资源文件从何处获取,我对比了下使用Ant来编译部署 Theme和使用Maven来编译部署Theme的过程,发现:在复制框架默认资源文件时,居然是完全不同的策略! Ant 复制Liferay默认资源文件的策略: 大家都知道,在用Ant编译Theme时,我们程序员需要 在_diffs目录下添加一些和Liferay框架不同的资源文件,而Liferay框架本身的资源文件都会从 $LIFERAY_HOME\tomcat-7.0.23\webap

Liferay Hook使用范例

今天UI组有个需求,需要把Liferay的默认的header改为自定义的header,并且用ext-js来展示动态header的效果,于是我们想到了用Liferay Hook的功能. 展示效果 初始状态: 当鼠标滚轮往下滚动时候,header会缩成一条横杠: 开发"> 当鼠标滚轮往上滚动时,header会恢复为初始状态: 实现: 为了实现这个功能,我们必须创建一个Liferay Hook功能, 然后我们在META-INF下创建一个目录叫modify_liferay_defaults作为我们

Liferay中如何使用自定义主题

Liferay中让门户网站使用自己的theme(主题)是十分简单的事情,步骤如下: (1) 在Dock-bar中依 次选择Manage->Page Layout->Look and Feel (2)  然后选择 "define a specific look and feel for this page" (3) 然后选择我们自定义的theme (比如,我们开发了一个名称叫demo- theme的主题并且已经将其部署到Liferay服务器上) (4) 最后保存,关闭pop-

Liferay激活Navigation和Breadcrumb

这个问题居然卡了我1个多小时,主要开始想复杂了. 因为默认如果给网站做站内导航时,我们都是用js实现的,而Liferay的页面又那么复杂,因为portal页面都由一个portlet组成的,每个页面id构成也很复杂,所以一直搞了我很久没弄出来,直到我回归了Portal的基本定义. 在Portal定义中,一个非常主要的功能是内容聚合 "content aggregation",所以,聚合功能应该是框架本身就帮你做好了,我们需要做的仅仅是定义页面(而不是编写页面,页面框架帮你搞定了),然后进

Liferay 模板文件的解析

大家都知道Liferay的内核框架由一组Velocity模板文件组成的,它们位于$LIFERAY_HOME\liferay-portal-6.1.0-ce-ga1\tomcat-7.0.23\webapps\ROOT\html\themes\classic\templates目录下,今天有同事问我,这些模板中的变量在哪里定义的. 为了解决这个问题,我们找到了portal-impl.jar中的VelocityVariableImpl 类文件,于是一目了然.因为 portal-normal.vm中的

Liferay SDK的目录结构

Liferay SDK有如下的目录结构: clients/  是client插件的目录并且提供了创建 client插件的ant脚本 dist/  这个目录存放了用于部署和发布的archive应用.比如我们上次写了2个portlet,则这里就有2个对应应用: ext/  是Ext插件的目录并且提供了创建 Ext插件的ant脚本 hooks/  是hooks插件的目录并且提供了创建 hook插件的ant 脚本 layouttpl/ 是布局模板的目录并且提供了创建布局模板的ant脚本 lib/ 用到的