js-Codebeispiel für eine Website zum automatischen Generieren eines Kapitel-Inhaltsverzeichnisindexes

Viele Funktionen der Website werden hauptsächlich von js implementiert, mit denen Blog Park-Blog automatisch einen Kapitelverzeichnisindex erstellen kann. Ich hoffe, es kann jedem helfen.

Der erste Typ: unterstützt nur Verzeichnisse der ersten Ebene

, da Absätze, Klassifizierung wird nicht unterstützt

A Guter Blog-Beitrag Neben der Qualität von Blog-Beiträgen kann eine gute Organisationsstruktur den Lesern auch das Lesen erleichtern. Ich sehe, dass die Blog-Beiträge einiger Gartenfreunde in Kapitel unterteilt sind und es eine Tabelle gibt Inhaltsindex für die Kapitel vor den Blog-Beiträgen. Nachdem Sie auf den Index geklickt haben, springen Sie zum Lesen zum entsprechenden Kapitel und können auch zum Anfang des Blog-Beitrags von Fish Li zurückkehren. Natürlich wäre diese Struktur sehr mühsam, wenn sie beim Schreiben eines Blog-Beitrags manuell festgelegt würde. Dies erhöht zweifellos die Arbeitsbelastung der Autoren. Würde es nicht viel Arbeit sparen, wenn der Kapitelindex automatisch generiert werden könnte? Ich wollte ursprünglich FireBug verwenden, um zu sehen, wie der Fish Li-Quellcode implementiert ist, aber es scheint, dass der js verschlüsselt ist. Dann habe ich es selbst gemacht. Tatsächlich gab es nicht viel Code, es war sehr einfach.

HTML-Code

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

JS-Code

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

Verwendung: Anmelden Nachdem Sie im Blogpark angekommen sind, öffnen Sie die Backend-Verwaltung des Blogparks, wechseln Sie zur Registerkarte „Einstellungen“ und fügen Sie den obigen Code in den Bereich „Fußzeilen-HTML-Code“ ein, um ihn zu speichern.

Hinweis: Der aus dem obigen js-Code extrahierte h3 wird als Titel des Kapitels verwendet. Wenn Ihr Titel nicht h3 ist, ändern Sie ihn bitte selbst im Codekommentar. Dieser Code generiert nicht nur ein Inhaltsverzeichnis am Anfang des Artikels, sondern generiert auch einen „Zurück zum Anfang“-Link in der unteren rechten Ecke jedes Kapitels (d. h. in der oberen rechten Ecke des nächsten Kapiteltitels). um den Lesern die Rückkehr zu erleichtern. Die Verzeichnisstruktur dieses Artikels wird automatisch generiert. Wenn Sie ihn nützlich finden, probieren Sie ihn schnell aus.

Originaltext: https://www.cnblogs.com/wangqiguo/p/4355032.html

Zweiter Typ: Sekundärklassifizierung unterstützen

Durch

Rendering:

Für längere Artikel ist ein gutes Inhaltsverzeichnis erforderlich, das dies ermöglicht den Lesern, den Inhalt und das Niveau des Artikels besser zu verstehen. Allerdings generiert Blog Park derzeit (2015.7) nicht automatisch Verzeichnisindizes für veröffentlichte Artikel wie csdn blog. Einige Internetnutzer haben diese Funktion jedoch implementiert, indem sie ihre eigenen Skripte über einige benutzerdefinierte Funktionen geschrieben haben, die vom Blog Park-Backend bereitgestellt werden. Das von mir verwendete Skript bezieht sich hauptsächlich auf die Melodie von @lavender. Die Artikeladresse lautet: http://www.cnblogs.com/wangqiguo/p/4355032.html.

Das Skript des ursprünglichen Autors unterstützt nur Verzeichnisse der Ebene 1. Ich habe zwei Ebenen geändert: die erste Ebene ist h2 und die zweite Ebene ist h3. Es wurden auch einige Gadgets hinzugefügt, beispielsweise QQ-Gruppenkonten zur Diskussion. Der Effekt ist in der folgenden Abbildung dargestellt:

Die spezifischen Schritte zum Hinzufügen von Funktionen sind:

Stellen Sie sicher, dass Ihr Blogpark-Backend js unterstützt
Dies wird standardmäßig nicht unterstützt. Ich muss eine offizielle E-Mail senden, um die Aktivierung zu beantragen (die E-Mail-Adresse lautet contact@cnblogs.com und habe innerhalb einer Stunde eine Antwort erhalten). E-Mail: wie im Titel. . . .
2. Fügen Sie das Skript zum Backend hinzu
Öffnen Sie das Backend des Blogparks, rufen Sie die Registerkarte „Einstellungen“ auf, fügen Sie Ihren JS-Code in das Bearbeitungsfeld ein, das dem „Fußzeilen-HTML-Code“ unten entspricht, und Klicken Sie dann auf die Schaltfläche „Speichern“.
3. Schreiben Sie Artikel entsprechend dem Format
Achten Sie beim Schreiben eines neuen Blogbeitrags darauf, die Kapitel entsprechend dem in Ihrem JS-Skript festgelegten Format zu unterteilen, z. B. h2, h3 usw. Wenn zuvor veröffentlichte Artikel h2, h3 usw. haben, wird natürlich automatisch ein Verzeichnisindex generiert.

lautet wie folgt:

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

Dritter Typ: unterstützt Verzeichnisse der dritten Ebene

bis

< ;h4> Implementierung von

Renderings

Demonstrationsseite: http://www.jb51.net/article/132341.htm

Siehe Zhang Guos Seite, er verwendet

, hier verwendet der Herausgeber von Script House

, laut SEO eine große Anzahl Anzahl der auf der Seite angezeigten H1-Zeichen wirkt sich auf das Gewicht aus.

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

Hast du es gelernt? Probieren Sie es jetzt aus.

Verwandte Empfehlungen:

PHP verbietet die Anzeige des Verzeichnisindexes

jQuery Jsonp domänenübergreifende Simulation von Suchmaschineninstanzfreigabe

PHP konvertiert Index-Array in JSON

Zusammenfassung des MySQL-Datenbank-Indexvorgangs

Detaillierte Erläuterung der Instanz Javascript implementiert zufällige Indizierung von Werten im Array Methoden zum Transformieren und Erstellen zufälliger Arrays

Das obige ist der detaillierte Inhalt vonjs-Codebeispiel für eine Website zum automatischen Generieren eines Kapitel-Inhaltsverzeichnisindexes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!