Website-Templates intelligenter gestalten

[Kebap]

2019-07-03

Es gibt mehrere wiederkehrende Layouts:

• Bereich Topleiste oben mit jeweils einem Kapitel ausgewählt ("Start", "Info" oder "Community")
• Bereich Navigation links
  • Darin meist allgemeine Punkte zum Kapitel sichtbar
  • Ggf. zum aktuellen Punkt noch weitere Unterpunkte eingeblendet
  • Zuletzt ein gleichbleibender Bereich am Ende der Navi mit Suche & Sponsor (siehe #3)
• Footer Bereich ganz unten zum Abschluss der Seite mit Links zu Impressum, etc.

Warum intelligentere Templates?

• Im Grunde müssten die meisten Seiten nur den Bereich dazwischen beschreiben, den "Inhalt".
• Zu den o.g. Punkten müssten höchstens einzelne Parameter angegeben werden, bspw. Kapitel festlegen.
• Der Rest wird aus Templates zusammengesetzt, so dass bspw. das Sponsorlogo nur an einer Stelle zentral geändert werden muss, nicht in X verschiedenen Templates
• Manche Seiten haben hingegen weitergehende Styles, osä. Dann wird zu starke Templatisierung schwieriger durchzuziehen.

Technischer Hintergrund

• Das aktuelle SHTML Konzept bietet nicht all zu viel Komfort, aber man kann Variablen übergeben! Das sollte theoretisch ausreichen.
• Siehe auch:
  • https://en.wikipedia.org/wiki/Server_Side_Includes
  • http://httpd.apache.org/docs/2.4/howto/ssi.html
• Alternativ kann immer noch ein anderes Framework in Betracht gezogen werden, falls SHTML zu kompliziert wird. Am besten eins, das statisches HTML auswirft.

Konzept

• Infos wie Titel usw. an Template übergeben: <!--#set var="Titel_der_Webseite" value="Feedback" -->
• Im Template kann dann geprüft werden, ob eine Info übergeben wurde, ansonsten wird ein Standardwert benutzt:

  <!--#if expr="Titel_der_Webseite" -->
  <title>MorgenGrauen - <!--#echo var="Titel_der_Webseite" --></title>
  <!--#else -->
  <title>MorgenGrauen - mg.mud.de - das größte deutsche textbasierte, kostenlose Online-Rollenspiel</title>
  <!--#endif --> 

Fortschritt

• Der letzte Test war halbwegs zufriedenstellend. Die komplette Testseite wurde mit wenigen Parametern und Templates fertiggestellt:

<!--#set var="titel" value="Test der neuen Templates" --> 
<!--#set var="kapitel" value="0" --> 
<!--#set var="navi" value="nav_howto" --> 
<!--#set var="navi_gruppe" value="nav_sub_hilfe" --> 
<!--#set var="navi_eltern" value="nav_hilfe" --> 

<!--#include virtual="/doc/anfang.shtml" -->
<h1><!--#echo var="titel" --></h1>

<p>Los geht's!</p>
<ul>
    <li>Titel: <!--#echo var="titel" --></li>
    <li>Kapitel: <!--#echo var="kapitel" --></li>
    <li>Navigationspunkt: <!--#echo var="navi" --></li>
    <li>Navigationsgruppe: <!--#echo var="navi_gruppe" --></li>
    <li>&uuml;bergeordneter Navigationspunkt: <!--#echo var="navi_eltern" --></li>
</ul>

<!--#include virtual="/doc/ende.shtml" -->

Dateistruktur

• Es werden hierfür folgende Templates benutzt
  • Anfang
  • HTML Head
  • Topleiste mit Kapiteln oben
  • Navigation komplett (bislang nur fürs erste Kapitel realisiert)
  • Navigation Ende mit Suche usw.
  • MG Logos
  • Div zum Hauptbereich öffnen
  • Ende
  • Div zum Hauptbereich schließen
  • Footer

Bislang genutzte Seitenstrukturen & Template-Nutzung:

• Content-Seite definiert selbst HTML und ggf. erste HEAD Einstellungen
• Head
  • mit vielen Meta-Standardwerten, Titel, Favicon, CSS
  • Manche Content-Seiten wollen diese selbst definieren und nutzen das Template nicht
• Content-Seite ergänzt ggf. weiteres CSS v.a. für Navi-Unterpunkte, schließt HEAD, beginnt BODY
• Navigation - in diversen Ausprägungen:
  • Typ A: Navigation, NavigationI oder NavigationC
    • Jeweils eine andere Datei für ein anderes Kapitel: Start, (I)nfo, (C)ommunity
    • Bereich Topleiste mit Kapiteln oben
    • Bereich Navigation links mit Punkten, Unterpunkten, Suche, Sponsor
    • MG Logos
  • Typ 1: Navigation1, Navigation2 oder Navigation3
    • Jeweils eine andere Datei für ein anderes Kapitel: 1-Start, 2-Info, 3-Community
    • Untertemplates für Topleiste: Navibuttons1, Navibuttons2 oder Navibuttons3
    • Bereich Navigation links mit Punkten, Unterpunkten
    • Untertemplate Navifooter für Suche & Sponsor - ein Template für alle Kapitel :)
    • MG Logos
• Content-Seite eröffnet DIV für den Hauptinhalt
• Content - eigentlicher Inhalt
• Disclaimer
• Content-Seite schließt BODY und HTML