Liferay verfügt über einen Mechanismus namens Theme, mit dem das Erscheinungsbild des Bildschirms gesteuert werden kann. Durch Wechseln der Themen können Sie das Erscheinungsbild der Site ändern.
In Liferay kann die Spaltensteuerung im Gegensatz zu Wordpress usw. unabhängig von einem Mechanismus namens Layout gesteuert werden. Dies macht es einfach, verschiedene Layoutkombinationen mit demselben Thema zu erstellen.
Bei der Themenentwicklung werden Tools wie yo und gulp verwendet, die in der allgemeinen Front-End-Entwicklung verwendet werden. Das Folgende ist die Einstellungsmethode auf dem Mac.
Mit El capitan funktioniert die Knoteninstallation über Homebrew nicht. Deinstallieren Sie daher die bereits installierten node.js, installieren Sie nodebrew zuerst mit der folgenden Methode und installieren Sie dann node.js neu.
curl -L git.io/nodebrew | perl - setup
Fügen Sie die folgende Zeile zu .bash_profile hinzu
.bash_profile
export PATH=$HOME/.nodebrew/current/bin:$PATH
(Wenn NodeBrew stabil installiert ist, dauert das Kompilieren aus dem Quellcode einige Zeit. Installieren Sie daher die Binärdatei.)
nodebrew install-binary stable
npm install -g yo gulp
npm install -g generator-liferay-theme
gem install sass compass
Siehe Offizielles Dokument: INSTALLIEREN DER BLADE CLI
Offizielles Dokument: ERSTELLEN EINES LIFERAY-ARBEITSPLATZES MIT BLADE CLI Referenz
(In meinem Artikel Erstellen eines Service Builder-Portlets in Liferay DXP / 7 wird auch die Installation von Blade und das Erstellen eines Liferay-Arbeitsbereichs erwähnt. Siehe auch.)
Wenn der erstellte Liferay-Arbeitsbereich auf liferay_workspace festgelegt ist, wechseln Sie zu liferay_workspace / themes. Der Projektname von Theme ist hier Liferay-Theme, und der folgende Befehl wird ausgeführt.
yo liferay-theme
Eine Eingabeaufforderung wird angezeigt. Geben Sie sie gemäß den Anweisungen ein. Geben Sie als Nächstes den Ziel-Tomcat und die URL des Zugriffsziels wie folgt ein.
? 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 einem tatsächlichen Projekt empfiehlt es sich, ein Thema zu erstellen, das auf Lexicon basiert (Bootstrap-basierte Designrichtlinien, die von Liferay7 / DXP übernommen wurden). Werden. diese Zeit,
** So erstellen Sie ein Thema, das dem Standardthema von DXP (EE-Version) ähnelt **
** Anwendung des klassischen Themas (Design der CE-Version) ** Wenn Sie gulp kickstart eingeben, wird das Thema basierend auf der CE-Version des klassischen Themas initialisiert.
Der folgende Befehl gulp wird verwendet, um auf dem Server bereitzustellen, der beim Erstellen des Designs angegeben wurde. Ändern Sie den Inhalt von liferay-theme.json, um das Bereitstellungsziel zu ändern.
gulp deploy
Da der Cache auf der Liferay-Seite wirksam ist und das Update in vielen Fällen nicht angezeigt wird, fügen Sie Folgendes in Liferays portal-ext.properties und der GUI hinzu und bearbeiten Sie es.
portal-ext.properties
theme.css.fast.load=false
layout.template.cache.enabled=false
minifier.enabled=false
LiferayGUI
·Schalttafel>Aufbau>Systemeinstellung>Geschwindigkeitsmotor>Bearbeiten
Resource modification check interval=0
·Schalttafel>Aufbau>Systemeinstellung>FreeMarker-Engine>Bearbeiten
Resource modification check=0
Die vom Befehl yo generierte Theme-Vorlage enthält keine node_modules. Nach dem Klonen von git
npm install
Installieren Sie das Knotenmodul mit.
Überprüfen Sie den Status des aktuellen Themas
gulp status
Beim Ändern des Basisthemas des Themas usw.
gulp extend
Bereitstellen
gulp deploy
Sie können auch eine Layoutvorlage mit dem folgenden Befehl erstellen. Ein Skelett kann mit dem folgenden Befehl erstellt werden, obwohl manuelle Arbeit erforderlich ist, um es kompliziert zu verschachteln.
yo liferay-theme:layout
Recommended Posts