Im Backend unter Addons (1) auf Neues Addon (2) erstellen klicken.

1. Unter Modultyp - Template auswählen
2. Modul-/Sprachname - Den Sprachnamen angeben z.B Lerntemplate
3. Verzeichnisname – Den Verzeichnisnamen angeben (Ich nehme immer den Sprachnamen von (2) Aber alles klein geschrieben!!!
4. Beschreibung zum Template – Was kann das Template, für was ist es gedacht.

z.B. Template mit dem Thema Natur. Das Template hat zwei Menüs und ein News Block auf der linken Seite.

1. Autor – Da schreibst Du Deinen Namen rein
2. Speichern klicken nicht vergessen!

So sieht dann die Grundstruktur des Verzeichnisses aus.

• Jeweils einen Ordner mit dem Namen default in den Ordnern css und templates anlegen.
• Im Ordner css\default noch einen Ordner images anlegen
• In den Ordner css\default\images gegebenenfalls die favicon.ico kopieren
• Im Ordner css\default eine Datei template.css anlegen
• Im Ordner template\default eine Datei index.tpl anlegen

Datei info.php:

In dieser Datei fehlt die Angaben für das Menü. Diese ergänzen wir jetzt mit:

// Variablen für Menüs

$menu[1] = 'Hauptnavigation';

Die komplette Datei sieht dann so aus:

<?php

/**
 *   This program is free software; you can redistribute it and/or modify
 *   it under the terms of the GNU General Public License as published by
 *   the Free Software Foundation; either version 3 of the License, or (at
 *   your option) any later version.
 *
 *   This program is distributed in the hope that it will be useful, but
 *   WITHOUT ANY WARRANTY; without even the implied warranty of
 *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *   General Public License for more details.
 *
 *   You should have received a copy of the GNU General Public License
 *   along with this program; if not, see <http://www.gnu.org/licenses/>.
 *
 *   @author          Matthias Blatt
 *   @copyright       2014, Matthias Blatt
 *   @link            http://blackcat-cms.org
 *   @license         http://www.gnu.org/licenses/gpl.html
 *   @category        CAT_Templates
 *   @package         LernTemplate
 *
 */

if (defined('CAT_PATH')) {
    if (defined('CAT_VERSION')) include(CAT_PATH.'/framework/class.secure.php');
} elseif (file_exists($_SERVER['DOCUMENT_ROOT'].'/framework/class.secure.php')) {
    include($_SERVER['DOCUMENT_ROOT'].'/framework/class.secure.php');
} else {
    $subs = explode('/', dirname($_SERVER['SCRIPT_NAME']));    $dir = $_SERVER['DOCUMENT_ROOT'];
    $inc = false;
    foreach ($subs as $sub) {
        if (empty($sub)) continue; $dir .= '/'.$sub;
        if (file_exists($dir.'/framework/class.secure.php')) {
            include($dir.'/framework/class.secure.php'); $inc = true;    break;
        }
    }
    if (!$inc) trigger_error(sprintf("[ <b>%s</b> ] Can't include class.secure.php!", $_SERVER['SCRIPT_NAME']), E_USER_ERROR);
}

$template_name = "LernTemplate";
$template_directory = "lerntemplate";
$template_type = "template";
$template_function = "template";
$template_description = "Was kann das Template";
$template_version = "0.1";
$template_platform = "1.x";
$template_author = "Matthias Blatt";
$template_guid = "42A157F2-55AE-1642-F21D-62F1B51D9705";
$template_license = "GNU General Public License";

// Variablen für Menüs
$menu[1]				= 'Hauptnavigation';

Mit den Variablen $menü[x] werden die Menüs die im Frontend verfügbar sein sollen angelegt. Im obigen Beispiel gibt es ein Menü mit dem Namen Hauptnavigation. Die Namen sind frei wählbar.

Datei index.php:

Kann so bleiben wie Sie ist!

Datei icon.png:

Diese Grafik 32×32 pixel wird im Backend angezeigt. Sie ist nicht zwingend notwendig!

Datei header.inc.php:

Da schreib ich gar nicht viel zu (gibt es ja hier), kopiere die Datei aus dem mojito Verzeichnis 'templates/mojito/css/default/template.css' in das Verzeichnis 'templates/lerntemplate/css/default/template.css' und ändere die Pfadangabe in Zeile 51.

'css' => array(
			array(
				'media'		=> 'all',
				'file'		=> 'templates/lerntemplate/css/default/template.css'
			)

genauso in Zeile 69 und 73 (Zeilenangabe ohne Gewähr, können sich ja bei Version-updates ändern)

Anpassung index.tpl

Den HTML-Header ersetzen.

Der HTML-Header besteht aus einer Reihe von Angaben, etwa META-Angaben, dem Seitentitel, der externen CSS-Datei, usw. Kurz, alles, was zwischen <head> und </head> steht.

Der komplette Bereich wird durch eine einzige Angabe „{get_page_headers()}“ ersetzt:

<!DOCTYPE html>
<html> 
<head>
    {get_page_headers()}
</head>

Der Aufruf {get_page_headers()} ist ein Platzhalter, der eine Funktion der Template Engine Dwoo aufruft. Diese füllt nun den HTML-Header mit allem, was notwendig ist - dem Seitentitel, dem CSS, den META-Angaben, eventuell zu ladenden JavaScripts, usw.

Der Platzhalter für den Seitentitel heißt {page_title()} Der Webseiten-Titel kann ebenfalls benutzt werden.

Das Ergebnis sieht also folgendermaßen aus:

<body>
     {page_title()}
 </br>
     {$WEBSITE_TITLE}        
 </body>

Hier fällt nun ein Unterschied auf: Es gibt eine zweite Art von Platzhaltern, die keine Funktionen der Template Engine aufrufen, sondern Variablen repräsentieren. Grundsätzlich kann man sich folgendes merken:

Das Menü

{show_menu()}

Den Seiteninhalt ersetzen

Durch den Aufruf {page_content()}, ebenfalls ein Platzhalter wie schon oben beschrieben wird die Seite mit dem eigentlichen Inhalt befüllt.

{page_content()} 

Der Fussinhalt wird mit {page_footer} dargestellt.

{page_footer}

Die komplette index.tpl ohne css Formatierung sieht so aus:

<!doctype html>
<html>    
<head>	
	{get_page_headers}
</head>
<body>
    
        {page_title()}
   
        
</br>
        {$WEBSITE_TITLE} 
</br>
        {show_menu()}
</br>
        {page_content()}
</br>
        {page_footer}
</br>
 </body>
 
</html>

Mit CSS Formatierung

Die template.css und die index.tpl, damit es etwas schöner wird, eine sehr einfache css Formatierung.

template.css

* { 
    margin: 0; 
    padding: 0;
}

#kopf {
    width: 100%;
    min-height: 100px;
    border: 1px solid black;
}

#menü {
    position: absolute;
    width: 150px;
    min-height: 400px;
    border: 1px solid black;
    padding: 20px;
}   

#inhalt { 
    margin-left: 191px;
    width: 1000px;
    min-height: 400px;
    padding: 2%;
    border: 1px solid black;
}

#fuss {
    display: flex;
    width: 100%;
    min-height: 100px;
    border: 1px solid black;
}

index.tpl

<!doctype html>
<html>    
<head>	
	{get_page_headers}
</head>
<body>
    
    <h1>{page_title()}</h1>
   
        
    <div id="kopf">{$WEBSITE_TITLE}</div>
    
    <div id="menü">{show_menu()}</div>
    
    <div id="inhalt">{page_content()}</div>
        
    <div id="fuss">{page_footer}</div>
        
 </body>
 
</html>

!!! noch nicht fertig !!!