我们可以开发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被加载：
