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. z.B. Template mit dem Thema Natur. Das Template hat zwei Menüs und ein News Block auf der linken Seite.
5. Autor – Da schreibst Du Deinen Namen rein
6. 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 !!!