Das Theme Verzeichnis

Jedes Theme wird in einem separaten, physikalischen Verzeichnis gespeichert und unterliegt in Teilen einer vorgegebene Verzeichnisstruktur. Die Unterstruktur der Templates kann dabei individualisiert werden.

In einem Theme sind alle Einstellungen und Informationen zu einem Design gebündelt abgelegt. Hier ist der CSS Code, JavaScript etc. sowie die Templates hinterlegt.

All' dies kommt aus dem Theme und nicht aus den Quellen der Applikation.

Ausnahme sind UI Komponenten, welche voreingestellte Gestaltungsattribute mitbringen. Diese Eigenschaften können auf Wunsch über die Theme Einstellungen überschrieben werden.

• Übersicht
• Theme Verzeichnis (komprimiert)
• Das Unterverzeichnis "assets"
• Das Unterverzeichnis "dist"
• Das Unterverzeichnis "node_modules"
• Das Unterverzeichnis "views"
• Die Datei "composer.json"
• Die Datei "config.php"
• Die Datei "LICENCE.md"
• Die Datei "README.md"
• Die Datei "webpack.mix.js"
• Ein Beispiel für ein komplettes Theme Verzeichnis

Theme Verzeichnis (komprimiert)

Im Folgenden haben wir eine grundlegende Theme Struktur für Sie abgebildet. Die Erläuterungen zu den jeweiligen Verzeichnissen finden Sie weiter unten.

- themes (globales Theme Verzeichnis)
  |- Shop01 (Verzeichnis zum Theme "Shop01"
     |- assets
     |- dist       
     |- node_modules       
     |- views       
     .gitignore
     composer.json
     config.php
     LICENCE.md
     mix-manifest.json
     package.json
     README.md
     webpack.mix.js 

Das Unterverzeichnis "assets"

Im Verzeichnis "assets" haben Sie die Möglichkeit Bilder, CSS/SASS/LESS und JavaScript welches vom Theme verwendet werden soll abzulegen. Es ist zu empfehlen dieses Verzeichnis in weitere typabhängige Verzeichnisse wie css, js, images etc. zu gliedern.

Es ist nicht zwingend erforderlich diese Verzeichnisstruktur einzuhalten, jedoch empfehlenswert, da diese Struktur den heutigen Standards entspricht.

Das Unterverzeichnis "dist"

Schreiben Sie z.B. SASS Code, muss dieser Code mit einem Pre-Compiler übersetzt werden. Auch kann es sinnvoll sein, JavaScript Dateien zu komprimieren und mehrere JavaScript Dateien zu einer Datei zusammenzuführen.

Das Ergebis aus diesen Prozessen sollte im Verzeichnis "dist" abgelegt werden. Dies ist dann der "endgültige" CSS und JavaScript Code welcher im "public" Verzeichnis Ihrer Installation veröffentlicht werden kann und im Layout verlinkt wird.

Das Unterverzeichnis "node_modules"

Die moderne Webentwicklung setzt heute sehr stark auf JavaScript und JavaScript Frameworks. Über Paket-Manager lassen sich bereits fertige Komponenten in ein Projekt integrieren ohne alles von Grund auf neu entwicklen zu müssen.

Einer dieser Paket-Manager ist npm. Ein Paketmanager für die JavaScript Laufzeitumgebung Node.js. Hiermit lassen sich externe Funktionen, Bibliotheken und Frameworks installieren. (Siehe auch: https://de.wikipedia.org/wiki/Npm_(Software))

Welche Pakete zu installieren sind wird in der Datei "package.json" festgehalten. Der jeweilige Installationsstatus ist in der Datei "package-lock.json" gespeichert.

Die installierten Pakete (Funktionen, Bibliotheken und Frameworks) werden dabei im Verzeichnis "node_modules" abgelegt und stehen von dort aus zu Verwendung zur Verfügung.

Das Unterverzeichnis "views"

Im Unterverzeichnis "views" befinden sich die alle Templates zum Layout. Diese können dort beliebig abgelegt und strukturiert werden.

Ausnahme hierbei bilden die Templates für die jeweiligen Applikations-Module, welche eine grundlegende Struktur vorgeben.

Die Datei "composer.json"

Der "Composer" ist ein Paket-Manager für PHP. Dieser wird von uns in Bezug auf die Themes so verwendet, dass unsere "Standard-Themes" darüber in Ihre Installation übernommen werden.

Die dazugehörigen Einstellungen werden in der Datei "composer.json" vorgenommen. Der jeweilige Installationsstatus wird dann in der Datei "composer.lock" gespeichert.

Möchten Sie ein individuelles Theme erstellen, ist die Anlage dieser Datei nicht notwendig.

Die Datei "config.php"

In der Datei "config.php" können Informationen zum Theme hinterlegt werden. Neben Beschreibung, Autor etc. können auch die Standard-Einstellungen für Theme-Varianten dort hinterlegt werden.

Bei der Auswahl eines Themes über den Admin-Bereich der Applikation kommen diese Einstellungen zum Tragen.

Die Datei "LICENCE.md"

In dieser Datei kann die Verwendungs-Lizenz zum Theme hinterlegt werden.

Die Datei "README.md"

Möchten Sie Erläuterungen/Dokumentationen zu Ihrem Theme hinterlegen, so können diese in der Datei "readme.md" festgehalten werden.

Die Datei "webpack.mix.js"

Bei dieser Datei handelt es sich um eine Webpack Konfigurationsdatei in Verbindung mit Laravel-Mix.

Webpack hat sich in den letzten Monaten als Standard-Build-Tool für Webapplikationen etabliert. Es handelt sich dabei um einen statischen "Modul-Bündler" für JavaScript. Dabei werden alle Module der Anwedung (in unserem Fall des Themes) in ein oder mehrer "Bündel" gepackt um einen schnellen, komprimierten und updatefähigen Quellcode zu generieren.

Laravel-Mix bietet dazu eine schlanke und saubere API um grundlegende Webpack Schritte abzubilden.

Ein Beispiel für ein komplettes Theme Verzeichnis:

- themes
  |- Shop01
     |- assets
        |- css
        |- images
        |- sass
     |- dist
        |- themes
           |- shop01
              |- css
                 |- theme.css
                 |- vendor.css
                 |- ...
              |- js
                 |- br_app.js
                 |- manifest.js
                 |- vendor.js
     |- node_modules
        |- .bin
        |- .cache
        |- @fontawesome
        |- ...
     |- views
        |- auth
           |- login.blade.php
           |- register.blade.php
           |- verify.blade.php
           |- ...
        |- email
           |- mail.blade.php
           |- ...
        |- errors
           |- 404.blade.php
           |- ...
        |- layout
           |- app.blade.php
           |- ...
        |- masters
        |- pages
           |-- products.blade.php
           |-- cms.blade.php
           |-- default.blade.php
           |-- ...
        |- segments
        |- modules
        |- home.blade.php
     .gitignore
     composer.json
     config.php
     LICENCE.md
     mix-manifest.json
     package.json
     README.md
     webpack.mix.js