Hi
This blog post talks about creating liferay 7.1.0 layout using NPM, Yeoman and Gulp. There are many ways liferay offers developing layout for the theme, using the above mentioned tools is yet an other way of developing the same.
Without wasting much of our time lets get it started...
Before you start developing or creating layout, you should have the following prerequisites to proceed..
The afore mentioned tool(s) should be installed and to install the same you can refer an other post(s) by visiting the links given below...
The above command would initiate an interactive session with the user, as a user we have to answer those questions to have the layout to be deployed, the interactive session would appear something like the one given in the picture below...
Provide the name of the layout, in our case let the name be test-one, The image given below compiles out the questions we answered and let us analyse each one of them
From the image above,
The first two questions takes in test-one as the name and id of the layout, the third question questions the liferay version we are using.
From here on, the questions are much concerned about the divisions of layout into rows and columns...
The fourth question is about adding the first row in the layout.... the point is to be considered is that, each row is split into 12 columns, you can decide how many columns to be there in the first row in our case, we have just one column i.e the entire row is treated as column now.
Once done the subsequent questions would be adding more rows and columns into it, likewise we can add as many rows and columns in a layout.
The following picture depicts the layout structure we have created....
Once we finalise our layout structure, we can hit Finish Layout option to complete the layout creation something like the one given below...
The last question of the interactive session would be the path to the local application server, provide the absolute path to the server's root directory, in our case, I have given the tomcat's directory path which comes as part of the liferay portal.
Now you can witness the layout created at the location where we started the interactive session and the layout can be deployed using the following command
With this we have concluded the creation of Layout for Liferay Themes.
Hope you had good time learning
Ciao.
This blog post talks about creating liferay 7.1.0 layout using NPM, Yeoman and Gulp. There are many ways liferay offers developing layout for the theme, using the above mentioned tools is yet an other way of developing the same.
Without wasting much of our time lets get it started...
Before you start developing or creating layout, you should have the following prerequisites to proceed..
| Prerequisites | |||
|---|---|---|---|
| Name | Version | Download Page | Direct Link |
| Node | 11.15.0 | Node Package Manager Download Page | Click to Download Directly |
The afore mentioned tool(s) should be installed and to install the same you can refer an other post(s) by visiting the links given below...
Installation of Node Package Manager
The node package manager version given in the pre-requisite secition is different than the one that is mentioned in the link, but the installation procedure remains the same
Node Package Manager Installation
Installation of Yeoman and Gulp
Yeoman and Gulp Installation
Creating Liferay 7.1.0 Layout
To creat a layout, Open a terminal and fire the command below...
> yo liferay-theme:layout
The above command would initiate an interactive session with the user, as a user we have to answer those questions to have the layout to be deployed, the interactive session would appear something like the one given in the picture below...
Provide the name of the layout, in our case let the name be test-one, The image given below compiles out the questions we answered and let us analyse each one of them
From the image above,
The first two questions takes in test-one as the name and id of the layout, the third question questions the liferay version we are using.
From here on, the questions are much concerned about the divisions of layout into rows and columns...
The fourth question is about adding the first row in the layout.... the point is to be considered is that, each row is split into 12 columns, you can decide how many columns to be there in the first row in our case, we have just one column i.e the entire row is treated as column now.
Once done the subsequent questions would be adding more rows and columns into it, likewise we can add as many rows and columns in a layout.
The following picture depicts the layout structure we have created....
Once we finalise our layout structure, we can hit Finish Layout option to complete the layout creation something like the one given below...
The last question of the interactive session would be the path to the local application server, provide the absolute path to the server's root directory, in our case, I have given the tomcat's directory path which comes as part of the liferay portal.
Now you can witness the layout created at the location where we started the interactive session and the layout can be deployed using the following command
> gulp deploy
With this we have concluded the creation of Layout for Liferay Themes.
Hope you had good time learning
Ciao.
No comments:
Post a Comment