创建Theme Module

1. 通过IDE创建Module Project

Project name:  module.theme
Build type  :  gradle-module
Project Template Name : theme

注: Build type 请选择 gradle-module, 因为gradle 是未来的趋势.

2. 在WEB-INF目录下创建liferay-look-and-feel.xml

<?xml version="1.0"?>
<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 7.0.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_7_0_0.dtd">

<look-and-feel>
    <compatibility>
        <version>7.0.0+</version>
    </compatibility>
    <theme id="module-base-theme" name="module-base-theme">
        <template-extension>ftl</template-extension>
        <settings>
            <setting configurable="true" key="bullet-style" options="dots,arrows" type="select" value="dots" />
            <setting configurable="true" key="show-maximize-minimize-application-links" type="checkbox" value="false" />
            <setting configurable="true" key="show-header-search" type="checkbox" value="true" />
            <setting configurable="false" key="show-site-name-default" value="true" />
            <setting configurable="false" key="show-site-name-supported" value="true" />
        </settings>
        <roles>
            <role-name>User</role-name>
        </roles>
        <portlet-decorator id="barebone" name="Barebone">
            <default-portlet-decorator>true</default-portlet-decorator>
            <portlet-decorator-css-class>portlet-barebone</portlet-decorator-css-class>
        </portlet-decorator>
        <portlet-decorator id="borderless" name="Borderless">
            <portlet-decorator-css-class>portlet-borderless</portlet-decorator-css-class>
        </portlet-decorator>
        <portlet-decorator id="decorate" name="Decorate">
            <portlet-decorator-css-class>portlet-decorate</portlet-decorator-css-class>
        </portlet-decorator>
    </theme>
</look-and-feel>

注: 设置themeID

注: <template-extension>ftl</template-extension> 设置模板类型 尽量使用freemark, velocity已经停止更新

注: 其他一些属性待续... 可以查阅http://www.liferay.com/dtd/liferay-look-and-feel_7_

build.gradle

buildscript {
    dependencies {
        classpath group: "com.liferay", name: "com.liferay.gradle.plugins.theme.builder", version: "2.0.1"
    }

    repositories {
        mavenLocal()

        maven {
            url "https://cdn.lfrs.sl/repository.liferay.com/nexus/content/groups/public"
        }
    }
}

apply plugin: "com.liferay.portal.tools.theme.builder"

dependencies {
    parentThemes group: "com.liferay", name: "com.liferay.frontend.theme.styled", version: "2.0.13"
    parentThemes group: "com.liferay", name: "com.liferay.frontend.theme.unstyled", version: "2.0.13"

    themeBuilder group: "com.liferay", name: "com.liferay.portal.tools.theme.builder", version: "1.1.1"
}

buildTheme{
    parentName = "_styled"
}

Liferay DXP 还是允许继承主题,可以使用parentName指定要继承的主题, 但是亲测Gradle版本还是有些BUG 存在导致自定义的CSS无法合并.所以暂时推荐使用style theme

小技巧: 可以先生成theme 然后根据自己需要拷贝需要更改的模板到对应位置.

@import "portlet_hello_world"; 通过import 导入需要的css

Pls check CODE https://code.aliyun.com/alanzh/liferay-samples/tree/master/liferay-samples/wars/module.theme