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 für den Webmaster während der langsamen Entwicklung Ihrer Website ziemlich schwierig wird, 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 sie überhaupt nicht finden (obwohl sie tatsächlich auf der Site vorhanden sind).


    Um solche "Vorfälle" in der Regel auf Websites mit mehreren zehn Seiten oder mehr zu vermeiden, ist die Verwendung der Site Map eine spezielle Site-Seite, auf der (normalerweise in Form eines hierarchischen Baums) alle Seiten der Site 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, das für Suchmaschinen entwickelt wurde, um die Site zu indizieren!


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


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

    • $ workDir - Gibt den Pfad auf der Festplatte zu den Site-Dateien an (standardmäßig ist die gesamte Site indiziert).
    • $ exceptionFileList - Dateinamen, die nicht indiziert und in den Site Map-Baum aufgenommen werden.
    • $ exceptionDirList - Die Namen der Ordner, die nicht indiziert und in den Site Map-Baum aufgenommen werden.
    • $ outFile - Der Name der Datei und der Pfad, in den das Ergebnis der Generierung der Sitemap geschrieben wird.
    • $ headerFile - Der Name der Datei und der Pfad zu dieser Datei, deren 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 sollten.


    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 Speicherort.


    Um nicht verwirrt zu werden, 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 makesememap.php aus (geben Sie dazu den Pfad zu dieser Datei in die Browserzeile ein , z. B. http: //mysite/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 der 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.

    Auf statischen Listen basierender Ordner tre [ Statischer Listenbasierter Ordner tre ] [ Statischer Listenbasierter Ordner tre ] [ Statischer Listenbasierter Ordner tre ]]

    Konfiguration:

    Einen Baum bauen

    Das Menü basiert auf HTML. Sie erstellen den Baum, indem Sie eine verschachtelte <UL> <LI> -Liste 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 einen Ausweis 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 mithilfe von Javascript einen Verweis auf Ihre Bäume erstellen. Dazu erstellen Sie ein Array der 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 Haupt-<UL> -Tag. Beispiel:
    <ul id="dhtmlgoodies_tree"> Diesen Array-Code finden Sie oben im Abschnitt <SCRIPT type = "text / javascript">.

    Symbole

    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 = Name der Datei - Minus-Symbol
  • useAjaxToLoadNodesDynamically = AJAX zum dynamischen Laden von Unterknoten verwenden?
  • ajaxRequestFile = Name der serverseitigen Datei, d. h. der 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 "destroyAll ()" alle Knoten reduziert. 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 "parentId" -Parameter 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 aus, auf denen die übergeordnete ID = 1 ist. Diese wird 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>
    das Ansehen der writeNodes.php Datei für weitere Informationen. 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>";

    }
    ?>

    Cookies

    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 aus einem Kontextmenü hinzugefügt und gelöscht werden. Sie können diese Funktion deaktivieren, indem Sie die JS-Variable contextMenuActive oben in 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 folder-tree-static.js. Sie müssen den Ajax-Teil dieser Funktion aktivieren (er befindet sich derzeit in Kommentaren). Sie müssen auch Unterstützung auf Ihrem Server hinzufügen, um neue Knoten zu speichern. Wenn ein Knoten erstellt wird, 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üge-Abfrage, die diesen neuen Knoten in Ihre Datenbank einfügt.

    Gleiches gilt auch für das, was passiert, wenn Sie einen Knoten löschen. 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