[TUTORIAL] Sinnvoll mehrere Templates nutzen

zyklopen

Schüler

Beiträge: 97

Wohnort: Jena

Beruf: Grafiker

1

Samstag, 6. November 2010, 01:29

Hallo,

mein größtes Problem bisher mit cms2day war es, dass man nicht wirklich verschiedene Seitenlayouts nutzen kann. Ich bin hier im Forum auf Antworten wie "kopier einfach das Template" gestoßen, doch ich will lediglich mit dem Aufbau variieren und auch keine z.B. CSS Dateien doppelt haben.

Da ist mir eingefallen, dass man ja den gesamten Header includen kann! Jetzt hier mal meine Anleitung, wie man sinnvoll und letztendlich kindereinfach mehrere Templates nutzt.

SCHRITT 1: DAS ROOT TEMPLATE

Zuerst legen wir ein Standard Template fest (am besten für die Startseite) wo alle Stylesheets, JS-Dateien und vorallem die tpl_mod.inc.php geladen wird. Im Root-Template Ordner befinden sich alle wichtigen Ordner (css, inc, js). Wir includen auch gleich die tpl_mod.inc.php.
In die index.html schreiben wir folgendes:

PHP-Quelltext

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>

<?php include("includes/templates/root/inc/tpl_mod.inc.php"); ?>

</head>
<body>


Seite 1

<?php page_content(); ?>


<?php page_footer(); ?>
</body>
</html>

SCHRITT 2: DER TEMPLATE MOD

Die TPL-Mod Datei befindet sich im "inc" Ordner des Root-Templates. Damit der head Bereich übersichtlich bleibt bevorzuge ich es das page_header script dort hinein zu schreiben. vorallem, wenn später noch eventuelle JS-Dateien geladen werden hat man alles an einer Stelle. Hier muss man dann aufpassen, dass man auf das Root-Template-Verzeichnis verlinkt. Der Code sieht dann folgendermaßen aus:

	PHP-Quelltext
1 2	echo page_header(); echo '<script src="',template_dir(),'/root/js/hier-brauche-ich-vielleicht-einmal-javascript.js"></script>';

SCHRITT 3: CONFIG.INC.PHP ANPASSEN

Da alle CSS/JS Dateien, die in der config.inc.php definiert sind immer aus dem jeweils verwendeten Template-Verzeichnis aufgerufen werden, müssen wir diese direkt dem Root-Template-Verzeichnis zuweisen. Der Code Ausschnitt muss dann folgendermaßen aussehen:

(Ausschnitt Zeile 270 -303)

PHP-Quelltext

    echo "<link rel="shortcut icon" type="image/x-icon" href="".$settings['template_dir']."/root/images/favicon.ico" />\n\n";
    echo "<link rel="stylesheet" type="text/css" href="".$settings['template_dir']."/root/css/main.css" media="screen" />\n";
    echo "<link rel="stylesheet" type="text/css" href="".$settings['template_dir']."/root/css/dynamic.css.php?seite=".$_GET['seite']."&amp;takeTPL=".$takeTPL."" media="screen" />\n";
    echo "<link rel="stylesheet" type="text/css" href="".$settings['template_dir']."/root/css/global.css" media="screen" />\n";
    echo "<link rel="stylesheet" type="text/css" href="".$settings['page_dir']."/includes/misc/lytebox/lytebox.css" media="screen" />\n";

    if ($page['type'] == "modul") {
    
        $modul = mysql_fetch_assoc(mysql_query("SELECT * FROM module WHERE code='".$page['inhalt']."'"));
        
        echo "<link rel="stylesheet" type="text/css" href="".$settings['page_dir']."/includes/misc/misc.css" media="screen" />\n";
        echo "<link rel="stylesheet" type="text/css" href="".$settings['page_dir']."/includes/module/".$modul['ordner']."/modul.css" media="screen" />\n\n";
        
    } else if ($page['type'] == "code") {
    
        preg_match('/page_load_modul\("(.*)"\);/', $page['inhalt'], $match);
        
        if (isset($match[0])) { 
        
            $modul = mysql_fetch_assoc(mysql_query("SELECT * FROM module WHERE code='%".$match[1]."%'"));
            
            echo "<link rel="stylesheet" type="text/css" href="".$settings['page_dir']."/includes/misc/misc.css" media="screen" />\n";
            echo "<link rel="stylesheet" type="text/css" href="".$settings['page_dir']."/includes/module/".$modul['ordner']."/modul.css" media="screen" />\n\n";
        
        } 
        
    } else {
    
        echo "<link rel="stylesheet" type="text/css" href="".$settings['page_dir']."/includes/misc/misc.css" media="screen" />\n\n";
    
    }

    echo "<script type="text/javascript" src="".$settings['page_dir']."/includes/misc/lytebox/lytebox.js"></script>\n";
    echo "<script type="text/javascript" src="".$settings['template_dir']."/root/js/template.js"></script>\n";

SCHRITT 4: DAS VARIABLE TEMPLATE

Nun zum Eigentlichen. Unserem variablen Template. Hierzu am besten die index.html des Root-Templates kopieren, in einen neuen Ordner und so umbenennen, wie das Template heißen soll und hochladen in den Template Ordner. Somit haben wir lediglich die index.html in dem Ordner. Hier kann man die index.html nun anders aufbauen:

PHP-Quelltext

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>

<?php include("includes/templates/root/inc/tpl_mod.inc.php"); ?>

</head>
<body>


Seite 2

<?php page_content(); ?>


<?php page_footer(); ?>
</body>
</html>

SCHRITT 4: DIE TEMPLATES NUTZEN

Natürlich nicht vergessen, die Templates im Backend zu installieren. Danach kann man diese direkt beim erstellen eines Beitrages auswählen. Nun kann man ganz einfach verschiedene Templates erstellen, die sich wirklich nur in der index.html unterscheiden.

Viel Spaß dabei!
Ich hoffe, ich konnte vorallem den Einsteigern hier gut helfen

MfG
Philipp Kühn

www.zyklopen.org

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »zyklopen« (6. November 2010, 01:46)

Zum Seitenanfang

Blyawon

Fortgeschrittener

Beiträge: 300

CMS Version: 3.9.2

Wohnort: Deutschland

Beruf: Art Director Digital Experience

Paypal:

2

Samstag, 6. November 2010, 12:49

Hah danke, sehr schön, sowas hat mir immer noch gefehlt.

Wie man es noch machen kann:
Zentrale Ordner /images, /css, /js unter den Templates anlegen, dann die css-Dateien Manuell im einzelnen Template einbinden, ein Template z.B. für die Home-Seite und eines für die "normalen" Seiten erstellen.

Aber deine Lösung ist schöner

fgampert.de

Zum Seitenanfang

Zyklopen

Schüler

Beiträge: 97

Wohnort: Jena

Beruf: Grafiker

3

Samstag, 6. November 2010, 13:06

Ja das geht auch. Allerdings werden nach deiner Variante alle Ordner im Template Ordner als Templates erkannt. Sodass ich dann ein "css" und "js" Template zum installieren hätte. Zwar nur ein Schönheitsfehler aber... naja..

Außerdem war es ja auch mein Ziel nicht in jedem Template den head bereich zu ändern. Wenn ich eine neue CSS Datei einfügen würde, dann müsste ich das bei alles templates in die index.html schreiben. Viel zu viel Aufwand für mich

Mfg
Philipp

www.zyklopen.org

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Zyklopen« (6. November 2010, 13:37)

Zum Seitenanfang

emet

Admin & Support

Beiträge: 2 530

Wohnort: Rhein/Main

Paypal:

4

Samstag, 6. November 2010, 20:28

Für den Laien ist es natürlich einfacher das Template zu kopieren und umzubennen - dann kleine Änderungen vornehmen.

Wir hatten vor fast einem Jahr über noch ausgefeiltere Dinge gesprochen, doch würde dies für den normalen User einfacch alles zu weit führen.

Deshalb haben wir auch unsere Templateverwaltung gelassen, denn über das Template selbst dynamic und inc sind bereits sehr viele Dinge möglich gemacht worden.

.
HTML, was ist das? Ein neues Männermagazin? Css.., was es so alles gibt!

News: http://www.cms2day.de/news/1/
Features: http://www.cms2day.de/cms-funktionen/

Zufrieden mit cms2day und unserer Arbeit/Support - Spenden (-Button links) sind herzlich Willkommen - Dankeschön.
.

Zum Seitenanfang

Zyklopen

Schüler

Beiträge: 97

Wohnort: Jena

Beruf: Grafiker

5

Samstag, 6. November 2010, 20:33

ja aber so ist doch auch relativ simpel. man kann das ja noch ein wenig weiterführen, dass wirklich alles rings um den content bereich included wird und man so bei mehreren templates nur noch das absolut notwendige anzupassen hat.

aber muss man ja auch immer ja nach belieben entscheiden was da angebracht ist.

MfG
Philipp

www.zyklopen.org