Wie du ein Theme mit Demo installierst - Entwickler Edition

Unsere Themes wurden ursprünglich für die lokale Arbeit entwickelt. Und mit der Entwickler Edition ist dies auch weiterhin möglich. Profitiere von einem Workflow, mit dem du schneller größere Projekte umsetzt – dank gulp und browser-sync.

Einrichtung der lokalen Entwicklungsumgebung (einmalig)

Wenn du das erste Mal mit gulp oder anderen Taskrunnern arbeitest, musst du noch node.js, den Node Package Manager - npm und gulp global installieren. Global bedeutet, dass es Projektübergreifend zur Verfügung steht.

  1. Auf der nodejs-Website kannst du node.js herunterladen und installieren (der Node Package Manager ist bereits enthalten). Weitere Informationen und ein kurzes Video bekommst du hier.
  2. Öffne das Terminal / die Kommandozeile. Führe den Befehl npm install gulp-cli -g aus. Solltest du mehrere Fehlermeldungen bekommen, verwende sudo npm install gulp-cli -g. Die Option -g sorgt dafür, dass gulp.js global installiert wird.

1. Contao-Installation

Installiere Contao in deiner lokalen Entwicklungsumgebung über Composer oder den Contao Manager.

Mittels Composer:

php composer.phar create-project contao/managed-edition . 4.8

Mittels Contao Manager:
Lade dir den Contao Manager von der Contao Website herunter und folge den Anweisungen: Zur Contao Website

2. Erweiterungen installieren

Installiere das jeweilige Theme-Bundle, zum Beispiel

php composer.phar require erdmannfreunde/lasr-theme-bundle

Das Theme Bundle wird alle benötigten Erweiterungen in der richtigen Version herunterladen und installieren.

2.1 Installtool aufrufen

Nach der Installation wirst du aufgefordert, die Datenbank über das Installtool zu aktualisieren. Öffne das Installtool und aktualisiere die Datenbank.

3. Theme + Demo importieren

Kopiere alle Dateien und Ordner aus dem Theme Paket entsprechend ihrer Hierarchie in deine Contao-Installation:

  • files
  • templates

3.1 Installtool aufrufen

Rufe erneut das Contao Installtool auf. Wähle bei Templates die entsprechende SQL-Datei aus und importiere sie. Im Anschluss musst du einen neuen Administrator-Account anlegen.

4. gulp einrichten

  1. Kopiere folgende Dateien aus dem Theme-Paket in dein Contao Hauptverzeichnis:
    • .browserslistrc
    • .editorconfig
    • gulpfile.js
    • package.json

    Die Dateien werden für die Installation und Verwendung von gulp.js benötigt.

  1. Öffne die Kommandozeile. Gehe in dein Contao Hauptverzeichnis und führe den Befehl npm install aus. Dadurch wird gulp.js und die dazugehörigen Plugins installiert.
  2. Öffne die gulpfile.js und stelle unter var bsProxy die URL zu deiner lokalen Installation ein, z.B. “localhost” oder “solo.localhost”
  3. Öffne die Kommandozeile erneut. Gehe in dein Contao Hauptverzeichnis und starte gulp mit dem Befehl gulp. Gulp sollte nun die Produktionsdateien (CSS, JS) erstellen. Über localhost:3000 kannst du nun das Frontend aufrufen.

Die Installation und Einrichtung ist nun abgeschlossen. Im nächsten Schritt erfährst du, wie du das Theme anpassen kannst:

Theme individualisieren