장 목차 색인을 자동으로 생성하는 웹 사이트의 Node.js 코드 예제
- 小云云원래의
- 2018-01-09 09:12:122200검색
웹사이트의 많은 기능은 js로 구현됩니다. 이 글에서는 주로 블로그 가든 블로그가 챕터 디렉토리 색인을 자동으로 생성할 수 있도록 하는 여러 js 코드를 소개합니다. 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
첫 번째 유형: 첫 번째 수준 디렉터리만 지원
684271ed9684bde649abda8831d4d355, 단락으로 분류는 지원되지 않습니다.
블로그 게시물의 품질 외에도 좋은 블로그 게시물에는 조직도 좋습니다. 독자들이 더 많이 읽을 수 있는 구조 편안하고 편리합니다. 정원에 있는 일부 정원 친구들의 블로그 게시물이 챕터로 구분되어 있고, 블로그 게시물을 클릭하면 목차 색인이 있는 것을 볼 수 있습니다. , 읽기를 위해 해당 장으로 이동하고 디렉토리 상단에서 Fish Li의 블로그 게시물로 돌아갈 수도 있습니다. 물론 블로그 게시물을 작성할 때 이 구조를 수동으로 설정하면, 그것은 매우 번거로운 일이 될 것이고, 작가의 작업량도 확실히 늘어날 것입니다. 장 색인을 자동으로 생성할 수 있다면 많은 작업이 절약되지 않을까요? 원래 FireBug를 사용하여 Fish Li 소스 코드가 어떻게 구현되는지 확인하고 싶었지만 js가 암호화된 것 같습니다. 그러다가 제가 직접 해봤습니다. 사실 코드도 많지 않고 아주 간단했어요.
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>지침: 블로그 파크에 로그인한 후 블로그 파크의 백엔드 관리를 열고 "설정" 탭으로 전환한 후 위 코드를 붙여넣으세요. "으로 "바닥글 HTML 코드" 영역에 저장하면 됩니다.
참고: 위 js 코드에서 추출된 h3는 장의 제목으로 사용됩니다. 제목이 h3가 아닌 경우 코드 주석에서 직접 수정하세요. 기사 시작 부분에 목차 색인을 생성하는 것 외에도 이 코드는 각 장의 오른쪽 하단(즉, 다음 장 제목의 오른쪽 상단)에 "맨 위로 돌아가기" 링크도 생성합니다. 독자가 쉽게 돌아올 수 있도록 합니다. 이 문서의 디렉터리 구조는 자동으로 생성됩니다. 유용하다고 생각되면 빠르게 사용해 보세요.
원문: https://www.cnblogs.com/wangqiguo/p/4355032.html
두 번째 유형: 2단계 분류 지원
throughc1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d355
렌더링:
긴 기사의 경우 독자가 기사의 내용과 수준을 더 명확하게 이해할 수 있는 좋은 목차 색인이 필요합니다. 그러나 현재(2015.7) Blog Park에서는 csdn 블로그와 같이 게시된 기사에 대한 디렉토리 색인을 자동으로 생성하지 않습니다. 그러나 일부 네티즌들은 Blog Park 백엔드에서 제공하는 일부 사용자 정의 기능을 통해 자신의 스크립트를 작성하여 이 기능을 구현했습니다. 제가 주로 사용한 스크립트는 @lavender 님의 멜로디를 참고하였습니다. 기사 주소는 http://www.cnblogs.com/wangqiguo/p/4355032.html 입니다.
원작자의 스크립트는 레벨 1 디렉터리만 지원합니다. 두 가지 레벨을 변경했습니다. 첫 번째 레벨은 h2이고 두 번째 레벨은 h3입니다. 토론 QQ 그룹 계정과 같은 일부 가젯도 추가되었습니다. 효과는 아래 그림과 같습니다.
기능을 추가하는 구체적인 단계는 다음과 같습니다.
1. 블로그 공원 백엔드가 js를 지원하는지 확인하세요.
이는 기본적으로 지원되지 않습니다. 활성화를 신청하기 위해 담당자에게(이메일은 contact@cnblogs.com) 이메일을 작성하고 한 시간 이내에 답변을 받았습니다. 이메일 내용에 제목과 같은 두 단어만 썼습니다. . . .
2. 백엔드에 스크립트 추가
블로그 파크의 백엔드를 열고 "설정" 탭을 입력한 후 하단의 "바닥글 HTML 코드"에 해당하는 편집 상자에 js 코드를 붙여넣은 다음 " 저장' 버튼을 눌러 저장하세요.
3. 형식에 따라 기사 작성
새 블로그 게시물을 작성할 때 h2, h3 등 js 스크립트에 설정된 형식에 따라 장을 나누는 데 주의하세요. 물론, 이전에 출판된 기사에 h2, h3 등이 있으면 디렉토리 색인이 자동으로 생성됩니다.
는 다음과 같습니다.
<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>세 번째 유형:
효과
데모 페이지를 달성하기 위해
c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d3553f7b3decd2dcafb07b84d2d3985d9f40를 통해 3단계 디렉터리를 지원합니다. // www.jb51.net/article/132341.htm
Zhang Guo의 페이지를 참조하세요. 그는 4a249f0d628e2318394fd9b75b4636b1c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d355를 사용합니다. 여기서 Script House의 편집자는 c1a436a314ed609750bd7c7d319db4da< ;h3>를 사용합니다. ;3f7b3decd2dcafb07b84d2d3985d9f40 SEO에 따르면 페이지에 h1이 많이 있으면 가중치에 영향을 미칩니다.
<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>다들 배워보셨나요? 지금 사용해 보세요.
관련 권장 사항:
jQuery Jsonp 도메인 간 시뮬레이션 검색 엔진 인스턴스 공유
예제 JavaScript를 사용하여 배열의 값 인덱스를 무작위로 지정하고 무작위 배열을 만드는 방법에 대한 자세한 설명
위 내용은 장 목차 색인을 자동으로 생성하는 웹 사이트의 Node.js 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!