Php Application Framework Zikula - Theme-Entwicklung 1

Mit diesem Artikel starte ich meine Tutorial-Artikelserie zu den technischen Grundlagen der Theme-Entwicklung.

Diese Serie ist ausdrücklich keine Serie zum Webdesign*, denn es wäre vermessen, eine solche als ausgewiesener Nicht-Designer zu starten.

Hier geht es darum, wie das Standard-Bootstrap-Theme aufgebaut ist und wo ihr für Veränderungen ansetzen müsst.

Die Startseite

Die Startseite einer Internetseite ist oft das Aushängeschild. Entsprechend sollte sie aufgeräumt gestaltet sein und leichten Zugriff auf die wichtigen Inhalte eines Internetauftritts bieten.

In der Praxis unterscheidet sie sich deshalb oft von den restlichen Seiten einer Internetseite.


Werbung

q?_encoding=UTF8&ASIN=3836241587&Format=_SL250_&ID=AsinImage&MarketPlace=DE&ServiceVersion=20070822&WS=1&tag=beziehu-21&language=de_DE

Startseite bearbeiten

Für die Veränderung der Startseite gibt es mehrere Möglichkeiten. Grundsätzlich muss dazu mindestens eine template-Datei im Theme bearbeitet werden.

Was sind Templates?

Zikula arbeitet seit der Versionsreihe 1.5.x mit Twig. Auch in Twig dienen templates als Vorlage für das Bereitstellen von Daten. Anders gesagt sind templates Platzhalter.

Das Haupttemplate für die Startseite ist im Bootstrap Theme im Ordner 'Resources/views' die Datei 'home.html.twig.' Diese kann mit einem normalen Text-Editor oder z.B. mit Dreamweawer bearbeitet werden.

Struktur des Haupttemplates

Die Original-Datei im Bootstrap Theme 'home.html.twig' sieht in Dreamweawer folgender Maßen aus.

Startseite in Dreamweawer

Typisch für Twig sind die doppelt geschweiften Klammern zur Eröffnung und zum Schließen einer Notation.

Durch include Anweisungen werden insgesamt 4 weitere templates in folgender Reihenfolge eingebunden:

  • Ein Header
  • Ein Menü
  • Der Hautpinhalt
  • Ein Footer

Unterbrochen wird das template durch einige Html* Befehle, die einen Container ( <div></div> ) bestimmen und die Html Seite schließen.

Um einen Container unterhalb des Hauptinhalts ({{ include('@ZikulaBootstrapTheme/Body/' ~ themevars.home ~ '.html.twig') }}) und oberhalb des Footers ({{ include('@ZikulaBootstrapTheme/Include/footer.html.twig') }}) einzufügen, kannst du das template z.B. wie im Bild unterhalb modifizieren und dann hochladen.

Neuer Container auf Startseite

Werbung

q?_encoding=UTF8&ASIN=3836245787&Format=_SL250_&ID=AsinImage&MarketPlace=DE&ServiceVersion=20070822&WS=1&tag=beziehu-21&language=de_DE

Änderungen an templates sichtbar machen

Das neue Zikula speichert die Ausgabe von Seiten verläßlich im Cache, sodass Änderungen nicht direkt umgesetzt werden. Um dies zu ändern, ist es notwendig, in der Datei 'app/config/custom_parameters.yml' den Eintrag des Parameters 'debug' auf 'true' zu setzen und die Datei dann auf den Server hoch zu laden. Anschließend werden templates stets neu geladen.

Hauptinhalt der Startseite bearbeiten

Durch die Notation '{{ include('@ZikulaBootstrapTheme/Body/' ~ themevars.home ~ '.html.twig') }}' wird der Hauptinhalt der Startseite durch eine include Anweisung eingebunden.

Mit '~ themevars.home ~' wird eine Variable in die Anweisung eingebunden, die durch eine Einstellung im aktivierten Theme befüllt wird. Wenn in diesen Einstellungen für die Startseite 'eine Spalte' aktiviert ist, kann der Hauptinhalt am template 'Body/1col.html.twig' angepaßt werden.

Eine Spalte im Hauptinhalt der Startseite

Durch die Anweisung '{{ maincontent|raw }}' wird der Inhalt eines Moduls (Erweiterung) in den Hauptinhalt der Startseite geladen.

Es ist möglich, weitere Container anzulegen oder mithilfe von Bootstrap die Startseite weiter zu strukturieren. Natürlich können auch Blöcke anderer Module eingebunden werden, doch dazu später mehr.

Fazit

Es ist nicht sonderlich kompliziert, Einfluß auf die Startseite zu nehmen. Notwendig dafür sind natürlich Html-Kenntnisse und für speziellere Aufgaben das Beherrschen von Twig-Anweisungen.

Die Startseite ist klar strukturiert durch einen Header, den Hauptinhalt ( befüllt durch Erweiterungen) und den Footer. Header und Footer können separat bearbeitet werden. Dazu mehr in weiteren Artikeln.

Nach Lesen dieses Artikels solltest Du wissen, wo Du Einfluß auf die Startseite nehmen kannst und wie Du Änderungen sichtbar machst. Im Produktivbetrieb muss der Parameter 'debug' in der 'customer_paramters.yml' wieder auf 'false' gesetzt werden.

Ähnliche Artikel mit entsprechenden Themen


Homepage erstellen - Bootstrap für Responsive Webdesign!
#Responsive Webdesign# ist inzwischen standard. Und das liegt nicht nur daran, dass Google mobile Webseiten... Mehr
ModuleStudio - Modul planen und erstellen - Teil 2
Im 1. Teil habt ihr erste Schritte zum Erstellen eines Moduls mit dem ModuleStudio kennen gelernt. Nun... Mehr
Php Application Framework Zikula - Theme-Entwicklung 3
Theme Entwicklung - Teil 3 - Blockposition und Block anlegen Für die Theme-Entwicklung ist es manchmal... Mehr

Kategorien

  • Themes
  • HTML
  • Bootstrap

Erstellung und Aktualisierung

Erstellung
Erstellt von michael.ueberschaer am 29.10.2017, 23:53
Letzte Aktualisierung
Aktualisiert von michael.ueberschaer am 27.10.2018, 14:38
Kategorien im Blog
Partner
Werbung


Die neuesten Downloads
  • Zikula 1.5.9
    Mehr lesen
  • Zikula 2.0.12
    Mehr lesen
  • Bootstrap Standard Theme
    Für Zikula 2.0.11 oder höher - For Zikula 2.0.11 or higher. Dieses Theme ist als...
    Mehr lesen
  • Blogging 1.1.0
    Mehrsprachiges Bloggen - Multilingual blogging
    Mehr lesen
  • AutoLinks 1.0.1
    Automatische Linkerstellung - Automatic link creation
    Mehr lesen