Informationen zum Codebeispiel für ein Kapitelverzeichnis zur Website-Generierung

In diesem Artikel werden hauptsächlich mehrere JS-Codes vorgestellt, die es dem Blog Park-Blog ermöglichen, automatisch Kapitelverzeichnisindizes zu generieren. Freunde in Not können darauf verweisen

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

684271ed9684bde649abda8831d4d355, als Absatz wird die Klassifizierung nicht unterstützt

Ein guter Blogbeitrag sollte nicht nur eine gute Blogqualität haben, sondern auch eine gute Organisationsstruktur haben Praktischerweise sehe ich, dass die Blogbeiträge einiger Gartenfreunde in Kapitel unterteilt sind und vor dem Blogbeitrag ein Inhaltsverzeichnis angezeigt wird Index, es wird zum entsprechenden Kapitel gesprungen, um es zu lesen, und Sie können auch zum Anfang des Inhaltsverzeichnisses zurückkehren. Wenn diese Struktur beim Schreiben manuell festgelegt wird, ist dies natürlich der Fall Einen Blog-Beitrag zu schreiben, wäre sehr mühsam und würde zweifellos die Arbeitsbelastung des Autors erhöhen. 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>章节1</h3>
<p>这里是章节1的内容</p>
<h3>章节2</h3>
<p>这里是章节2的内容</p>
<h3>章节3</h3>
<p>这里是章节3的内容</p>
<h3>章节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>

Anleitung: Nach der Anmeldung im Blogpark die Backend-Verwaltung des Blogparks öffnen, zum Reiter „Einstellungen“ wechseln , und ändern Sie das Obige. Fügen Sie den Code in den Bereich „Footer HTML Code“ ein und speichern Sie ihn.

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 so schnell wie möglich aus.

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

Zweiter Typ: Sekundärklassifizierung unterstützen

Durch c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d355

Rendering:

Für längere Artikel ist ein gutes Inhaltsverzeichnis erforderlich, das dies ermöglicht den Lesern, den Inhalt und die Ebene 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 Blog-Beitrags 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>

Der dritte Typ: unterstützt dreistufige Verzeichnisse

erreicht den

-Effekt durch c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d355 3f7b3decd2dcafb07b84d2d3985d9f40 Bild

Demoseite: //www.jb51.net/article/132341.htm

Siehe Zhang Guos Seite, die er verwendet 4a249f0d628e2318394fd9b75b4636b1c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d355, hier verwendet der Herausgeber von Script House c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d3553f7b3decd2dcafb07b84d2d3985d9f40 Laut SEO haben eine große Anzahl von h1s auf der Seite einen Einfluss auf die Gewicht.

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

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Über die Gründe, warum auf den v4-Verlauf nicht zugegriffen werden kann

Warum auf „response.body().string()“ nicht zugegriffen werden kann mehrere Anrufe erreichen?

So implementieren Sie einen Kalender mit Vue-Komponenten (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonInformationen zum Codebeispiel für ein Kapitelverzeichnis zur Website-Generierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!