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



  • [1] Générateur automatique de plan de site
  • [2] Arborescence de dossiers basée sur une liste statique


  • Générateur automatique de carte de site



    Générateur automatique de carte de site



    Générateur automatique de plan de site [ Générateur automatique de carte de site ] [ Générateur automatique de carte de site ] [ Générateur automatique de carte de site ]

    Il arrive souvent qu'en développant lentement un site Web, il devienne assez difficile pour un webmaster de "suivre" toutes les pages d'un site Web. En conséquence, un utilisateur qui visite le site peut rechercher les informations dont il a besoin pendant longtemps ou ne pas les trouver du tout (même si, en réalité, elles sont présentes sur le site).


    Pour éviter de tels "incidents", en règle générale, sur des sites de plusieurs dizaines de pages ou plus, l'utilisation du plan Sitemap est pratiquée - une page spéciale du site sur laquelle (généralement sous forme d'arborescence) toutes les pages du site sont présentées. Toutefois, si le site contient plus de cent pages, le maintien manuel de la carte du site "en état de fonctionnement" est une activité assez pénible.


    Le script gratuit "Site Map Generator" est conçu pour créer automatiquement une page de site "Plan du site" sur laquelle les pages HTML présentes sur le site sont affichées sous forme d'arborescence structurée.


    ATTENTION! Ne pas confondre avec SiteMap, qui est conçu pour que les moteurs de recherche indexent le site!


    Téléchargez et décompressez l'archive sur votre ordinateur.


    Faites vos réglages dans les fichiers siteite.php :

    • $ workDir - spécifie le chemin sur le disque des fichiers du site (par défaut, tout le site est indexé).
    • $ exceptionFileList - noms des fichiers qui ne seront pas indexés et inclus dans l'arborescence de la carte du site.
    • $ exceptionDirList - noms des dossiers qui ne seront pas indexés et inclus dans l’arborescence de la carte du site.
    • $ outFile - le nom du fichier et le chemin où sera enregistré le résultat de la génération de la carte du site.
    • $ headerFile est le nom du fichier et son chemin, dont le contenu sera ajouté au fichier résultant devant l’arborescence.
    • $ footerFile - nom du fichier et chemin d’accès, dont le contenu sera ajouté au fichier résultant après l’arborescence.


    En fait, il vous suffit d’ajouter des dossiers et des fichiers à $ exceptionFileList, $ exceptionDirList , qui ne doivent pas être inclus dans le fichier sitemap final.


    Copiez les fichiers dtree.css, dtree.js et le répertoire img_sm dans le répertoire où se trouvera le fichier sitemap.html obtenu .


    Copiez le fichier makesitemap.php à n’importe quel endroit.


    Ne pas confondre, je recommande de télécharger tous les fichiers et le répertoire img_sm à la racine du site.


    Assurez-vous de définir les autorisations CHMOD 777 sur le fichier sitemap.html .


    Initialement, le fichier sitemap.html est vide, mais après le lancement du script, il est rempli avec le contenu des fichiers $ headerFile, $ footerFile et de l’arborescence de répertoires elle-même.


    Pour générer un sitemap, lancez le fichier de script makesitemap.php (pour ce faire, tapez le chemin d'accès à ce fichier dans la chaîne du navigateur, par exemple: http: //mysite/makesitemap.php ).


    Le fichier sitemap résultant sera dans sitemap.html .


    Cependant, il existe les limitations suivantes:

    • Seules les pages HTML statiques sont indexées.
    • ATTENTION! Pour qu'un dossier soit indexé, il doit nécessairement contenir un fichier index.html.


    Il semble que tout. Utilisez! :)






    Arborescence de dossiers basée sur une liste statique

    Ceci est une arborescence de dossiers basée sur une liste. Liste <UL> <LI> . Le script créera ensuite l'arborescence en fonction de cette liste. Le script utilise des cookies pour mémoriser l'état des nœuds. Il comprend également des fonctions pour développer / réduire tous les nœuds. Vous pouvez ajouter et supprimer des nœuds.

    Dossier basé sur une liste statique tre [ Dossier basé sur une liste statique ] [ Dossier basé sur une liste statique ] [ Dossier basé sur une liste statique ]

    Configuration:

    Construire un arbre

    Le menu est basé sur HTML. Votre liste < list > <UL> <LI> .
    Exemple:

    <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>
    votre identifiant est. Dans le code ci-dessus, vous verrez que
    dhtmlgoodies_tree affecté à la classe CSS
    dhtmlgoodies_tree Exemple:
    <ul id="dhtmlgoodies_tree" class="dhtmlgoodies_tree">

    Configuration javascript

    Vous pouvez utiliser votre javascript pour l'utiliser. Ceci est fait par l'ID de vos arbres. Exemple:
    var idOfFolderTrees = ['dhtmlgoodies_tree','dhtmlgoodies_tree2']; Dans la démo, j'ai deux arbres de dossiers. L'identifiant du premier est
    dhtmlgoodies_tree alors que mon deuxième arbre a l'identifiant
    dhtmlgoodies_tree2 Vous trouverez l'ID dans la balise principale <UL>. Exemple:
    <ul id="dhtmlgoodies_tree"> Vous pouvez trouver la section <SCRIPT type = "text / javascript">.

    Les icônes

    La variable javascript folderImage par défaut. Cependant, vous voudrez peut-être en savoir plus sur votre <LI>. exemple:
    <li class="dhtmlgoodies_sheet.gif"> Ici, l'image "dhtmlgoodies_sheet.gif" sera utilisée à la place de l'icône par défaut.

    Variables et fonctions Javascript

    Vous avez ces variables disponibles en haut de votre section <SCRIPT>:
    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 = Un tableau de vos arbres
  • imageFolder = chemin d'accès à votre dossier d'images
  • folderImage = Nom du fichier image du dossier
  • plusImage = Nom du fichier - icône plus
  • minusImage = Nom du fichier - icône moins
  • useAjaxToLoadNodesDynamically = Utilisez AJAX pour charger les sous-nœuds de manière dynamique?
  • ajaxRequestFile = Nom du serveur
  • Vous pouvez également appeler ou développer tous les nœuds. La fonction "expandAll ()" développe tous les nœuds, tandis que la fonction "collapseAll ()" réduit tous les nœuds. Développez votre argument. Exemples:
    expandAll('dhtmlgoodies_tree');
    collapseAll('dhtmlgoodies_tree2');

    Si vous utilisez AJAX

    Si vous utilisez pour obtenir les nœuds, vous pouvez suivre cette recette:
    Insérez des noeuds dans votre arbre comme ceci:
    <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>
    Notez que j'ai créé un <LI> avec un paramètre "parentId". Il est envoyé à votre serveur (writeNodes.php). Ce sera le cas où votre identifiant sera téléchargé.

    Le fichier "writeNodes.php" n'émet que du HTML pur. Exemple:

    <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>
    Consultez le fichier writeNodes.php pour plus d'informations. Je n'utilise pas de base de données dans cette démo. Si vous utilisez une base de données, vous pourriez ressembler à ceci:

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

    }
    ?>

    Biscuits

    Les cookies sont utilisés pour mémoriser l'état des nœuds. Si vous regardez la page, vous devrez aller sur la page.

    Ajouter / supprimer des nœuds de manière dynamique

    De nouveaux noeuds peuvent être ajoutés et supprimés dynamiquement à partir d'un menu contextuel. Vous pouvez désactiver le fichier context-folder-tree-static.js.

    Lorsqu'un nouveau nœud est ajouté, une fonction appelée saveNewNode () est appelée. Vous trouverez cette fonction dans le dossier tree-static.js. Vous devez activer la partie ajax de cette fonction. Vous devez également ajouter de nouveaux nœuds. Le ajaxRequestFile. Les variables envoyées à ce fichier sont:

  • newNode = Titre du nouveau noeud
  • parentID = ID du noeud parent
  • Une requête d'insertion qui a été incluse dans votre base de données.

    Cela s'applique également à vous supprimez un nœud. Vous devez activer la partie ajax de la fonction deleteNodeOnServer. Cela enverra une demande au serveur.

    Journal de mise à jour

    11 juin 2006 - Ajout du support pour la suppression dynamique de noeuds