Maison >interface Web >js tutoriel >À propos de l'exemple de code de répertoire du chapitre sur la génération de sites Web

À propos de l'exemple de code de répertoire du chapitre sur la génération de sites Web

亚连original: 2018-06-13 13:56:471782parcourir

Cet article présente principalement plusieurs codes js qui permettent au blog Blog Park de générer automatiquement des index de répertoires de chapitres. Les amis dans le 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 paragraphe, la classification n'est pas prise en charge

Un bon article de blog doit non seulement avoir une bonne qualité de blog, mais également avoir une bonne structure organisationnelle qui rend les lecteurs plus confortables à lire. Idéalement, je vois que les articles de blog de certains amis du jardin sont divisés en chapitres, et il y a un index de la table des matières du chapitre devant l'article de blog. il passera au chapitre correspondant pour la lecture, et vous pourrez également revenir en haut de la table des matières, parmi lesquels le billet 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 blog. poster, ce serait très gênant et cela augmenterait sans aucun doute la charge de travail de l'écrivain. 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>

Comment utiliser : Après vous être connecté au parc de blogs, ouvrez la gestion backend du parc de blogs et changez sur la carte d'option "Paramètres", collez le code ci-dessus dans la zone "Code HTML du pied de page" et enregistrez-le.

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 QQ pour la discussion. L'effet est comme indiqué dans la figure ci-dessous :

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

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

Le troisième type : prend en charge les répertoires à trois niveaux

viac1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d3553f7b3decd2dcafb07b84d2d3985d9f40

Rendu

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

Référez-vous à la page de Zhang Guo, il utilise

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

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles Liés

Voir plus