Liferay Portugal User Group - 2º Meetup

1. Criação de temas Liferay 7.0
Meetup Liferay Portugal User Group
12/09/2018
Marta Santos

2. Criação de temas Liferay 7.0 - 12/09/2018 2
Instalar o Theme Generator
Instalar dependências:
● Instalar Node.js (https://nodejs.org/en/)
● Set up ambiente npm (comentar tudo em .npmrc se não funcionar)
● Instalar Yeoman e gulp (npm install -g yo gulp)

3. Criação de temas Liferay 7.0 - 12/09/2018 3
Instalar o Theme Generator
Instalar o Liferay Theme Generator
(versões 8.x.x não permitem gerar temas para Liferay 6.2)
npm install -g generator-liferay-theme@7.2.0

4. Criação de temas Liferay 7.0 - 12/09/2018 4
Instalar o Theme Generator
Instalar Ruby Sass e Compass
gem install sass -v "=3.4.0"
gem install compass

5. Criação de temas Liferay 7.0 - 12/09/2018 5
Criar o tema
No directório para o tema, correr o comando:
yo liferay-theme

6. Criação de temas Liferay 7.0 - 12/09/2018 6
Correr o Theme Generator
Responder às perguntas de confguração

7. Criação de temas Liferay 7.0 - 12/09/2018 7
Criar o tema
Escolher o editor desejado e abrir a pasta do tema

8. Criação de temas Liferay 7.0 - 12/09/2018 8
Desenvolvimento do tema
Pasta “build” - conteúdo
Pasta “dist” - fcheiro .war
Pasta “node_modules” - módulos node
Pasta “src” - alterações
(replica a estrutura de pastas da pasta “build”)

9. Criação de temas Liferay 7.0 - 12/09/2018 9
Desenvolvimento do tema
Por exemplo, para o desenvolvimeto de um menu dropdown:
● Copiar o fcheiro “build/templates/navigation.ftl” para a pasta
“src/templates”(necessário criar);
● Alterar o fcheiro, criando a estrutura de menu desejada.

10. Criação de temas Liferay 7.0 - 12/09/2018 10
Desenvolvimento do tema
Adicionar no fcheiro “src/css/_custom.scss” o css necessário
para estilizar o menu criado.

11. Criação de temas Liferay 7.0 - 12/09/2018 11
Deploy do tema
Correr o comando na pasta do tema
gulp deploy

12. Criação de temas Liferay 7.0 - 12/09/2018 12
Aplicar o tema

13. Criação de temas Liferay 7.0 - 12/09/2018 13
Aplicar o tema
Demonstração

14. Criação de temas Liferay 7.0 - 12/09/2018 14
Desenvolvimento do tema
Para autodeploy após alterações, correr o comando
gulp watch

15. Criação de temas Liferay 7.0 - 12/09/2018 15
Código Demo
O tema desta demo está disponível em:
https://github.com/marta-santos/liferay_portugal_user_group
Para instalar:
● Abrir pasta do tema;
● Correr comando npm install;
● Correr comando gulp init;
● Correr comando gulp deploy.

16. Criação de temas Liferay 7.0 - 12/09/2018 16
Mais detalhes
https://dev.liferay.com/pt/develop/tutorials/-/knowledge_base/7-0/themes-generator
https://github.com/liferay/liferay-themes-sdk/tree/master/packages/generator-liferay-theme