exemple de code js pour un site Web permettant de générer automatiquement l'index de la table des matières du chapitre

De nombreuses fonctions du site Web sont implémentées par js. Cet article présente principalement plusieurs codes js qui permettent au blog Blog Park de générer automatiquement un index de répertoire de chapitre. Les amis qui en ont besoin peuvent s'y référer.

Le premier type : ne prend en charge que les répertoires de premier niveau

684271ed9684bde649abda8831d4d355, en tant que paragraphes, la classification n'est pas prise en charge

A bon article de blog En plus de la qualité des articles de blog, une bonne structure organisationnelle peut également rendre les lecteurs plus confortables et plus pratiques à lire. Je vois que les articles de blog de certains amis du jardin sont divisés en chapitres et qu'il existe un tableau de. index du contenu des chapitres devant les articles de blog. , après avoir cliqué sur l'index, vous passerez au chapitre correspondant à lire, et vous pourrez également revenir en haut du répertoire. L'article de blog de Fish Li est ce genre d'organisation. Bien sûr, si cette structure est définie manuellement lors de la rédaction d'un article de blog, cela augmentera sans aucun doute la charge de travail des rédacteurs. Cela ne permettrait-il pas d'économiser beaucoup de travail si l'index des chapitres pouvait être généré automatiquement ? Au départ, je voulais utiliser FireBug pour voir comment le code source de Fish Li est implémenté, mais il semble que le js soit crypté. Ensuite je l’ai fait moi-même. En fait, il n’y avait pas beaucoup de code, c’était très simple.

code html

<h3>章节1</h3>
<p>这里是章节1的内容</p>
<h3>章节2</h3>
<p>这里是章节2的内容</p>
<h3>章节3</h3>
<p>这里是章节3的内容</p>
<h3>章节4</h3>
<p>小小代码，不值一提，如果您觉得对您还有一点用，就点个赞支持一下吧。</p>

code js

<script language="javascript" type="text/javascript">
//生成目录索引列表
function GenerateContentList()
{
 var jquery_h3_list = $(&#39;#cnblogs_post_body h3&#39;);//如果你的章节标题不是h3,只需要将这里的h3换掉即可
 if(jquery_h3_list.length>0)
 {
 var content = &#39;<a name="_labelTop"></a>&#39;;
 content += &#39;<p id="navCategory">&#39;;
 content += &#39;<p style="font-size:18px"><b>阅读目录</b></p>&#39;;
 content += &#39;<ul>&#39;;
 for(var i =0;i<jquery_h3_list.length;i++)
 {
  var go_to_top = &#39;<p style="text-align: right"><a href="#_labelTop" rel="external nofollow" rel="external nofollow" >回到顶部</a><a name="_label&#39; + i + &#39;"></a></p>&#39;;
  $(jquery_h3_list[i]).before(go_to_top);
  var li_content = &#39;<li><a href="#_label&#39; + i + &#39;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >&#39; + $(jquery_h3_list[i]).text() + &#39;</a></li>&#39;;
  content += li_content;
 }
 content += &#39;</ul>&#39;;
 content += &#39;</p>&#39;;
 if($(&#39;#cnblogs_post_body&#39;).length != 0 )
 {
  $($(&#39;#cnblogs_post_body&#39;)[0]).prepend(content);
 }
 } 
}
GenerateContentList();
</script>

Utilisation : Connexion Une fois arrivé au parc de blogs, ouvrez la gestion backend du parc de blogs, passez à l'onglet « Paramètres » et collez le code ci-dessus dans la zone « Code HTML de pied de page » pour l'enregistrer.

Remarque : Le h3 extrait du code js ci-dessus est utilisé comme titre du chapitre. Si votre titre n'est pas h3, veuillez le modifier vous-même dans le commentaire du code. En plus de générer un index de table des matières au début de l'article, ce code générera également un lien "retour en haut" dans le coin inférieur droit de chaque chapitre (c'est-à-dire le coin supérieur droit du titre du chapitre suivant) pour faciliter le retour des lecteurs. Table des matières. La structure des répertoires de cet article est générée automatiquement. Si vous la trouvez utile, essayez-la rapidement.

Texte original : https://www.cnblogs.com/wangqiguo/p/4355032.html

Deuxième type : Prise en charge de la classification secondaire

Par c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d355

Rendu :

Pour les articles plus longs, il est nécessaire d'avoir un bon index de table des matières, qui permet aux lecteurs de comprendre plus clairement le contenu et le niveau de l’article. Cependant, à l'heure actuelle (2015.7), Blog Park ne génère pas automatiquement d'index de répertoire pour les articles publiés comme le blog csdn. Cependant, certains internautes ont implémenté cette fonction en écrivant leurs propres scripts via certaines fonctions personnalisées fournies par le backend du parc de blogs. Le script que j'ai utilisé fait principalement référence à la mélodie de @lavender. L'adresse de l'article est : http://www.cnblogs.com/wangqiguo/p/4355032.html.

Le script de l'auteur original ne prend en charge que les répertoires de niveau 1. J'ai modifié deux niveaux : le premier niveau est h2 et le deuxième niveau est h3. Certains gadgets ont également été ajoutés, comme les comptes de groupe de discussion QQ. L'effet est comme le montre la figure ci-dessous :

Les étapes spécifiques pour ajouter des fonctions sont :

Assurez-vous que le backend de votre parc de blogs prend en charge js
. Ceci n'est pas pris en charge par défaut. Je dois envoyer un e-mail officiel pour demander l'activation (l'adresse e-mail est contact@cnblogs.com). J'ai simplement écrit un e-mail et j'ai reçu une réponse dans l'heure. email : comme dans le titre. . . .
2. Ajoutez le script au backend
Ouvrez le backend du parc de blogs, entrez dans l'onglet "Paramètres", collez votre code js dans la zone d'édition correspondant au "Code HTML du pied de page" en bas, et puis cliquez sur le bouton "Enregistrer".
3. Rédigez des articles selon le format
Lors de la rédaction d'un nouvel article de blog, faites attention à diviser les chapitres selon le format défini dans votre script js, tel que h2, h3, etc. Bien entendu, si les articles déjà publiés contiennent h2, h3, etc., un index d'annuaire sera automatiquement généré.

est la suivante :

<script language="javascript" type="text/javascript">

// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
function GenerateContentList()
{
 var mainContent = $(&#39;#cnblogs_post_body&#39;);
 var h2_list = $(&#39;#cnblogs_post_body h2&#39;);//如果你的章节标题不是h2,只需要将这里的h2换掉即可

 if(mainContent.length < 1)
 return;
 
 if(h2_list.length>0)
 {
 var content = &#39;<a name="_labelTop"></a>&#39;;
 content += &#39;<p id="navCategory">&#39;;
 content += &#39;<p style="font-size:18px"><b>目录</b></p>&#39;;
 content += &#39;<ul>&#39;;
 for(var i=0; i<h2_list.length; i++)
 {
  var go_to_top = &#39;<p style="text-align: right"><a href="#_labelTop" rel="external nofollow" rel="external nofollow" >回到顶部</a><a name="_label&#39; + i + &#39;"></a></p>&#39;;
  $(h2_list[i]).before(go_to_top);
  
  var h3_list = $(h2_list[i]).nextAll("h3");
  var li3_content = &#39;&#39;;
  for(var j=0; j<h3_list.length; j++)
  {
  var tmp = $(h3_list[j]).prevAll(&#39;h2&#39;).first();
  if(!tmp.is(h2_list[i]))
   break;
  var li3_anchor = &#39;<a name="_label&#39; + i + &#39;_&#39; + j + &#39;"></a>&#39;;
  $(h3_list[j]).before(li3_anchor);
  li3_content += &#39;<li><a href="#_label&#39; + i + &#39;_&#39; + j + &#39;" rel="external nofollow" >&#39; + $(h3_list[j]).text() + &#39;</a></li>&#39;;
  }
  
  var li2_content = &#39;&#39;;
  if(li3_content.length > 0)
  li2_content = &#39;<li><a href="#_label&#39; + i + &#39;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >&#39; + $(h2_list[i]).text() + &#39;</a><ul>&#39; + li3_content + &#39;</ul></li>&#39;;
  else
  li2_content = &#39;<li><a href="#_label&#39; + i + &#39;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >&#39; + $(h2_list[i]).text() + &#39;</a></li>&#39;;
  content += li2_content;
 }
 content += &#39;</ul>&#39;;
 content += &#39;</p><p> </p>&#39;;
 content += &#39;<p style="font-size:18px"><b>正文</b></p>&#39;;
 if($(&#39;#cnblogs_post_body&#39;).length != 0 )
 {
  $($(&#39;#cnblogs_post_body&#39;)[0]).prepend(content);
 }
 } 

 var qqinfo = &#39;<p style="color:navy;font-size:12px">讨论QQ群：135202158</p>&#39;;
 $(mainContent[0]).prepend(qqinfo);
}

GenerateContentList();
</script>

Troisième type : prend en charge les répertoires de troisième niveau

viac1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d355 < ;h4> Implémentation des

rendus

Page de démonstration : http://www.jb51.net/article/132341.htm

Reportez-vous à la page de Zhang Guo, il utilise 4a249f0d628e2318394fd9b75b4636b1c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d355, ici l'éditeur de Script House utilise c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d3553f7b3decd2dcafb07b84d2d3985d9f40, selon seo, un grand nombre des h1 apparaissant sur la page auront un impact sur le poids.

<script language="javascript" type="text/javascript">
 //生成目录索引列表
 function GenerateContentList() {
  var jquery_h1_list = $(&#39;#content h2&#39;);
  if (jquery_h1_list.length == 0) { return; }
  if ($(&#39;#content&#39;).length == 0) { return; }

  var content = &#39;<a name="_labelTop"></a>&#39;;
  content += &#39;<p id="navCategory">&#39;;
  content += &#39;<p style="font-size:18px"><b>目录</b></p>&#39;;
  // 一级目录 start
  content += &#39;<ul class="first_class_ul">&#39;;

  for (var i = 0; i < jquery_h1_list.length; i++) {
  var go_to_top = &#39;<p style="text-align: right"><a name="_label&#39; + i + &#39;"></a></p>&#39;;
  $(jquery_h1_list[i]).before(go_to_top);

  // 一级目录的一条
  var li_content = &#39;<li><a href="#_label&#39; + i + &#39;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >&#39; + $(jquery_h1_list[i]).text() + &#39;</a></li>&#39;;

  var nextH1Index = i + 1;
  if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; }
  var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h3");
  // 二级目录 start
  if (jquery_h2_list.length > 0) {
   //li_content +=&#39;<ul style="list-style-type:none; text-align: left; margin:2px 2px;">&#39;;
   li_content += &#39;<ul class="second_class_ul">&#39;;
  }
  for (var j = 0; j < jquery_h2_list.length; j++) {
   var go_to_top2 = &#39;<p style="text-align: right"><a name="_lab2_&#39; + i + &#39;_&#39; + j + &#39;"></a></p>&#39;;
   $(jquery_h2_list[j]).before(go_to_top2);
   // 二级目录的一条
   li_content += &#39;<li><a href="#_lab2_&#39; + i + &#39;_&#39; + j + &#39;" rel="external nofollow" >&#39; + $(jquery_h2_list[j]).text() + &#39;</a></li>&#39;;

   var nextH2Index = j + 1;
   var next;
   if (nextH2Index == jquery_h2_list.length) {
   if (i + 1 == jquery_h1_list.length) {
    next = jquery_h1_list[0];
   }
   else {
    next = jquery_h1_list[i + 1];
   }
   }
   else {
   next = jquery_h2_list[nextH2Index];
   }
   var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h4");
   // 三级目录 start
   if (jquery_h3_list.length > 0) {
   li_content += &#39;<ul class="third_class_ul">&#39;;
   }

   for (var k = 0; k < jquery_h3_list.length; k++) {
   var go_to_third_Content = &#39;<p style="text-align: right"><a name="_label3_&#39; + i + &#39;_&#39; + j + &#39;_&#39; + k + &#39;"></a></p>&#39;;
   $(jquery_h3_list[k]).before(go_to_third_Content);
   // 三级目录的一条
   li_content += &#39;<li><a href="#_label3_&#39; + i + &#39;_&#39; + j + &#39;_&#39; + k + &#39;" rel="external nofollow" >&#39; + $(jquery_h3_list[k]).text() + &#39;</a></li>&#39;;
   }

   if (jquery_h3_list.length > 0) {
   li_content += &#39;</ul>&#39;;
   }
   li_content += &#39;</li>&#39;;
   // 三级目录 end
  }
  if (jquery_h2_list.length > 0) {
   li_content += &#39;</ul>&#39;;
  }
  li_content += &#39;</li>&#39;;
  // 二级目录 end

  content += li_content;
  }
  // 一级目录 end
  content += &#39;</ul>&#39;;
  content += &#39;</p>&#39;;

  $($(&#39;#content&#39;)[0]).prepend(content);
 }

 GenerateContentList();
 </script>

L'avez-vous appris ? Essayez-le maintenant.

Recommandations associées :

PHP interdit l'affichage de l'index du répertoire

Partage d'instance de moteur de recherche de simulation interdomaine jQuery Jsonp

php convertit le tableau d'index en json

Résumé de l'opération d'indexation de la base de données MySQL

Explication détaillée de l'instance javascript implémente l'indexation aléatoire de valeurs dans le tableau Méthodes de transformation et de création de tableaux aléatoires

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!