How to create a theme in Liferay 7 / DXP

Introduction

Liferay has a mechanism called Theme to control the appearance of the screen. By switching themes, you can switch the appearance of the site.

Also, in Liferay, unlike Wordpress etc., column control can also be controlled independently by a mechanism called Layout. This makes it easy to create different layout combinations with the same Theme.

Installation of development tools

Theme development uses tools such as yo and gulp that are used in general front-end development. The following is the setting method on Mac.

Node installation (assuming you have homebrew installed)

With El capitan, node installation via homebrew does not work, so uninstall node.js that has already been installed, install nodebrew first by the following method, and then reinstall node.js.

curl -L git.io/nodebrew | perl - setup

Add the following line to .bash_profile

.bash_profile


export PATH=$HOME/.nodebrew/current/bin:$PATH

node installation

(If nodebrew install stable, it takes time to compile from source, so install the binary)

nodebrew install-binary stable

Install Yeoman, gulp

npm install -g yo gulp

Install Liferay theme generator

npm install -g generator-liferay-theme

Install SASS, compass

gem install sass compass

Blade tool installation

See Official Document: INSTALLING BLADE CLI

Creating a Liferay workspace

Official document: CREATING A LIFERAY WORKSPACE WITH BLADE CLI reference

(My article How to create a service builder portlet in Liferay DXP / 7 also mentions installing blade and creating a Liferay workspace. See also.)

Theme creation

If the created Liferay workspace is set to liferay_workspace, move to liferay_workspace / themes. The project name of Theme is liferay-theme here, and the following command is executed.

yo liferay-theme

A prompt will appear, so enter it according to the instructions. Next, enter the target tomcat and the URL of the access destination as follows.

? Enter the path to your app server directory: /Users/yasuflatland/project/70ce/tomcat-8.0.32
? Enter the url to your production or development site: http://localhost:8080

In an actual project, it is best practice to create a theme based on Lexicon (Bootstrap-based design guidelines adopted from Liferay7 / DXP). Become. that time,

** How to create a theme similar to the default theme of DXP (EE version) **

  1. Create a theme normally with yo liferay-theme.
  2. Unzip /osgi/marketplace/Liferay CE Foundation.lpkg and unzip classic-theme-1.0.5.war. (The version name of the 1.0.5 part changes depending on the version of DXP)
  3. Classic-theme-Expand and combine css, images, js, templates directly under 1.0.5 into the src of Theme created in 1.
  4. Deploy with gulp deploy.

** Applying the classic theme (CE version design) ** If you type gulp kickstart, it will initialize the theme based on the CE version of the classic theme.

Deploy

To deploy, use the following gulp command to deploy to the server specified when creating the theme. To change the deployment destination, change the contents of liferay-theme.json.

gulp deploy

Since the cache is effective on the Liferay side and the update is not reflected in many cases, add and edit the following on Liferay's portal-ext.properties and GUI.

portal-ext.properties


theme.css.fast.load=false
layout.template.cache.enabled=false
minifier.enabled=false

LiferayGUI


·Control panel>Setting>System setting>Velocity engine>Edit
Resource modification check interval=0 
·Control panel>Setting>System setting>FreeMarker engine>Edit
Resource modification check=0

When managing code with Git etc.

The Theme template generated by the yo command does not include node_modules, so after cloning from git,

npm install

Install the node module with.

Various commands

Check the status of the current theme

gulp status 

When changing the base theme of the theme, etc.

gulp extend

Deploy

gulp deploy

How to make a layout

You can also create a layout template with the following command. Complex nesting requires manual work, but skeletons can be created with the following commands.

yo liferay-theme:layout

Recommended Posts

How to create a theme in Liferay 7 / DXP
How to create a service builder portlet in Liferay 7 / DXP
How to easily create a pull-down in Rails
How to create a method
How to create a Java environment in just 3 seconds
How to create a Spring Boot project in IntelliJ
How to create a data URI (base64) in Java
[Java] How to create a folder
How to create a placeholder part to use in the IN clause
How to insert a video in Rails
How to create a Maven repository for 2020
[Swift5] How to create a splash screen
[rails] How to create a partial template
How to publish a library in jCenter
How to create a new Gradle + Java + Jar project in Intellij 2016.03
How to create a database for H2 Database anywhere
[Rails] How to create a graph using lazy_high_charts
How to create a query using variables in GraphQL [Using Ruby on Rails]
How to display a web page in Java
How to call libraries such as JQuery and JQuery UI in Liferay 7 / DXP
Try to create a bulletin board in Java
How to create pagination for a "kaminari" array
How to create a class that inherits class information
How to run a djUnit task in Ant
How to add a classpath in Spring Boot
[1st] How to create a Spring-MVC framework project
How to implement a like feature in Rails
How to create docker-compose
[Rails] How to create a Twitter share button
How to make a follow function in Rails
How to automatically generate a constructor in Eclipse
How to clear all data in a particular table
How to connect MySQL / MariaDB + HikariCP with Liferay 7 / DXP
[Rails] How to create a signed URL for CloudFront
How to implement a like feature in Ajax in Rails
How to create a JDBC URL (Oracle Database, Thin)
[Spring Boot] How to create a project (for beginners)
I tried to create a Clova skill in Java
How to launch another command in a Ruby program
How to display a browser preview in VS Code
[How to insert a video in haml with Rails]
How to write a date comparison search in Rails
How to store Rakuten API data in a table
How to mock a super method call in PowerMock
Create a Service with an empty model Liferay 7.0 / DXP
How to convert A to a and a to A using AND and OR in Java
How to convert a file to a byte array in Java
[Rails 6] How to set a background image in Rails [CSS]
[Rails] How to load JavaScript in a specific view
How to write a core mod in Minecraft Forge 1.15.2
[Apple Subscription Offer] How to create a promotional offer signature
[Ruby/Rails] How to generate a password in a regular expression
How to create an application
How to leave a comment
How to insert a video
How to create a lightweight container image for Java apps
How to create a form to select a date from the calendar
How to change a string in an array to a number in Ruby
How to store a string from ArrayList to String in Java (Personal)
Create a method to return the tax rate in Java
How to select a specified date by code in FSCalendar