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
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 = $('#cnblogs_post_body h3');//如果你的章节标题不是h3,只需要将这里的h3换掉即可
if(jquery_h3_list.length>0)
{
var content = '<a name="_labelTop"></a>';
content += '<p id="navCategory">';
content += '<p style="font-size:18px"><b>阅读目录</b></p>';
content += '<ul>';
for(var i =0;i<jquery_h3_list.length;i++)
{
var go_to_top = '<p style="text-align: right"><a href="#_labelTop" rel="external nofollow" rel="external nofollow" >回到顶部</a><a name="_label' + i + '"></a></p>';
$(jquery_h3_list[i]).before(go_to_top);
var li_content = '<li><a href="#_label' + i + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + $(jquery_h3_list[i]).text() + '</a></li>';
content += li_content;
}
content += '</ul>';
content += '</p>';
if($('#cnblogs_post_body').length != 0 )
{
$($('#cnblogs_post_body')[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
Durch
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 = $('#cnblogs_post_body');
var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
if(mainContent.length < 1)
return;
if(h2_list.length>0)
{
var content = '<a name="_labelTop"></a>';
content += '<p id="navCategory">';
content += '<p style="font-size:18px"><b>目录</b></p>';
content += '<ul>';
for(var i=0; i<h2_list.length; i++)
{
var go_to_top = '<p style="text-align: right"><a href="#_labelTop" rel="external nofollow" rel="external nofollow" >回到顶部</a><a name="_label' + i + '"></a></p>';
$(h2_list[i]).before(go_to_top);
var h3_list = $(h2_list[i]).nextAll("h3");
var li3_content = '';
for(var j=0; j<h3_list.length; j++)
{
var tmp = $(h3_list[j]).prevAll('h2').first();
if(!tmp.is(h2_list[i]))
break;
var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
$(h3_list[j]).before(li3_anchor);
li3_content += '<li><a href="#_label' + i + '_' + j + '" rel="external nofollow" >' + $(h3_list[j]).text() + '</a></li>';
}
var li2_content = '';
if(li3_content.length > 0)
li2_content = '<li><a href="#_label' + i + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
else
li2_content = '<li><a href="#_label' + i + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + $(h2_list[i]).text() + '</a></li>';
content += li2_content;
}
content += '</ul>';
content += '</p><p> </p>';
content += '<p style="font-size:18px"><b>正文</b></p>';
if($('#cnblogs_post_body').length != 0 )
{
$($('#cnblogs_post_body')[0]).prepend(content);
}
}
var qqinfo = '<p style="color:navy;font-size:12px">讨论QQ群：135202158</p>';
$(mainContent[0]).prepend(qqinfo);
}
GenerateContentList();
</script>erreicht den
-Effekt durch
Demoseite: //www.jb51.net/article/132341.htm
Siehe Zhang Guos Seite, die er verwendet
<script language="javascript" type="text/javascript">
//生成目录索引列表
function GenerateContentList() {
var jquery_h1_list = $('#content h2');
if (jquery_h1_list.length == 0) { return; }
if ($('#content').length == 0) { return; }
var content = '<a name="_labelTop"></a>';
content += '<p id="navCategory">';
content += '<p style="font-size:18px"><b>目录</b></p>';
// 一级目录 start
content += '<ul class="first_class_ul">';
for (var i = 0; i < jquery_h1_list.length; i++) {
var go_to_top = '<p style="text-align: right"><a name="_label' + i + '"></a></p>';
$(jquery_h1_list[i]).before(go_to_top);
// 一级目录的一条
var li_content = '<li><a href="#_label' + i + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + $(jquery_h1_list[i]).text() + '</a></li>';
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 +='<ul style="list-style-type:none; text-align: left; margin:2px 2px;">';
li_content += '<ul class="second_class_ul">';
}
for (var j = 0; j < jquery_h2_list.length; j++) {
var go_to_top2 = '<p style="text-align: right"><a name="_lab2_' + i + '_' + j + '"></a></p>';
$(jquery_h2_list[j]).before(go_to_top2);
// 二级目录的一条
li_content += '<li><a href="#_lab2_' + i + '_' + j + '" rel="external nofollow" >' + $(jquery_h2_list[j]).text() + '</a></li>';
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 += '<ul class="third_class_ul">';
}
for (var k = 0; k < jquery_h3_list.length; k++) {
var go_to_third_Content = '<p style="text-align: right"><a name="_label3_' + i + '_' + j + '_' + k + '"></a></p>';
$(jquery_h3_list[k]).before(go_to_third_Content);
// 三级目录的一条
li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '" rel="external nofollow" >' + $(jquery_h3_list[k]).text() + '</a></li>';
}
if (jquery_h3_list.length > 0) {
li_content += '</ul>';
}
li_content += '</li>';
// 三级目录 end
}
if (jquery_h2_list.length > 0) {
li_content += '</ul>';
}
li_content += '</li>';
// 二级目录 end
content += li_content;
}
// 一级目录 end
content += '</ul>';
content += '</p>';
$($('#content')[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!
So ändern Sie Koordinaten in Matlab
So legen Sie Startelemente beim Start fest
Welche Funktion hat der Frequenzteiler?
OuYi-Auszahlungsmethode
Was tun, wenn das Laden der DLL fehlschlägt?
Methode zur Wiederherstellung der Oracle-Datenbank
Empfohlene Reihenfolge zum Erlernen von C++ und der C-Sprache
Einführung in die Bedeutung von Javascript
