Liferay Theme的使用范例

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

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

  


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

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

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

  #parse ($init)

  $theme.include($top_head_include)

  $theme.include($body_top_include)

  #if ($is_signed_in)

  #dockbar()

  #end

  #language("skip-to-content")

  Add the content here!

  

$logo_description


  ...

  我们编译,部署这个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行所示:

  

#parse ($init)  $theme.include($top_head_include)  $theme.include($body_top_include)  #if ($is_signed_in)  #dockbar()  #end  ...  #language("powered-by") Liferay  $theme.include($body_bottom_include)  #js ("charles-theme/js/charles/helloworld.js")  $theme.include($bottom_include)  现在我们_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被加载:

  


  本文出自 “平行线的凝聚” 博客,请务必保留此出处http://supercharles888.blog.51cto.com/609344/881912


 小编推荐:

 Liferay theme 上传logo分析



赞 (0) 评论 分享 ()

相关阅读

    无相关信息