Liferay dispose d'un mécanisme appelé Thème pour contrôler l'apparence de l'écran. En changeant de thème, vous pouvez changer l'apparence du site.
De plus, dans Liferay, contrairement à Wordpress etc., le contrôle des colonnes peut être contrôlé indépendamment par un mécanisme appelé Layout. Cela facilite la création de différentes combinaisons de mise en page avec le même thème.
Le développement de thèmes utilise des outils tels que yo et gulp qui sont utilisés dans le développement frontal général. Voici la méthode de paramétrage sur Mac.
Avec El capitan, l'installation du nœud via homebrew ne fonctionne pas, alors désinstallez le node.js déjà installé, installez d'abord nodebrew en utilisant la méthode suivante, puis réinstallez node.js.
curl -L git.io/nodebrew | perl - setup
Ajoutez la ligne suivante à .bash_profile
.bash_profile
export PATH=$HOME/.nodebrew/current/bin:$PATH
(Si nodebrew installe stable, la compilation à partir des sources prend du temps, alors installez le binaire)
nodebrew install-binary stable
npm install -g yo gulp
npm install -g generator-liferay-theme
gem install sass compass
Voir Official Document: INSTALLING BLADE CLI
Document officiel: CRÉER UN ESPACE DE TRAVAIL DE VIE AVEC BLADE CLI référence
(Mon article Comment créer un portlet de générateur de service dans Liferay DXP / 7 mentionne également l'installation de Blade et la création d'un espace de travail Liferay. Voir également.)
Si l'espace de travail Liferay créé est défini sur liferay_workspace, accédez à liferay_workspace / themes. Le nom du projet du thème est liferay-theme ici, et la commande suivante est exécutée.
yo liferay-theme
Une invite apparaîtra, alors entrez-la conformément aux instructions. Ensuite, entrez le tomcat cible et l'URL de la destination d'accès comme suit.
? 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
Dans un projet réel, il est recommandé de créer un thème basé sur Lexicon (directives de conception basées sur Bootstrap adoptées à partir de Liferay7 / DXP). Devenir. ce temps,
** Comment créer un thème similaire au thème par défaut de DXP (version EE) **
** Application du thème classique (conception de la version CE) ** Si vous tapez gulp kickstart, le thème sera initialisé en fonction de la version CE du thème classique.
La commande gulp suivante sera utilisée pour déployer sur le serveur spécifié lors de la création du thème. Pour modifier la destination de déploiement, modifiez le contenu de liferay-theme.json.
gulp deploy
Étant donné que le cache est efficace du côté Liferay et que la mise à jour n'est pas reflétée dans de nombreux cas, ajoutez et modifiez ce qui suit sur le portal-ext.properties et l'interface graphique de Liferay.
portal-ext.properties
theme.css.fast.load=false
layout.template.cache.enabled=false
minifier.enabled=false
LiferayGUI
·Panneau de configuration>Réglage>Paramètres système>Moteur de vitesse>Éditer
Resource modification check interval=0
·Panneau de configuration>Réglage>Paramètres système>Moteur FreeMarker>Éditer
Resource modification check=0
Le modèle de thème généré par la commande yo n'inclut pas node_modules, donc après le clonage depuis git,
npm install
Installez le module de nœud avec.
Vérifiez l'état du thème actuel
gulp status
Lors du changement du thème de base du thème, etc.
gulp extend
Déployer
gulp deploy
Vous pouvez également créer un modèle de mise en page avec la commande suivante. Un squelette peut être créé avec la commande suivante, bien que cela nécessite un travail manuel pour le rendre imbriqué de manière compliquée.
yo liferay-theme:layout
Recommended Posts