This page has been robot translated, sorry for typos if any. Original content here.



  • [1] Automatischer Site Map Generator
  • [2] Auf statischen Listen basierender Ordnerbaum


  • Automatischer Site Map Generator



    Automatischer Site Map Generator



    Automatischer Site Map Generator [ Automatischer Site Map Generator ] [ Automatischer Site Map Generator ] [ Automatischer Site Map Generator ]

    Es kommt häufig vor, dass es dem Webmaster bei der langsamen Entwicklung Ihrer Website ziemlich schwer fällt, alle Seiten seiner Website im Auge zu behalten. Infolgedessen kann ein Benutzer, der die Site besucht, nach den Informationen suchen, die er für eine lange Zeit benötigt oder die er überhaupt nicht findet (obwohl sie tatsächlich auf der Site vorhanden sind).


    Um solche "Vorfälle" in der Regel bei Websites mit mehreren zehn Seiten oder mehr zu vermeiden, ist die Verwendung der Site Map eine spezielle Seite einer Website, auf der (in der Regel in Form eines hierarchischen Baums) alle Seiten der Website dargestellt werden. Wenn die Site jedoch mehr als hundert Seiten enthält, ist die manuelle Pflege der "Site Map" eine ziemlich mühsame Aufgabe.


    Das kostenlose Skript "Site Map Generator" erstellt automatisch eine Site Map-Seite auf einer Site, auf der in Form eines strukturierten Baums die auf der Site vorhandenen HTML-Seiten angezeigt werden.


    ACHTUNG! Nicht zu verwechseln mit SiteMap, mit dem Suchmaschinen die Site indizieren können!


    Laden Sie das Archiv herunter und entpacken Sie es auf Ihren Computer.


    Nehmen Sie Ihre Einstellungen in der Datei makesitemap.php vor :

    • $ workDir - gibt den Pfad auf der Festplatte zu den Site-Dateien an (standardmäßig wird die gesamte Site indiziert).
    • $ exceptionFileList - Dateinamen, die nicht indiziert und in die Site-Map-Struktur aufgenommen werden.
    • $ exceptionDirList - Die Namen der Ordner, die nicht indiziert und in der Site-Map-Struktur enthalten sind.
    • $ outFile - Der Name der Datei und der Pfad, in den das Ergebnis der Erstellung der Sitemap geschrieben wird.
    • $ headerFile - Der Name der Datei und der Pfad dazu, dessen Inhalt der resultierenden Datei vor dem Baum hinzugefügt wird.
    • $ footerFile - Der Name der Datei und der Pfad zu dieser Datei, deren Inhalt der resultierenden Datei nach dem Baum hinzugefügt wird.


    Tatsächlich müssen Sie nur Ordner und Dateien zu $ exceptionFileList, $ exceptionDirList hinzufügen, die nicht in der endgültigen Datei der Sitemap enthalten sein sollen.


    Kopieren Sie die Dateien dtree.css, dtree.js und das Verzeichnis img_sm in das Verzeichnis, in dem sich die resultierende Datei sitemap.html befindet.


    Kopieren Sie die Datei makesitemap.php an einen beliebigen Ort.


    Um nicht durcheinander zu kommen, empfehle ich, alle Dateien und das Verzeichnis img_sm in das Stammverzeichnis der Site herunterzuladen.


    Stellen Sie sicher, dass Sie die Berechtigungen des CHMOD 777 für die Datei sitemap.html festlegen .


    Anfangs ist die Datei sitemap.html leer, aber nach dem Ausführen des Skripts wird sie mit dem Inhalt der Dateien $ headerFile, $ footerFile und dem Verzeichnisbaum selbst gefüllt.


    Führen Sie zum Generieren einer Sitemap die Skriptdatei makesitemap.php aus (geben Sie dazu den Pfad zu dieser Datei in die Browserzeile ein , z. B. http: //meinewebsite/makesitemap.php ).


    Die resultierende Sitemap-Datei befindet sich in der Datei sitemap.html .


    Es gelten jedoch folgende Einschränkungen:

    • Es werden nur statische HTML-Seiten indiziert.
    • ACHTUNG! Damit ein Ordner indiziert werden kann, muss er die Datei index.html enthalten.


    Alles scheint zu sein. Benutze es! :)






    Auf statischen Listen basierender Ordnerbaum

    Dies ist ein listenbasierter Ordnerbaum. Sie müssen lediglich eine <UL> <LI> -Liste erstellen. Das Skript erstellt dann den Baum basierend auf dieser Liste. Das Skript verwendet Cookies, um den Status von Knoten zu speichern. Es enthält auch Funktionen zum Erweitern / Reduzieren aller Knoten. Sie können Knoten dynamisch hinzufügen und löschen, indem Sie mit der rechten Maustaste auf die Knoten klicken.

    Static list based folder tre [ Statische Liste basiert Ordner tre ] [ Statische Liste basiert Ordner tre ] [ Statische Liste basiert Ordner tre ]

    Konfiguration:

    Einen Baum bauen

    Das Menü basiert auf HTML. Sie erstellen den Baum, indem Sie eine verschachtelte Liste <UL> <LI> erstellen.
    Beispiel:

    <ul id="dhtmlgoodies_tree" class="dhtmlgoodies_tree">
    <li><a href="#">Main item</a>
    <ul>
    <li><a href="#">Sub menu item</a>
    <ul>
    <li><a href="#">Sub menu item</a>
    <ul>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Sub menu item</a>
    <ul>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Main item</a></li>
    <li><a href="#">Main item</a>
    <ul>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Main item</a>
    <ul>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    </ul>
    <ul id="dhtmlgoodies_tree" class="dhtmlgoodies_tree">
    <li><a href="#">Main item</a>
    <ul>
    <li><a href="#">Sub menu item</a>
    <ul>
    <li><a href="#">Sub menu item</a>
    <ul>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Sub menu item</a>
    <ul>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Main item</a></li>
    <li><a href="#">Main item</a>
    <ul>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Main item</a>
    <ul>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    </ul>
    Es ist wichtig, dass Sie Ihren Bäumen eine ID geben. Im obigen Code werden Sie sehen, dass ich ihm die ID gegeben habe
    dhtmlgoodies_tree Sie sollten auch beachten, dass der Baum der CSS-Klasse zugewiesen werden muss
    dhtmlgoodies_tree Beispiel:
    <ul id="dhtmlgoodies_tree" class="dhtmlgoodies_tree">

    Javascript-Konfiguration

    Sie müssen einen Verweis auf Ihre (n) Baum (e) mit Javascript erstellen. Dazu erstellen Sie ein Array mit den IDs Ihrer Bäume. Beispiel
    var idOfFolderTrees = ['dhtmlgoodies_tree','dhtmlgoodies_tree2']; In der Demo habe ich zwei Ordnerbäume. Die ID des ersten ist
    dhtmlgoodies_tree während mein zweiter Baum die ID bekam
    dhtmlgoodies_tree2 Sie finden die ID im dhtmlgoodies_tree2 <UL>. Beispiel
    <ul id="dhtmlgoodies_tree"> Sie finden diesen Array-Code oben im Abschnitt <SCRIPT type = "text / javascript">.

    Icons

    Der Baum verwendet standardmäßig das in der Javascript-Variablen folderImage definierte Symbol. Sie können es jedoch überschreiben, indem Sie eine Klasse in Ihrem <LI> deklarieren. Beispiel:
    <li class="dhtmlgoodies_sheet.gif"> Hier wird anstelle des Standardsymbols das Bild "dhtmlgoodies_sheet.gif" verwendet.

    Javascript Variablen und Funktionen

    Sie haben diese Variablen oben in Ihrem Abschnitt <SCRIPT> verfügbar:
    var idOfFolderTrees = ['dhtmlgoodies_tree','dhtmlgoodies_tree2']; var imageFolder = 'images/'; // Path to images
    var folderImage = 'dhtmlgoodies_folder.gif'; // Default folder image
    var plusImage = 'dhtmlgoodies_plus.gif'; // [+] icon
    var minusImage = 'dhtmlgoodies_minus.gif'; // [-] icon
    var useAjaxToLoadNodesDynamically = true;
    var ajaxRequestFile = 'writeNodes.php';
  • idOfFolderTrees = Ein Array der Bäume auf Ihrer Seite
  • imageFolder = Pfad zu Ihrem Bildordner
  • folderImage = Name der Ordnerbilddatei
  • plusImage = Name der Datei - Plus-Symbol
  • minusImage = Dateiname - Minuszeichen
  • useAjaxToLoadNodesDynamically = Mit AJAX Unterknoten dynamisch laden?
  • ajaxRequestFile = Name der serverseitigen Datei, d. h. die Datei, an die Ajax Anforderungen sendet
  • Sie können auch zwei Funktionen aufrufen, um alle Knoten zu erweitern oder zu reduzieren. Die Funktion "expandAll ()" erweitert alle Knoten, während die Funktion "collapseAll ()" alle Knoten komprimiert. Senden Sie die ID des Baums, den Sie reduzieren oder erweitern möchten, als Argument an diese Funktionen. Beispiele:
    expandAll('dhtmlgoodies_tree');
    collapseAll('dhtmlgoodies_tree2');

    Wenn Sie AJAX verwenden

    Wenn Sie Ajax verwenden, um Knoten dynamisch vom Server abzurufen, können Sie dieses Rezept befolgen:
    Fügen Sie Knoten wie folgt in Ihren Baum ein:
    <li><a href="#">Europe</a>
    <ul>
    <li parentId="1"><a href="#">Loading...</a></li>
    </ul>
    </li>
    <li><a href="#">Europe</a>
    <ul>
    <li parentId="1"><a href="#">Loading...</a></li>
    </ul>
    </li>
    Beachten Sie, dass ich ein <LI> mit einem Parameter "parentId" erstellt habe. Der Wert dieses Parameters wird an die Datei auf Ihrem Server (writeNodes.php) gesendet. Die Datei auf dem Server gibt dann die Knoten mit der übergeordneten ID = 1 aus. Diese werden an das Skript zurückgesendet, und das Skript ersetzt das "Laden .." <LI> durch den neuen Inhalt vom Server.

    Die Datei "writeNodes.php" gibt nur einfaches HTML aus. Beispiel

    <li class="dhtmlgoodies_sheet.gif"><a href="#">Bergen</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Stavanger</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Trondheim</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Oslo</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Bergen</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Stavanger</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Trondheim</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Oslo</a></li>
    Weitere Informationen finden Sie in der Datei writeNodes.php. Ich verwende in dieser Demo keine Datenbank. Wenn Sie eine Datenbank verwenden, sieht die Datei writeNodes.php normalerweise folgendermaßen aus:

    <?php
    if(isset($_GET['parentId'])){

    $res = mysql_query("select * from category where parentId='".$_GET['parentId']."'");
    while($inf = mysql_fetch_array($res)){
    echo "<li><a href=\"#\">".$inf["categoryName"]."</a>";

    $resSub = mysql_query("select ID from category where parentId='".$inf["ID"]."'");
    if($infSub = mysql_fetch_array($resSub)){
    echo "<ul><li parentId=\"".$inf["ID"]."\"><a href=\"#\">Loading...</a></li></ul>";
    }

    echo "</li>";

    }
    ?>

    Kekse

    Cookies werden verwendet, um den Status der Knoten zu speichern. Dies bedeutet, dass das Skript beim erneuten Aufrufen der Seite die Knoten erweitert, die beim letzten Verlassen der Seite erweitert wurden.

    Knoten dynamisch hinzufügen / löschen

    Neue Knoten können dynamisch in einem Kontextmenü hinzugefügt und gelöscht werden. Sie können diese Funktion deaktivieren, indem Sie die JS-Variable contextMenuActive oben in der Datei folder-tree-static.js auf false setzen.

    Wenn ein neuer Knoten hinzugefügt wird, wird eine Funktion namens saveNewNode () aufgerufen. Sie finden diese Funktion in der Datei folder-tree-static.js. Sie müssen den Ajax-Teil dieser Funktion aktivieren (er befindet sich derzeit in den Kommentaren). Sie müssen auch Unterstützung auf Ihrem Server hinzufügen, um neue Knoten zu speichern. Beim Erstellen eines Knotens wird eine Anforderung an die in der Variablen ajaxRequestFile definierte Datei gesendet. An diese Datei gesendete Variablen sind:

  • newNode = Titel des neuen Knotens
  • parentID = ID des übergeordneten Knotens
  • Alles, was Sie tun müssen, ist eine Einfügeabfrage, die diesen neuen Knoten in Ihre Datenbank einfügt.

    Gleiches gilt auch für das Löschen eines Knotens. Sie müssen den Ajax-Teil der Funktion deleteNodeOnServer aktivieren. Dadurch wird eine Anforderung an den Server gesendet, auf dem der zu löschende Knoten in der Variablen deleteNodeId definiert ist

    Protokoll aktualisieren

    11. Juni 2006 - Unterstützung für das dynamische Hinzufügen und Löschen von Knoten hinzugefügt