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



  • [1] Automatischer Site Map Generator
  • [2] Statische listenbasierte Ordnerstruktur


  • 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 oft vor, dass sich Ihre Website langsam entwickelt. Für einen Webmaster wird es schwierig, alle Seiten seiner Website zu "verfolgen". Als Ergebnis kann der Benutzer, der sich bei der Site angemeldet hat, die Informationen suchen, die er lange benötigt oder überhaupt nicht finden kann (obwohl er tatsächlich auf der Site vorhanden ist).


    Um solche "Vorfälle" in der Regel auf Seiten mit mehreren Dutzend Seiten und mehr zu vermeiden, ist die Verwendung der Site Map eine Praxis - eine spezielle Seite der Site, auf der (normalerweise in Form einer hierarchischen Baumstruktur) alle Seiten der Site dargestellt werden. Aber, wenn die Website mehr als hundert Seiten enthält, dann manuell beibehalten "in Arbeitsordnung" Die Sitemap ist ziemlich mühsam.


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


    ACHTUNG! Verwechseln Sie nicht SiteMap, das für Suchmaschinen entwickelt wurde, um die Site zu indizieren!


    Laden und entpacken Sie das Archiv auf Ihrem Computer.


    Tragen Sie Ihre Einstellungen in die Datei " makesitemap.php" ein :

    • $ workDir - gibt den Pfad zum Datenträger für die Site-Dateien an (standardmäßig wird die gesamte Site indiziert).
    • $ exceptionFileList - Namen von Dateien, die nicht indiziert und in die Sitemap aufgenommen werden.
    • $ exceptionDirList - Namen von Ordnern, die nicht indiziert und in die Sitemap aufgenommen werden.
    • $ outFile - der Name der Datei und der Pfad, zu dem das Ergebnis der Erstellung der Sitemap aufgezeichnet wird.
    • $ headerFile - der Name der Datei und der Pfad zu ihr, deren Inhalt der resultierenden Datei vor der Baumstruktur hinzugefügt wird.
    • $ footerFile - der Name der Datei und der Pfad zu ihr, deren Inhalt der resultierenden Datei nach der Baumstruktur hinzugefügt wird.


    In der Tat müssen Sie nur $ exceptionFileList, $ exceptionDirList- Ordner und -Dateien hinzufügen, die nicht in der endgültigen Site-Map-Datei enthalten sein sollten.


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


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


    Um nicht zu verwechseln, empfehle ich, alle Dateien und das Verzeichnis img_sm in den Stammordner der Site zu laden .


    Stellen Sie sicher, dass die Berechtigungen für die Datei sitemap.html auf CHMOD 777 festgelegt sind .


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


    Um eine Sitemap zu generieren, führen Sie die Skriptdatei "makeitemap.php" aus (geben Sie dazu den Pfad zu dieser Datei in der Browserzeile ein , zum Beispiel: http: //mysite/makesitemap.php ).


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


    Die folgenden Einschränkungen gelten:

    • Nur statische HTML-Seiten sind indiziert.
    • ACHTUNG! Um einen Ordner zu indizieren, muss er die Datei index.html enthalten.


    Es scheint alles. Benutze es! :)






    Statische listenbasierte Ordnerstruktur

    Dies ist eine listenbasierte Ordnerstruktur. Was Sie tun müssen, ist eine <UL> <LI> Liste zu erstellen. Das Skript erstellt dann basierend auf dieser Liste den Baum. Das Skript verwendet Cookies. Es enthält auch Funktionen zum Erweitern / Zusammenklappen aller. Sie können Knoten dynamisch hinzufügen und löschen.

    Statische Liste basierte Ordner tre [ Statische Liste basierte Ordner tre ] [ Statische Liste basierte Ordner tre ] [ Statische Liste basierte Ordner tre ]

    Konfiguration:

    Einen Baum bauen

    Das Menü ist HTML-basiert. Liste <UL> <LI> Sie erstellen den Baum, indem Sie ein Nested 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 müssen der CSS-Klasse zugewiesen werden
    dhtmlgoodies_tree Beispiel:
    <ul id="dhtmlgoodies_tree" class="dhtmlgoodies_tree">

    Javascript-Konfiguration

    Sie müssen einen Verweis auf Ihre Struktur (en) erstellen, indem Sie Javascript verwenden. Dies geschieht, indem Sie ein Array der ID (s) Ihrer Bäume erstellen. 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-Tag <UL>. Beispiel:
    <ul id="dhtmlgoodies_tree"> Diesen Array-Code finden Sie oben im Abschnitt <SCRIPT type = "text / javascript">.

    Symbole

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

    Javascript Variablen und Funktionen

    Sie haben diese Variablen oben im 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 Ordner-Image-Datei
  • plusImage = Name der Datei - Plus-Symbol
  • minusImage = Name der Datei - Minuszeichen
  • useAjaxToLoadNodesDynamically = Verwenden Sie AJAX, um Unterknoten dynamisch zu laden?
  • ajaxRequestFile = Name der serverseitigen Datei, dh die Datei, an die Ajax Anfragen sendet
  • Sie können alle erweitern oder reduzieren. Die Funktion "expandAll ()" erweitert alle Knoten, während die Funktion "collapseAll ()" alle Knoten ausblendet. Senden Sie die ID der Struktur, die Sie reduzieren oder als Argument für diese Funktionen erweitern möchten. Beispiele:
    expandAll('dhtmlgoodies_tree');
    collapseAll('dhtmlgoodies_tree2');

    Wenn Sie AJAX verwenden

    Wenn Sie Ajax verwenden, um Knoten dynamisch vom Server abzurufen, können Sie diesem Rezept folgen:
    Fügen Sie die Knoten in Ihrem Baum so 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 gesendet (writeNodes.php). Die Datei auf dem Server gibt dann die Knoten mit der übergeordneten ID = 1 aus. Diese wird zurück an das Skript gesendet und das Skript ersetzt den "loading .." <LI> durch den neuen Inhalt vom Server.

    Die Datei "writeNodes.php" gibt nur reines 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 benutze keine Datenbank in dieser Demo. Wenn Sie eine Datenbank verwenden, könnte die writeNodes.php-Datei normalerweise so aussehen:

    <?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>";

    }
    ?>

    Plätzchen

    Cookies werden verwendet, um sich an den Zustand der Knoten zu erinnern. Dies bedeutet, dass das Skript beim erneuten Besuch der Seite erweitert wird.

    Hinzufügen / Löschen von Knoten dynamisch

    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 der Ordner-Struktur-static.js auf false setzen.

    Wenn ein neuer Knoten hinzugefügt wird, wird eine Funktion namens saveNewNode () aufgerufen. Sie finden diese Funktion in der Ordner-Struktur-static.js. Sie müssen den Ajax-Teil dieser Funktion aktivieren. Sie müssen außerdem Unterstützung auf Ihrem Server hinzufügen. Wenn ein Knoten erstellt wird, wird eine Anforderung an die in der Variablen ajaxRequestFile angegebene Datei gesendet. Variablen, die an diese Datei gesendet werden, 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.

    Dasselbe gilt auch für das, was passiert, wenn Sie einen Knoten löschen. Sie müssen den Ajax-Teil der Funktion deleteNodeOnServer aktivieren. Dies sendet eine Anfrage an den Server, wo der zu löschende Knoten in der Variablen deleteNodeId definiert ist

    Protokoll aktualisieren

    11. Juni 2006 - Unterstützung für dynamisches Hinzufügen und Löschen hinzugefügt