HTML 5 Baukasten
HTML Template mit Bildern und Kommentaren zu den einzelnen Bereichen
Das folgende Beispiel veranschaulicht die Funktionsweise von LiBe CMS.
Der folgende Quellcode ist auf das Wesentliche beschränkt. Die HTML Tags sowie id und class Attribute können je nach Anforderung hinzugefügt oder angepasst werden, bzw. können die einzelnen Bereiche an anderen Positionen oder mit zusätzlichen Abfragen in den Vorlagen verwendet werden.
Der Quellcode oder Teile davon können als Basis für die index.php deines Templates verwendet werden. (Ordner /template/mein Template Ordner/index.php)
Die Datei index.php beinhaltet alle Elemente der Seite, vom Header bis zum Footer, bestimmte Elemente können mittels PHP Abfragen ausgeblendet werden. (z.B. anhand der Variablen $start, $level, $article,$existing_sub, $menuforlevel[$??], siehe den Beispiel Quellcode auf dieser Seite und für Details: Quellcode Anpassen )
Legende:
HTML CODE ist schwarz
PHP CODE ist blau markiert
Kommentare sind grau
Die Bilder sind Praxisbeispiele unter Anwendung entsprechender css Definitionen für den jeweiligen Codeblock.
Source Code Beispiel: index.php
<!DOCTYPE html>
<html lang="de">
<?php /*----------------------------------------------------------------------------------------------------------
Head
--------------------------------------------------------------------------------------------------------------*/ ?>
<head>
<?php //HEAD enthält meta, title, Stylesheets und Skripts... ?>
<meta charset="utf-8" />
<title><?php echo $title;?></title>
<link rel="stylesheet" href="<?php echo $firstparturl,$templatedir;?>main.css" type="text/css" />
<?php if (!empty($meta)) echo "<meta name=\"description\" content=\"", $meta,"\" />";?>
<?php //damit die Seite schneller geladen wird, kann jquery und entsprechende jquery plugins am Ende des HMTL Codes eingebunden werden (vor </body>)... sämtliche zusätzliche Skripts innerhalb der Seite können mit $bottomload.='<script></script>'; auch im Template hinzugefügt werden.?>
<?php $bottomload="<script type=\"text/javascript\" src=\"".$firstparturl."plugins/jquery/jquery-2.2.1.min.js\"></script>";
</head>
<?php /*----------------------------------------------------------------------------------------------------------
Body
--------------------------------------------------------------------------------------------------------------*/ ?>
<body>
<header> 
<?php //Überschrift Titel und Beschreibung... ?>
<h1><?php echo $title;?></h1><?php //display the title of the topic ?>
<h2><?php if (!empty($smalldescription)) echo $smalldescription; else echo $page_description;?></h2> <?php //Kurzberschreibung des Themas, bzw. Seitenbeschreibung ?>
</header>
<?php /*----------------------------------------------------------------------------------------------------------
NAV Site Navigation 
--------------------------------------------------------------------------------------------------------------*/ ?>
<nav>
<?php //Seiten Navigation... ?>
<ul><?php //buildmenuul wird mittels <li> gestartet, vorher muss also noch <ul> definiert werden?>
<?php // hier können css class Parameter definiert werden.
$css_class_dropdown="dropdown";//class wird auf <li> angewandt, wenn ein Untermenü vorhanden ist
$css_class_dropdown_depth="1";//in welcher Ebene (level) soll die Klasse angewandt werden ...
$css_class_li_active="active";//class für den gerade aktiven Artikel
$css_class_li_level[0]="li0";//$css_class_li_level ist ein Array mittels welcher ein <li class=" Parameter für eine bestimmte Ebene (level) gesetzt werden kann
$css_class_a_level[0]="a0";//$css_class_a_level ist ein Array mittels welcher ein "<a class=" Parameter für eine bestimmte Ebene (level) gesetzt werden kann
$css_class_ul_level[0]="ul0";//$css_class_ul_level ist ein Array mittels welcher ein "<ul class=" Parameter für eine bestimmte Ebene (level) gesetzt werden kann
echo buildmenuul("2",0, "2"); //erzeugt ein verschachteltes ul li menu: <li><a href=""></a><ul><li><a href=""></a></li></ul></li>
//buildmenuul("end_level","submenu","collapse","limit")
//end_level bedeuted für verschachtelte ul bis zu welcher Ebene (Level) diese erzeugt werden soll.
//submenu sollte 0 sein, außer es werden zusätzliche Menüs verwendet, siehe: http://cms.libe.net/index.php/mehrere-Mens-erstellen
//collapse bedeuted: Menu ausklappen bis zum jeweiligen Level (Ebene)
//limit ... limitiert die Anzahl der Links im Menü: die Funktion generiert nur soviel Links wie im Limit definiert.
unset($css_class_dropdown);unset($css_class_li_level);unset($css_class_a_level);unset($css_class_ul_level); //um Ende können die Variablen wieder frei gegeben werden um nicht unabsichtlich eine andere Funktion zu manipulieren ...
?>
</ul>
</nav>
<?php /*----------------------------------------------------------------------------------------------------------
Breadcrumb NAV 
--------------------------------------------------------------------------------------------------------------*/ ?>
<nav>
<?php //breadcrumb... Links zu den nächst höheren Ebenen / Levels
if ($start!=1) //nur wenn nicht die Startseite
echo "<ol><li><a href=$firstparturl>HOME</a></li>".breadcrumb("<li><a href=\"%linkurl%\">%titlemenu%</a></li>")."<li>$titel</li> </ol>"; //Der HTML Code der Funktion breadcrum kann frei definiert werden, siehe: http://cms.libe.net/index.php/Vorlagen-anpassen#platzhalterhtmltemplate
?>
</nav>
<?php /*----------------------------------------------------------------------------------------------------------
Article 
--------------------------------------------------------------------------------------------------------------*/ ?>
<article>
<?php //Text des Hauptartikels ... ?>
<?php echo $text;?>
<?php //Änderungsdatum des Artikels wenn kein Unterartikel existiert, sollte das Veröffentlichungsdatum neuer als das Änderungsdatum sein, wird dies angepasst: ..?>
<?php if ($start!=1 and $existing_sub!=1) echo "<div class=\"pull-right changedate\">$lang_txt_030: ".$changedate."</div>" ;?>
</article>
<?php /*----------------------------------------------------------------------------------------------------------
Section News Startpage 
--------------------------------------------------------------------------------------------------------------*/ ?>
<section>
<?php //News Bereich Startseite: ...
if ($start==1) //nur wenn es sich um die Startseite handelt
{
$html_template="<li><a href=\"%linkurl%\"><img alt=\"%titlemenu%\" src=\"%image150%\"></a>
%datetime%
<a href=\"%linkurl%\">%titlemenu%</a>
%textpagebreak%
<a href=\"%linkurl%\">%smalldescription%</a>
</li>"; //der HTML Code kann frei angepasst werden, siehe: http://cms.libe.net/index.php/Vorlagen-anpassen#platzhalterhtmltemplate
$newest= newest(4,0);//prepare Variable Newest:
//newest("Anzahl der News-beiträge","Start von")
//Start von 0, bedeuted die neuesten Artikel; 3 zum Beispiel: starte vom 3t neuesten Artikel: Haupsächlich verwendet um ältere Artikel ev. ein anderes Layout zu geben ...
if (strlen($newest)>81) //News nur anzeigen, wenn News vorhanden
{
echo "<h1 class=\"page-header\">New Topics <a href=\"$firstparturl"."rss.php\"><img src=\"". $firstparturl. "image/rss.png\" alt=\"Newsfeed\" style=\"border:0\"></a></h1>";//Überschrift und Link zum Newsfeed (News RSS)
echo $newest;
}
}?>
</section>
<?php /*----------------------------------------------------------------------------------------------------------
Section Feedbacks 
--------------------------------------------------------------------------------------------------------------*/ ?>
<section>
<?php //Feedback-Modul laden
if ($addfeedback==1) //wenn die Feedback Checkbox im Artikel ausgewählt wurde:
{
echo "<h1>Feedback:</h1>";
include("plugins/libe/feedback.php");
}
?>
</section>
<?php /*----------------------------------------------------------------------------------------------------------
Menu Subtopics 
--------------------------------------------------------------------------------------------------------------*/ ?>
<section>
<?php //wenn es untergeordnete Artikel gibt, kann davon ein Menü erzeugt werden (Verknüpfung und Minibild)
//Variablen die in buildmenu verwendet werden können:
$css_clearfix=3;//schreibe bei jedem 3ten Artikel einen extra HTML Code: z.B. Zeilenumbruch, ...
$css_clearfix_tag="<div></div>";//hier der HTML Code für jeden 3ten Artikel
$html_template="<a href=\"%linkurl%\"><img alt=\"%titlemenu%\" class=\"img-thumbnail scale\" src=\"%image150%\"></a>
%titlemenu% %smalldescription% %textpagebreak%
<a href=\"%linkurl%\">%titlemenu%</a>\n";//HTML Template for buildmenu siehe Platzhalter html_template
if ($start!=1 and $search!=1 and $existing_sub) //wenn nicht die Startseite, nicht dieSuche und wenn ein untergeordneter Artikel existiert
echo buildmenu($level+1,$level+1,$level+1);//Aufruf der Funktion unter Berücksichtigung von $html_template $level+1 bedeuted die Artikel der nächst höheren Ebene (Level)
unset($html_template);unset($css_clearfix);unset($css_clearfix_tag);//Variablen freigeben
?>
</section>
<?php /*----------------------------------------------------------------------------------------------------------
Nav Previous Next 
--------------------------------------------------------------------------------------------------------------*/ ?>
<?php if ($start!=1 and $level>1){//Anzeigen, nur wenn nicht die Startseite und eine Linktiefe (Ebene) grösser 1; wird also erst bei Artikeln angezeigt die in 2ter Ebene oder tiefer sind.
?>
<nav>
<?php //vorheriger und nächster Artikel
echo prev_topic("<a href=\"%linkurl%#breadcrumb\" class=\"prev_topic\">%titlemenu%</a>\n");//der HTML Code der Funktion prev_topic kann frei definiert werden, siehe: Platzhalter html_template
echo next_topic("<a href=\"%linkurl%#breadcrumb\" class=\"next_topic\">%titlemenu%</a>\n");//der HTML Code der Funktion next_topic kann frei definiert werden, siehe:: Platzhalter html_template
?>
</nav>
<?php }//Ende der Auswahl start und level?>
<?php /*----------------------------------------------------------------------------------------------------------
Form Search 
--------------------------------------------------------------------------------------------------------------*/ ?>
<form role="search" action="<?php echo $firstparturl;?>index.php/search/" method="get">
<input placeholder="Search on this Page" type="search" name="s" value="" />
<input type="submit" value="suche"/>
</form>
<?php /*----------------------------------------------------------------------------------------------------------
Footer 
--------------------------------------------------------------------------------------------------------------*/ ?>
<footer>
<?php echo loadcontent("footer-text");//lädt den Inhalt des Spezialartikels Footer-text, mittels loadcontent können Bereiche der Seite mittels des Artikel-Editors bearbeitet werden. Diese Artikel müssen nicht im Menü angelegt werden.?>
<?php //Footer enthält Copyright, Impressum, ... ?>
Copyright Notice,
<small><a href="http://cms.libe.net">powered by LiBe CMS</a></small>
<?php
echo $page_title;//zeigt den Seitentitel, dieser ist in den Einstellungen definiert
echo $page_description;//zeigt die Seitenbeschreibung, diese ist in den Einstellungen definiert
if ($start==1) echo singlelink("Impressum"); //zeigt einen Link zu Impressum wenn ein Inhalt in Impressum geschreiben wurde.
?>
</footer>
<?php //lädt Skripts die im Quellcode definiert wurden
echo $bottomload;?>
<?php include("plugins/libe/counter.php"); //aktiviert den Besucherzähler: Voraussetzung dafür ist der Ordner /counter auf dem Webserver
?>
</body>
</html>
Feedback:
there is no feedback to this topic
maybe you will write one?
leave a comment:
(you do not need to sign in, simply post)