====== Blackcat Template erstellen ======





=== Template Struktur erstellen ===



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

{{:addons:tpl:bild1.jpg?200|}}


  -  Unter Modultyp - Template auswählen
  -  Modul-/Sprachname -  Den Sprachnamen angeben z.B Lerntemplate
  -  Verzeichnisname – Den Verzeichnisnamen angeben (Ich nehme immer den Sprachnamen von (2), aber alles klein geschrieben!!!
  -  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.//
  -  Autor – Da schreibst Du Deinen Namen rein

**Speichern klicken nicht vergessen!**

{{:addons:tpl:bild2.jpg?200|}}

So sieht dann die Grundstruktur des Verzeichnisses aus.
{{:addons:tpl:bild3.png?200|}}



=== Dateien/Verzeichnisse bearbeiten und/oder ergänzen ===


  * 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

<WRAP center round info 60%>
Der Ordner //nbproject// kann unbeachtet bleiben!
</WRAP>

**Datei info.php:**

{{ :addons:tpl:info.php.png?300 |}}
In dieser Datei fehlt die Angaben für das Menü.
Diese ergänzen wir jetzt mit:

<code>// Variablen für Menüs

$menu[1] = 'Hauptnavigation';</code>

Die komplette Datei sieht dann so aus:

<code><?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';
</code>


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 32x32 pixel wird im Backend angezeigt. 
Sie ist nicht zwingend notwendig!

{{:addons:tpl:bild9.png?200|}}

**Datei header.inc.php:**

Da schreib ich gar nicht viel zu [[addons:tpl:headers|(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.

{{:addons:tpl:bild10.png?200|}}

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



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

{{:addons:tpl:bild11.png?200|}}




**Anpassung index.tpl** 

<WRAP center round info 80%>
In der ersten Zeile sollte immer

<!DOCTYPE html>

stehen, sonst nix. Also keine "Ich bin der Author, etc.!"
</WRAP>


**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:
<code>
<!DOCTYPE html>
<html> 
<head>
    {get_page_headers()}
</head>
</code>

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:

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


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:

<WRAP center round info 100%>
**Info für Websitebaker Überläufer!!!**

Alles, was in WebsiteBaker eine Funktion war (z.B. page_content() oder page_title()), ist auch weiterhin eine Funktion. ({page_content()}, {page_title()}, ...)
Alles, was in WebsiteBaker eine Konstante war (z.B. WEBSITE_TITLE oder PAGE_ID), ist jetzt eine Variable. ({$WEBSITE_TITLE], {$PAGE_ID}, ...)
</WRAP>

**Das Menü**
<code>
{show_menu()}
</code>


**Den Seiteninhalt ersetzen**

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

<code>
{page_content()} 
</code>

Der Fussinhalt wird mit {page_footer} dargestellt.

<code>
{page_footer}
</code>

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

<code>
<!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>
</code>

**Mit CSS Formatierung**


Die template.css und die index.tpl mit CSS- Formatierung.
Es ist allerdinges eine sehr einfache css Formatierung!

template.css
<code>
* { 
    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;
}
</code>

index.tpl
<code>
<!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>
</code>

<WRAP center round download 60%>
Zum download, das komplette Template
{{:addons:tpl:lerntemplate.zip|}}
</WRAP>