官网文档：http://www.liferay.com/zh/documentation/liferay-portal/6.2/development/-/ai/creating-themes-and-layout-templates-liferay-portal-6-2-dev-guide-09-en

A. 创建 Theme 项目

使用Liferay IDE 创建一个 Liferay theme 项目：testTheme。在向导页面的第二页，选择父主题为 _styled，主题框架为 Velocity。

父主题（theme-parent）是什么意思？ 
所有的 Liferay 主题都派生自两个基本主题：_unstyled 和 _styled。_unstyled 先加载，然后是 _styled，最后才是你自己开发的主题。

Liferay 主题开发目前支持的模板有 Velocity、FreeMarker 和 JSP

这两个属性在 pom.xml 中：

1. <properties>
2. <liferay.theme.parent>_styled</liferay.theme.parent>
3. <liferay.theme.type>vm</liferay.theme.type>
4. </properties>

B. 开发者模式

一般情况下，我们对主题进行修改后必须重部署才能看到变化，这样开发效率太低。开发者模式通过修改以下设置使得对主题的修改可以立即反映出来。

• CSS 文件独立加载，而不是整合为一个文件。 (theme.css.fast.load=false)
• 禁用布局模板缓存。 (layout.template.cache.enabled=false)
• 服务器启动后不打开浏览器。 (browser.launcher.url=)
• 主题与网页内容的 FreeMarker 模板不缓存。 (freemarker.engine.modification.check.interval=0)
• 禁用 CSS 与 JavaScript 压缩功能。 (minifier.enabled=false)

如何使用开发者模式：

在 Liferay Bundle 的 tomcat/bin 目录下创建 portal-developer.properties 文件。文件内容参考 Liferay 源码中的 portal-impl\src\portal-developer.properties

1. theme.css.fast.load=false
2. theme.images.fast.load=false
3. javascript.fast.load=true
4. javascript.log.enabled=false
5. layout.template.cache.enabled=false
6. browser.launcher.url=
7. combo.check.timestamp=true
8. freemarker.engine.cache.storage=soft:1
9. freemarker.engine.resource.modification.check.interval=0
10. log.sanitizer.enabled=false
11. minifier.enabled=false
12. openoffice.cache.enabled=false
13. com.liferay.portal.servlet.filters.cache.CacheFilter=false
14. com.liferay.portal.servlet.filters.etag.ETagFilter=false
15. com.liferay.portal.servlet.filters.header.HeaderFilter=false
16. com.liferay.portal.servlet.filters.themepreview.ThemePreviewFilter=true

修改 Liferay Bundle 中的 tomcat/bin/setenv.bat 文件，尾部添加：

1. set "CATALINA_OPTS=%CATALINA_OPTS% -Dexternal-properties=portal-developer.properties"

现在，直接修改 tomcat/webapps 里面 theme 的内容，就能立刻在页面上反映出变化了。

C. 创建主题缩略图

创建一个 150 * 120 像素的 png 图片（一般是主题效果图），取名 thumbnail.png，放在 theme 项目的 src\main\webapp\images 目录下。部署。

选择 theme 时能看到主题缩略图。应用 theme，会发现页面风格变了。

D. 修改样式

执行 mvn deploy 后，在 target 目录中能看到 theme war 包中的所有内容。theme 打包是覆盖式的，即先复制 _unstyled 里面的所有内容，然后用 _styled 里面的内容覆盖（如果你的 theme 是继承自 _styled 的话），最后再用你的 theme 里面的文件覆盖。

强调：是整个文件被覆盖。例如，只要你在 theme 中重定义了 portlet.css，那 _styled 中定义的 portlet.css 中的样式在你的 theme 中将不复存在。

鉴于此，一般小规模修改 theme 样式时，会在 custom.css 中添加自己的样式。由于 custom.css 最后加载（参见 main.css 内容），所以会把前面定义的样式取代掉。或者也可以将 target 目录中你想修改的文件复制到项目对应的目录下，再做修改，这样 theme 部署时，会用你的文件替换掉原来的文件。

PS：如果你以前用过 Ant 构建的 theme，一定记得有个 _diffs 目录。Maven 构建的 theme 不需要这个目录，直接在 src\main\webapp 目录下创建 css、images 等目录即可。

作为实验，我们修改（创建） src\main\webapp\css\custom.css：

1. .aui .table th {
2. background: #8080ff;
3. }

现在，表格头的背景色变成了淡蓝色。

E. 使用 settings 让 theme 变的可配置

1. 修改 liferay-look-and-feel.xml

1. <look-and-feel>
2. <compatibility>
3. <version>6.2.2+</version>
4. </compatibility>
5. <theme id="testTheme" name="testTheme">
6. <settings>
7. <setting key="footer-type" value="detailed" />
8. </settings>
9. </theme>
10. <theme id="testTheme-brief" name="testTheme Brief">
11. <settings>
12. <setting key="footer-type" value="brief" />
13. </settings>
14. </theme>
15. </look-and-feel>

<setting> 值在 theme 模板中可以通过 $theme.getSetting("footer-type") 的方式获取。

2. 将 portal_normal.vm 复制到 src\main\webapp\templates 目录下，并在 </body> 标签前添加：

1. #if ($theme.getSetting("footer-type") == "detailed")
2. #parse ("$full_templates_path/footer_detailed.vm")
3. #else
4. #parse ("$full_templates_path/footer_brief.vm")
5. #end

3. 创建 src\main\webapp\templates\footer_brief.vm 和 src\main\webapp\templates\footer_detailed.vm

1. <div>
2. A $theme.getSetting("footer-type") footer.
3. </div>

1. <div>
2. This is a $theme.getSetting("footer-type") footer.
3. </div>

这种方式实际上创建了两个 theme，我们需要给不同的 page 设置不同的 theme

F. 使用 configurable settings 让 theme 变的可配置

1. 修改 liferay-look-and-feel.xml

1. <theme id="testTheme" name="testTheme">
2. <settings>
3. <setting key="footer-type" value="detailed" />
4. <setting configurable="true" key="slogan" type="textarea" value="" />
5. <setting configurable="true" key="display-slogan-footer" type="checkbox" value="true" />
6. </settings>
7. </theme>

2. 修改 portal_normal.vm，在 </body> 标签前添加：

1. <div>
2. #if($theme.getSetting("display-slogan-footer") == true)
3. Liferay $theme.getSetting("slogan")
4. #else
5. Liferay
6. #end
7. </div>

这种方式只需创建一个 theme。<setting configurable="true" ... /> 会在选择 theme 的管理页面中添加对应的可编辑属性。这样，我们使用的是同一个 theme，只是给不同的 page 设置不同的 setting 值

G. Color scheme（颜色方案）

通过创建多个 color scheme，并对每个 color scheme 指定一个定制化的 css 文件和图片目录，来创建一些定制化的样式。

1. 修改 liferay-look-and-feel.xml

1. <theme id="testTheme" name="testTheme">
2. <settings>
3. <setting key="footer-type" value="detailed" />
4. <setting configurable="true" key="slogan" type="textarea" value="" />
5. <setting configurable="true" key="display-slogan-footer" type="checkbox" value="true" />
6. </settings>
7. <color-scheme id="01" name="Day">
8. <css-class>day</css-class>
9. <color-scheme-images-path>${images-path}/color_schemes/${css-class}</color-scheme-images-path>
10. </color-scheme>
11. <color-scheme id="02" name="Night">
12. <css-class>night</css-class>
13. </color-scheme>
14. </theme>

创建了两个 color scheme，分别为 Day 和 Night。Day 方案使用了 day.css 样式文件，同时把图片目录指定为 images/color_schemes/day；Night 方案使用 night.css 样式文件，同时把图片目录指定为 images/color_schemes/night。注意，<color-scheme-images-path>${images-path}/color_schemes/${css-class}</color-scheme-images-path> 指定一次就可以了。

2. 修改 src\main\webapp\css\custom.css，底部添加：

1. @import url(color_schemes/day.css);
2. @import url(color_schemes/night.css);

3. 在 src\main\webapp\css\color_schemes 目录创建 day.css 和 night.css

1. body.day { background-color: #ddf; }
2. .day a { color: #66a; }

1. body.night { background-color: #447; color: #777; }
2. .night a { color: #bbd; }

4. src\main\webapp\css\color_schemes\day 目录下可以放置该 color scheme 的 thumbnail.png；night 目录同理。

H. 使用 Portal 预定义设置

通过修改 liferay-look-and-feel.xml 文件改变展现方式。例如通过 theme 指定不显示 portlet 标题：

1. <settings>
2. ...
3. <setting
4. configurable="true"
5. key="portlet-setup-show-borders-default"
6. type="checkbox"
7. value="false"
8. />
9. ...
10. </settings>