Liferay 載入自訂css 檔案

 (1) 對於特別通用的檔案，比如是ext-js庫要使用到的css檔案，你可以有2個選擇：

選擇1：放在ROOT/html/common/themes/top_head.jsp中：

 

  
.. 
  
<%-- Portal CSS --%> 
  
<!--added by charles to load the ext-js css library--> 
  
<link href="<%= HtmlUtil.escape(PortalUtil.getStaticResourceURL(request, themeDisplay.getCDNHost() + themeDisplay.getPathContext() + "/html/css/extjs/resources/css/ext-all.css")) %>" rel="stylesheet" type="text/css" /> 
  
 
  
<link href="<%= HtmlUtil.escape(PortalUtil.getStaticResourceURL(request, themeDisplay.getCDNHost() + themeDisplay.getPathContext() + "/html/css/main.css")) %>" rel="stylesheet" type="text/css" /> 
  
.. 
 

這種情況下，它將是整個伺服器中第一個被載入的css(因為top_head.jsp被portal_normal.vm中包含）:

 

選擇2：放在ROOT/html/css/main.css以@import形式給出：

 

  
@import url(portal/aui.css); 
  
 
  
/* 
  
* add by charles here to load the global css 
  
*/ 
  
@import url(extjs/resources/css/ext-all.css); 
  
 
  
@import url(portal_1.css); 
  
@import url(portal_2.css); 
  
 
  
@import url(taglib_1.css); 
  
@import url(taglib_2.css); 
  
 
  
@import url(portal/openid.css); 
  
@import url(portal/accessibility.css); 
 

這種情況下， 這個css檔案在所有的webapps下面的包含ROOT應用在內的所有應用的main.css載入之後，但是深入main.css中被包含的外部css檔案之前被載入。

 

(2) 對於某個theme用到的css檔案，你可以在這個theme的main.css中以@import形式給出

(3)對於某個portlet所特有的css檔案，你可以在這個portlet的main.css中以@import形式給出

本文出自 “平行線的凝聚” 部落格，請務必保留此出處http://supercharles888.blog.51cto.com/609344/915887