Templates bauen Teil 3
An unserem ersten Template Tag haben wir ein sehr einfaches Template erstellt, am zweiten Tag habe ich gleich mal mit unserem Override den Weihnachtsmann im Kamin versenkt. Bevor es aber Kekse und Milch gibt, müssen wir ein bisschen aufräumen.
Am heutigen Tag stelle ich Euch fünf Sachen vor, die wir noch mit unserem Template machen.
Tipp: Zum Schluss gibt es einen Link zum vollständigen Paket.
1) Sprachdateien hinzufügen.
Füge deinem Template eine Sprachdatei hinzu. So kann dieses nicht nur in mehrere Sprachen übersetzt werden, die Sprachstrings können dann auch über Sprach-Overrides überschrieben werden.
Dazu legst du folgende Ordnerstruktur an:
hohoho (unser Templateordner) index.php templateDetails.xml css template.css language de-DE de-DE.tpl_hohoho.ini de-DE.tpl_hohoho.sys.ini en-GB en-GB.tpl_hohoho.ini en-GB.tpl_hohoho.sys.ini
Du musst die Sprache nun noch in deiner templateDetails.xml folgendermaßen eintragen:
<languages folder="language"> <language tag="en-GB">en-GB/en-GB.tpl_hohoho.ini</language> <language tag="en-GB">en-GB/en-GB.tpl_hohoho.sys.ini</language> <language tag="de-DE">de-DE/de-DE.tpl_hohoho.ini</language> <language tag="de-DE">de-DE/de-DE.tpl_hohoho.sys.ini</language> </languages>
Die Angaben in der XML Datei kannst du dann in den Dateien mit der Endung .sys.ini folgendermaßen Übersetzen
HOHOHO=“HoHoHo Template” TPL_HOHOHO_DESC=“This is our HoHoHo Template” TPL_HOHOHO_POSITION_LINKS = “Left” TPL_HOHOHO_POSITION_RECHTS = “Right” TPL_HOHOHO_POSITION_OBEN = “Top” TPL_HOHOHO_POSITION_UNTEN= “Bottom”
Den Template Namen und die Modulpositionen kannst du in der templateDetails.xml Datei so lassen wie sie waren, denn in der XML werden die Sprachschlüssel automatisch erkannt.
Statt der deutschen Beschreibung, trägst du einfachhalber TPL_HOHOHO_DESC in den <description> Tag in der templateDetails.xml Datei ein.
Kopiere dir die ersten zwei Zeilen deiner Übersetzung auch in die Datei mit der Endung .ini.
HOHOHO=“HoHoHo Template” TPL_HOHOHO_DESC=“This is our HoHoHo Template”
Der Unterschied zwischen den Dateien mit .sys.ini und .ini ist der, dass die sys.ini für Übersetzungen während und nach dem Installationsvorgang und für die Benennung der Modulpositionen zuständig ist, die .ini Datei für den laufenden Betrieb und das Frontend.
Übersetzte Modulpositionen im Modul
2) Modulpositionen ein/ausblenden je nach Verfügbarkeit
Mit dem Befehl
$this->countModules('links');
stellst du fest ob auf der Position "links" ein Modul veröffentlicht ist. Wenn der aktuellen Seite auf dieser Position kein Modul zugewiesen ist, soll entsprechend kein Modul angezeigt werden.
Das wollen wir nun in unserem Basis Template von Tag 8 einbauen.
Aus unserem bisherigen Code:
<?php defined('_JEXEC') or die;
$templatepfad = $this->baseurl . '/templates/' . $this->template;
$this->addStyleSheet($templatepfad . '/css/template.css');
$langtag = substr($this->language, 0, 2);
?>
<!doctype html>
<html xml:lang="<?php echo $langtag; ?>" lang="<?php echo $langtag; ?>">
<head>
<jdoc:include type="head"/>
</head>
<body>
<div class="wrapper">
<div class="box oben">
<jdoc:include type="modules" name="oben"/>
</div>
<div class="box links">
<jdoc:include type="modules" name="links"/>
</div>
<div class="box inhalt">
<jdoc:include type="message"/>
<jdoc:include type="component"/>
</div>
<div class="box rechts">
<jdoc:include type="modules" name="rechts"/>
</div>
<div class="box unten">
<jdoc:include type="modules" name="unten"/>
</div>
</div>
</body>
</html>
wird also
<?php defined('_JEXEC') or die;
$templatepfad = $this->baseurl . '/templates/' . $this->template;
$this->addStyleSheet($templatepfad . '/css/template.css');
$langtag = substr($this->language, 0, 2);
/* Modulpositionen abprüfen*/
$links = ($this->countModules('links'));
$rechts = ($this->countModules('rechts'));
$oben = ($this->countModules('oben'));
$unten = ($this->countModules('unten'));
?>
<!doctype html>
<html xml:lang="<?php echo $langtag; ?>" lang="<?php echo $langtag; ?>">
<head>
<jdoc:include type="head"/>
</head>
<body>
<div class="wrapper">
<?php if ($oben) : ?>
<div class="box oben">
<jdoc:include type="modules" name="oben"/>
</div>
<?php endif ?>
<?php if ($links) : ?>
<div class="box links">
<jdoc:include type="modules" name="links"/>
</div>
<?php endif ?>
<div class="box inhalt">
<jdoc:include type="message"/>
<jdoc:include type="component"/>
</div>
<?php if ($rechts) : ?>
<div class="box rechts">
<jdoc:include type="modules" name="rechts"/>
</div>
<?php endif ?>
<?php if ($unten) : ?>
<div class="box unten">
<jdoc:include type="modules" name="unten"/>
</div>
<?php endif ?>
</div>
</body>
</html>
Probieren wir das mal in unserem Template aus und stellen die Module links, rechts und unten in unserem Modulmanager auf "unveröffentlicht".
Wir sehen nun nur noch unser eigenes Layout des "Newsflash Moduls", das wir gestern erstellt und auf der Position "oben" veröffentlicht haben und den Komponentenbereich in dem der Text “Frohe Weihnachten” veröffentlicht ist.
3) Templateparameter
Was nun, wenn wir auf dieser Seite keinen Komponenten Bereich einblenden wollen? Oder weitere Angaben im Template variieren wollen?
Mit Template Parametern kann man dem Template-Stil Felder hinzufügen, und unsere Wünsche wahr werden lassen.
Dazu fügst du in der templateDetails.xml folgenden Abschnitt unter den Sprachen hinzu:
<config>
<fields name="params">
<fieldset name="advanced">
<field
name="mainoutput"
label="TPL_HOHOHO_FIELD_MAINOUTPUT_LABEL"
description="TPL_HOHOHO_FIELD_MAINOUTPUT_DESC"
type="list"
default="1"
>
<option value="1">JYES</option>
<option value="">JNO</option>
</field>
</fieldset>
</fields>
</config>
Nun kannst du diesen Parameter mainoutput im Template abfragen und verwenden. So wie wir es für das Einblenden des Komponentenbereiches machen, können wir beliebig viele andere Merkmale unseres Templates mit eigenen Feldern steuern. Das könnten unterschiedliche Schriftarten, Farben, Layouts und noch viel mehr sein.
Der Code in unserem Template sieht nun so aus:
Oben bei den Parametern:
/* Parameter abfragen */
$komponente = ($this->params->get('mainoutput'));
...und unten im Layout:
<?php if ($komponente == "1") : ?> <div class="box inhalt"> <jdoc:include type="message"/> <jdoc:include type="component"/> </div> <?php endif ?>
Zum Schluss kopieren wir den Templatestil HoHoHo-Standard und erstellen einen Templatestil für die Startseiten HoHoHo-Home und blenden auf der Startseite / bzw. bei mehrsprachigen Seiten auf den Startseiten den Komponentenbereich aus. Vergesse nicht, die neuen Sprachstrings in deinen Übersetzungsdateien hinzuzufügen.
4) bootstrap.framework, jquery.framework
// Skripte laden
// jQuery Skript von Joomla! laden
JHtml::_('jquery.framework');
// Bootstrap von Joomla! einbinden
// (Die Bootstrap Datei muss nicht extra geladen werden,
// nur in den richtigen Ordner verschoben werden)
JHtml::_('bootstrap.framework');
In unserem Beispieltemplate nutzen wir kein Framework und kein jQuery. Solltest du das aber in einem deiner Templates nutzen wollen, musst du das Joomla eigene Framework laden.
Damit stellst du sicher, dass die Stile und Skripte zuerst geladen werden und keine Konflikte entstehen.
Wenn du aber dein eigenes Bootstrap oder Jquery Skript hast? Kein Problem! Erstelle ein Media Override indem du dein Bootstrap und JQuery Skript
in deinen Templateordner unter /js/jui/ ablegst und deine Boostrap CSS Datei unter css/jui/
Joomla erkennt automatisch, dass du hier eine eigene Version zur Verfügung stellst und lädt diese Datei statt der System eigenen - auch für alle anderen Erweiterungen die das Framework ordentlich aufrufen.
5) sass macht Spaß
Statt css zu schreiben, kannst du deine Stile in .scss Dateien anlegen und dann zu einem css kompilieren.
Mit scss macht die Arbeit richtig Spaß wenn du den Code auf mehrere Dateien verteilst und ordentlich strukturierst.
Das könnte dann zum Beispiel so aussehen:
Wenn du Sass lernen möchtest, lese auf der offiziellen Seite mehr dazu:
http://sass-lang.com/
Es gäbe hier noch so zu viel mehr zu erzählen, man könnte ganze Bücher damit füllen ? ? ?
Ich habe dieses Weihnachtstemplate ? ? auf Github gestellt, so kannst du die Codebeispiele besser nachvollziehen. Ich freue mich auch über ein Sternchen auf GitHub. Hab nämlich selbst keinen Adventskalender bekommen. ?♀️
https://github.com/coolcat-creations/hohoho-template
So, das wars von mir - Viel Spaß mit dem morgigen ? Türchen!