Liferay 6.2中上传自定义Bootstrap模板的相关技术疑问

嘿，作为折腾过Liferay 6.2+Bootstrap组合的老玩家，我来一步步帮你解决这两个问题：

一、网页模板文件该放在哪里？ #

不用非得放到bs3目录，但如果是基于你之前用的Bootstrap教程的主题结构，把模板资源整合到对应目录会更清晰：

• 首先，Liferay主题的核心自定义目录是docroot/_diffs，里面的css、js、images等目录会覆盖主题默认的资源。
• 如果你的bs3目录是用来存放Bootstrap核心文件的，那模板的自定义CSS/JS/图片可以放到_diffs/css/template、_diffs/js/template这类子目录里，或者直接合并到bs3/css/bs3/js里（注意不要覆盖Bootstrap的核心文件）。
• 关键是要在主题的portal_normal.vm（位于_diffs/templates）里正确引入这些资源，比如用Liferay自带的标签：

  $theme.css($themeDisplay.getPathThemeCss() + "/template/custom-style.css")
  $theme.js($themeDisplay.getPathThemeJs() + "/template/custom-script.js")
  

  这样Liferay会自动处理资源的路径和缓存，比直接写<link>/<script>更稳妥。

二、jQuery冲突怎么解决？ #

Liferay 6.2自带的jQuery版本比较旧（大概1.8.x），而Bootstrap 3.3.7需要jQuery 1.9.1+，再加上网页模板大概率也自带jQuery，冲突几乎是必然的，这里给你两种靠谱的解决方法：

方法1：使用noConflict隔离（推荐新手） #

这种方法不用动Liferay自带的jQuery，只需要修改模板的JS代码：

1. 在模板的JS文件最开头添加：

   var $j = jQuery.noConflict();
   

2. 把模板里所有原来用$的地方换成$j，比如$j('.navbar').collapse()，这样模板的jQuery就和Liferay自带的互不干扰了。

方法2：替换Liferay自带的jQuery（谨慎使用） #

如果你的模板依赖特定版本的jQuery，且确认不会影响Liferay自带的portlet（比如你只用自定义portlet），可以这么做：

1. 在主题的liferay-look-and-feel.xml里添加配置，排除自带的jQuery：

   <portlet-decorator>
     <!-- 其他配置 -->
     <portlet-resources>
       <portlet-resource>
         <name>jquery</name>
         <remove>true</remove>
       </portlet-resource>
     </portlet-resources>
   </portlet-decorator>
   

2. 在portal_normal.vm里引入你需要的jQuery版本（比如和Bootstrap匹配的3.x版本），放在Bootstrap JS之前：

   <script src="$themeDisplay.getPathThemeJs() + "/bs3/jquery.min.js""></script>
   <script src="$themeDisplay.getPathThemeJs() + "/bs3/bootstrap.min.js""></script>
   

   注意：这种方法可能导致某些依赖自带jQuery的系统portlet失效，一定要先在测试环境验证！

给新手的额外小提示 #

• 整合前一定要备份主题，Liferay主题的修改很容易踩坑，备份能快速回滚。
• 先从小部分开始整合：比如先把模板的HTML结构放到portal_normal.vm里，调整好CSS路径，测试页面样式正常后，再处理JS部分。
• 用浏览器的开发者工具（F12）查看控制台的错误信息，大部分冲突或路径问题都能在这里找到线索。

内容的提问来源于stack exchange，提问作者LP0