Mittlerweile haben wir eine schön strukturierte Website mit vielen Artikel. Jetzt ist es an der Zeit mit der Erstellung der Skelette zu beginnen!
Viele Webmaster arbeiten mit den Standardskeletten und passen sie ihren Bedürfnissen an.
In diesem Tutorial werden wir von ganz von vorne anfangen und die Skelette komplett selber kreieren. Schritt für Schritt werden die einzelnen Schleifen hinzugefügt und zuletzt das graphische Interface (am Anfang mit einem extrem einfachen HTML-Gerüst, am Ende fügen wir dann graphische Elemente mit Hilfe von Tabellen hinzu). Diese Vorgehensweise hat mehrere Vorteile:
- es hilft, die Struktur der Seite während des Programmierens zu verstehen: Welche Schleife hängt von welcher ab, etc
- ohne graphische Elemente kann man am Anfang die Hierarchie der Informationen auf der Seite besser überblicken
- der HTML Code ist klarer: Überflüssige Informationen werden vermieden (was häufig bei copy-paste Code vorkommt).
Im weiteren werden wir also einen sehr simplen HTML Code anwenden (anfangs: keine Tabellen). Die Erstellung eines graphischen Interface dürfen Sie selbst am Ende des Tutorials realisieren.
Wir programmieren also den Code, Schritt für Schritt. Um ellenlange Seiten mit Code in diesem Tutorial zu vermeiden während wir eine bereits existierende Schleife erweitern, übernehmen wir nur den Codeteil, der uns interessiert. Um sich besser zurecht zu finden, beziehen wir uns immer auf die Namen der bereits existierenden Schleifen.
Die Basisseite
Wir beginnen mit der leeren Datei «artikel.html».
Total simpel, hier die Grundstruktur eines Artikels, ohne Navigationselemente:
<html>
<title>[#NOM_SITE_SPIP]
<BOUCLE_titel(ARTICLES){id_article}>#TITRE</BOUCLE_titel></title>
</head>
<body>
<blockquote>
<BOUCLE_main(ARTICLES){id_article}>
[<h3>(#SURTITRE)</h3]
<h2>#TITRE</h2>
[<h3>(#SOUSTITRE)</h3>]
[(#DATE|affdate)]
[(#LOGO_ARTICLE_RUBRIQUE|right)]
[<b>(#CHAPO|justifier)</b>]
[(#TEXTE|justifier)]
[<p align="right" align='justify'>(#LESAUTEURS)]
[<hr>(#PS)]
[<hr>(#NOTES)]
</BOUCLE_main>
</blockquote>
</body>
</html>
Simpel:
- Die Schleife BOUCLE_titel erlaubt das Anzeigen des Titels des Artikels im Header der Seite;
- Die Schleife BOUCLE_main enthält den gesamten Inhalt der Seite. Wir können weitere Schleifen in die Hauptschleife schreiben.
Die Infos über das Spiel erhalten
Unser HTML-Skelett wäre eine gute Basis für ein Standard-Webzine (alle wichtigen Informationen sind im Artikel enthalten), aber in unserem Fall fehlt uns eine wichtige Information! Um welches Spiel handelt es sich?
Tatsächlich haben wir uns dazu entschieden den Titel des Spiels nicht in den Artikel zu schreiben; dieser ist in dem Namen der Rubrik enthalten. Wir könnten uns damit begnügen auf die HIERARCHIE-Schleife zurückzugreifen, aber wir werden hier eine Gewohnheit einführen, die in unseren Beispielen immer wiederkehren wird: Man muss über den Artikel auf die Rubrik zurückgreifen, um den Namen des Spiels zu erhalten. (Das gleiche Prinzip gilt für das Logo; Mit dem Unterschied, dass der SPIP-Tag #LOGO_RUBRIQUE_ARTICLE diesen Schritt automatisch durchführt.)
Der Code folgt also immer dem selben Schema: Die Schleifen ARTICLES enthalten immer eine Schleife RUBRIQUES mit denen man eine Stufe höher gehen kann um den Titel des Games zu erhalten. Dies gilt für die Seiten in den Rubriken und auf der Seite mit der Inhaltsangabe.
Nehmen wir den Anfang unseres Codes, ganz am Anfang unserer Schleife BOUCLE_main:
<BOUCLE_main(ARTICLES){id_article}>
<BOUCLE_rubrik(RUBRIQUES){id_rubrique}>
<h1>#TITRE</h1>
</BOUCLE_rubrik>
...
Anzumerken ist, dass der Titel der Rubrik (#TITRE) mit der grössten Schriftart (h1) angezeigt wird. Der Titel der Rubrik, der normalerweise als Rubrikname eine Navigationshilfe darstellt, ist nun die elementare Hauptinfo des Artikels.
Um ein Schema der Navigation zu erhalten, zeigen wir die Hierarchie an. Wir beginnen mit der Rubrik, die die aktuelle Unterrubrik enthält, da uns nur die Liste der Kategorien des aktuellen Games interessiert (wir kennen ja bereits den Namen der letzten Unterrubrik - der Name des Games). Wir begeben uns also in das Innere der Schleife BOUCLE_rubrik, und fügen BOUCLE_rub_parent hinzu (diese erlaubt eine Stufe höher zu gehen), und von hier aus beginnen wir die Abfrage der Hierarchie:
<BOUCLE_rubrik(RUBRIQUES){id_rubrique}>
<BOUCLE_rub_parent(RUBRIQUES){id_enfant}>
<BOUCLE_hierarchie(HIERARCHIE){id_rubrique}{" : "}>
<a href="#URL_RUBRIQUE">#TITRE</a>
</BOUCLE_hierarchie>
</BOUCLE_rub_parent>
<h1>#TITRE</h1>
</BOUCLE_rubrik>
Wir belassen die Seite «artikel.html» erstmal so wie sie ist. Nichts kompliziertes bisher. Es fehlt noch die Verwaltung der Schlagwörter und die Beziehungen zwischen den einzelnen Artikeln derselben Rubrik (das heisst, die das selbe Game behandelt).
Einzige Kniffeligkeit: Um die Hierarchie anzuzeigen, muss man auf das Niveau der Rubrik hochgehen, die den Artikel enthält, um den Namen des Spiels zu erhalten und dann noch den eine Stufe höher (zur Rubrik die die Rubrik enthält die das Game enthält).