Liferay Theme的使用范例

weixin_34199335

于 2017-11-15 21:51:00 发布

阅读量167

点赞数

原文链接：https://yq.aliyun.com/articles/427992

版权

我们可以开发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)，则在页面顶部就会显示这行我们新加的内容：

例子2：改动js:

非外部JS

对于非外部文件的js来说，很简单，只要在_diffs目录下面建立一个main.js，然后main.js里面有3个方法，依次是在Portal刚启动时调用/每个Portlet加载时调用/Portal加载完毕调用，我们只直接在AUI.ready()方法体里面（也可以在其他2个方法体里面，看你需求了），加上我们需要执行的js代码就可以了：

比如，我们要控制台打印一行：console.log("AUI().ready()")，则如下面代码第10行所示：

AUI().ready(
/*
This function gets loaded when all the HTML, not including the portlets, is
loaded.
*/
function() {
console.log("AUI().ready()");
}
);
Liferay.Portlet.ready(
/*
This function gets loaded after each and every portlet on the page.
portletId: the current portlet's id
node: the Alloy Node object of the current portlet
*/
function(portletId, node) {
}
);
Liferay.on(
'allPortletsReady',
/*
This function gets loaded when everything, including the portlets, is on
the page.
*/
function() {
}
);

启用这个Theme,然后在浏览器的控制台就可以看到结果了：

外部JS:

那么如果我们要让主题Theme使用外部的js文件怎么办呢？

我们首先，还是在_diffs的js目录下定义我们的外部js文件，而且可以在嵌套的目录结构下，比如我们有个外部js文件叫helloworld.js，在charles目录下，如图所示：

这个helloworld.js只做一件事情，打印一条日志：

function f(){
console.log("helloworld,I am a function in a helloworld.js file!");
}

然后，最关键的，我们必须让页面去读到这个js文件，也就是页面加载js文件，从而这个文件中的全局变量或者函数才可用：

我们在_diffs/templates/portal_normal.vm中$theme.include($body_bottom_include)下面一行加入如下代码34行所示：

<!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">
...
<footer id="footer" role="contentinfo">
<p class="powered-by">
#language("powered-by") <a href="http://www.liferay.com" rel="external">Liferay</a>
</p>
</footer>
</div>
$theme.include($body_bottom_include)
#js ("charles-theme/js/charles/helloworld.js")
</body>
$theme.include($bottom_include)
</html>

现在我们_diffs/js/main.js中调用来自外部js文件(helloworld.js)中的函数，如下代码11行所示：

AUI().ready(
/*
This function gets loaded when all the HTML, not including the portlets, is
loaded.
*/
function() {
console.log("AUI().ready()");
f();
}
);
Liferay.Portlet.ready(
/*
This function gets loaded after each and every portlet on the page.
portletId: the current portlet's id
node: the Alloy Node object of the current portlet
*/
function(portletId, node) {
}
);
Liferay.on(
'allPortletsReady',
/*
This function gets loaded when everything, including the portlets, is on
the page.
*/
function() {
}
);

则可以在页面的浏览器控制台正确的这方法执行的结果：（一行控制台记录）

我们也可以在Network面板里面看到这段js被加载：

本文转自 charles_wang888 51CTO博客，原文链接：http://blog.51cto.com/supercharles888/881912，如需转载请自行联系原作者

weixin_34199335

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Liferay Theme的使用范例

我们可以开发Theme来让系统不使用默认的风格。当我们用向导创建一个Theme项目并且编译之后，这个项目结构如下图所示：其中docroot下面所有在_diffs目录外面的都是Liferay从默认的复制过来的资源文件。我们需要改动的都应该在_diffs目录下建平行的目录。例子1，改动页面或者样式表：对于改动页面和样式表，这个最简单，只要在_d...
复制链接

扫一扫