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.
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.
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
(If nodebrew install stable, it takes time to compile from source, so install the binary)
nodebrew install-binary stable
npm install -g yo gulp
npm install -g generator-liferay-theme
gem install sass compass
See Official Document: INSTALLING BLADE CLI
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.)
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) **
** 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.
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
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.
Check the status of the current theme
gulp status
When changing the base theme of the theme, etc.
gulp extend
Deploy
gulp deploy
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