HowTo: Serenditpity als CMS nutzen

[konus]

Hallo,
ich betreibe seit einiger Zeit ein privates Blog auf Basis von S9Y. Da ich mit der Funktionalität und dem Support hier sehr zufrieden bin, habe ich darüber nachgedacht, wie es gelingt, für die dringend notwendige Überarbeitung unserer Firmenhomepage ebenfalls auf S9Y zu setzen.

Da S9Y nicht primär dafür ausgelegt ist, sind einige Hürden zu nehmen. Bisher kann ich Euch daher hier noch kein fertiges Ergebnis präsentieren, aber heute konnte das erste Problem gelöst werden und ich wollte Euch die Lösung nicht vorenthalten.

Hintergrund: Unsere Firma ist ein Ingenieurbüro. Die Webseite dient primär der Selbstpräsentation unserer Leistung und der Darstellung unserer Referenzprojekte. Da die Referenzprojekte recht zahlreich sind, und ständig aktualisiert werden müssen, bietet sich hier die Verwendung eines CMS-Systems an.

Um die Referenzprojekte zur ordnen ist eine hierarchischen Struktur notwendig. Dazu möchte ich die Kategorien verwenden. Was fehlt ist eine saubere Navigation dazu. Es soll daher das serendipity_categories_plugin verwendet und angepasst werden.

Schritt 1: Anzeigereihenfolge der Kategorien bestimmen
Das serendipity_categories_plugin erlaubt die Anlage von geschachtelten Unterkategorien in der Form

Code: Select all

main category
main category
   sub category
   sub category
      subsub catagory
main category
   sub category
   sub category

Um die Anzeigereihenfolge frei bestimmen zu können, wurde in dem Feld "Beschreibung" eine Nummerierung eingetragen, nach der sortiert werden kann:

Code: Select all

main category           1.
main category           2.
   sub category         2.1.
   sub category         2.2.
      subsub catagory   2.2.1.
main category           3.
   sub category         3.1.
   sub category         3.2.

Die Konfiguration des serendipity_categories_plugin erfolgt wie folgt:
Die gewählte Oberkategorie verstecken? NEIN
Sortierung: "Beschreibung", "aufsteigend"
mehrere Kategorien gleichzeitig darzustellen?: NEIN
Kategorien verstecken: NEIN
Smarty-Templating aktivieren?: JA (wird für die spätere Anpassung benötigt)

Bei der Anlage der einzelnen Kategorien kann man Name und Beschreibung eintragen, die übergeordnete Kategorie auswählen und angeben, ob die Artikel der untergeordneten Kategorien auch innerhalb der übergeordneten Kategorien sichtbar sein sollen. Hier habe ich NEIN gewählt, denn pro Navigationspunkt sollen immer nur die Einträge derselben sichtbar sein. Die übergeordneten Navigationpunkte werden später mit statischen Seiten gefüllt, die eine allgemeine Erläuterung beinhalten.

[konus]

Schritt 2: Navigationspunkte ausblenden
Das Kategorie-Plugin ist auf die Filterung und Anzeige der Artikel ausgelegt. Ich wollte damit aber eine klassische Navigation realisieren, wie man sie von vielen Webseiten kennt. Bei Auswahl eines Menüpunktes sol die Navigation an dieser Stelle aufklappen und die verfügbaren Untermenüpunkte anzeigen.

Um bei dem obigen Beispiel zu bleiben sieht die Navigation bei Betreten der Seite so aus:

Code: Select all

main category           1. 
main category           2. 
main category           3.

klickt man auf "main category 2." ändert sich die Navigation in

Code: Select all

main category           1. 
main category           2.  (aktiv)
   sub category         2.1. 
   sub category         2.2. 
main category           3.

Bei Auswahl von 2.2 wird zusätzlich 2.2.1 sichtbar und bei Anwahl von 3. sieht es so aus:

Code: Select all

main category           1. 
main category           2. 
main category           3. (aktiv)
   sub category         3.1.
   sub category         3.2.

Die vorgestellte Anforderung wird vom serendipity_categories_plugin im Originalzustand nicht unterstützt. Garvin hat daher als Auftragsprogrammierung einige Anpassungen durchgeführt und mir gestattet, diese Änderungen hier zu veröffentlichen. Vom Prinzip wird durch die Modifikation das vorhandene Plugin durch die Fähigkeit ergänzt, jede Kategory mit einer CSS-ID zu markieren. Anhand der CSS-ID kann dann die Kategorie versteckt oder auch hervorgehoben werden (wenn ausgewählt).

Im einzelnen sind dazu die folgenden Änderungen notwendig (Kategorien-Seitenleisten-plugin ist installiert und wie oben konfiguriert):
Kopieren der Datei plugin_categories.tpl von templates/default nach dem verwendeten Templateverzeichnis, in meinem Fall Bulletproof und wie folgt anpassen:
1. Am Anfang der Datei folgendes einfügen:

Code: Select all

{$categories|@serendipity_template_parseCategories:$category_info}

2. Innerhalb der foreach-Schleife der Datei dem <li> Element innerhalb
der Klasse ein {$plugin_category.css} einsetzen, z.b. so:

Code: Select all

<li class="category_depth{$plugin_category.catdepth}
category_{$plugin_category.categoryid} {$plugin_category.css}">

Die config.inc.php des Templates anpassen. Dazu direkt
unterhalb nach dem öffnenden <?php den folgenden Code einfügen:

Code: Select all

<?php
if (IN_serendipity !== true) {
  die ("Don't hack!");
}

function serendipity_template_parseCategories(&$categories, $selected) {
    global $serendipity;

    $current_cats = array(0 => 0);
    if (is_array($selected) && isset($selected['categoryid'])) {
        $current_cats[] = $selected['categoryid'];
        $last_parent = $selected['parentid'];
        $rootcat = $last_parent;
        while ($last_parent != 0) {
            $par = serendipity_db_query("SELECT * FROM {$serendipity['dbPrefix']}category WHERE categoryid = " . (int)$last_parent, true, 'assoc', false, 'parentid');
            $current_cats[] = $last_parent;
            if ($par['parentid'] != 0) {
                $rootcat = $last_parent;
            }
            $last_parent = $par['parentid'];
        }
    } else {
        $selected['categoryid'] = 0;
    }

    foreach($categories AS $catidx => $category) {
        if ($category['parentid'] == 0 || // Always show first-level.
            in_array($category['categoryid'], $current_cats) || // Always show parts of the selected tree
            in_array($category['parentid'], $current_cats) || // Always show siblings of the selected tree
            $category['parentid'] == $selected['categoryid'] || // Always show parents of the selected tree
            $category['parentid'] == $selected['parentid'] // Always show sibllings of the selected tree
        ) {
            $categories[$catidx]['css'] = 'cat_active';
        } else {
            $categories[$catidx]['css'] = 'cat_inactive';
        }

        if ($category['categoryid'] == $selected['categoryid']) {
            $categories[$catidx]['css'] .= ' cat_selected';
        }
    }

    return false;
}
    
$serendipity['smarty']->register_modifier('serendipity_template_parseCategories', 'serendipity_template_parseCategories');

Als drittes sind in der verwendeten CSS-Datei (bei Bulletproof z.B in der user.css) die Styleanweisungen zum Darstellen einzutragen:

Code: Select all

#serendipity_categories_list li {
    display: block !important;
    margin: 2px !important;
}

#serendipity_categories_list li.category_depth0 {
	font-weight: bold;
	padding-top: 5px;   
}

#serendipity_categories_list li.cat_active {
  }

#serendipity_categories_list li.cat_selected {
    background-color:#E0E0E0;
}

... wird fortgesetzt...

[HadleyB]

Ich habe bereits mehrere Firmenhomepages auf Basis von S9Y erstellt und habe mir für das Problem mit der Sortierung der Kategorien folgendes ausgedacht:

Ich lege einen HTML-KLOTZ an, in den ich alle Links zu den Kategorien setze. Die kann ich mämlich sortieren wie ich will. Das Plugin Kategorien selber setze ich dann auf versteckt (nicht löschen!). Muss ich eine neue Ketegorie anlegen, darf ich nur das Setzen des Links im Klotz nicht vergessen.

Das funktioniert einwandfrei und ist auch für einen PHP-Laien ohne Änderungen an den S9Y-Dateien durchzuführen.

Wenn ich als "Webdesigner" auf aufklappbare Menüs komme, bekome ich graue Haare. Gerade mit Firefox schalten viele Java und JS ab, dann kommt nämlich nix mehr und man kann nicht navigieren. Aber das ist Geschmackssache, nur meine persönliche Meinung.

mfg
Hadley

[konus]

Ja, die HTML-Klotz Variaten ist robust und schnell. Leider sind bei unserem Vorhaben zu viele Unterkategorien. Das sieht dann einfach total unübersichtlich aus.

Die vorgestellte Lösung arbeitet mit Smarty, d.h. die die Markierung der Links erfolgt komplett serverseitig. JavaScript wird nicht benötigt.

Natürlich könnte der Anzeigebrowser kein CSS unterstützen oder dies abgeschaltet worden sein. Wer so im Netz unterwegs ist, stört sich sicherlich nicht daran, dass dann einfach alle Links angezeigt werden

[tomtom76]

tolle sache!

Es wäre natürlich ideal wenn diese änderungen direkt in s9y "mitgeliefert" würden.

lg
tom

[konus]

Ich denke, dass dies doch eine sehr spezielle Anforderung ist. Daher ist es auch als Auftragsanpassung gelaufen.

Ich weiß, dass Garvin überlegt hat, ob er das vorhandene Plugin erweitert oder sogar ein Neues schreibt. Er hat sich dann nach verschiedenen Tests aus Performance und Komplexitätsgründen dagegen entschieden.

Wenn das entsprechende Feedback da ist, wird es vielleicht noch weiter entwickelt, aber bis dahin gibt es die hier vorgestellte Lösung. Man muss auch sagen, dass es wirklich nicht schwer einzubauen ist. (Wenn sogar ich das schaffe )

[konus]

Nachtrag: Hier ist ein Livebeispiel: http://www.ptw-ingenieure.de/
Beim Design hatten wir Unterstützung von Matthias Mees.

[micha06de]

Nachtrag: Hier ist ein Livebeispiel: http://www.ptw-ingenieure.de/
Beim Design hatten wir Unterstützung von Matthias Mees.

Sieht sehr gut aus. Danke für die Anregung. Bin fast in der gleichen Situation und Branche...