이 글에서는 Blog Park 블로그가 챕터 디렉터리 색인을 자동으로 생성할 수 있는 여러 js 코드를 주로 소개합니다. 필요한 친구는 이를 참조할 수 있습니다.
좋은 블로그 게시물은 블로그 품질도 좋아야 할 뿐만 아니라, 독자들이 더 편안하고 편리하게 읽을 수 있는 좋은 정리 구조를 가지고 있어야 합니다. 정원은 챕터로 나누어져 있으며, 블로그 게시물 앞에 목차 색인이 있습니다. 색인을 클릭하면 해당 챕터로 이동하여 읽을 수 있으며, 목차 상단으로 돌아갈 수도 있습니다. 그 중 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
through
렌더링:
긴 기사의 경우 독자가 기사의 내용과 수준을 더 명확하게 이해할 수 있는 좋은 목차 색인이 필요합니다. 그러나 현재(2015.7) Blog Park에서는 csdn 블로그와 같이 게시된 기사에 대한 디렉토리 색인을 자동으로 생성하지 않습니다. 그러나 일부 네티즌들은 블로그 파크 백엔드에서 제공하는 일부 사용자 정의 기능을 통해 자신의 스크립트를 작성하여 이 기능을 구현했습니다. 제가 주로 사용한 스크립트는 @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>렌더링
을 달성하기 위해
~
Zhang Guo의 페이지를 참조하세요. 그는
<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>위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
response.body().string()을 여러 번 호출할 수 없는 이유는 무엇인가요?
Vue 구성 요소를 사용하여 달력을 구현하는 방법(자세한 튜토리얼)
위 내용은 웹 사이트 생성 장 디렉토리 코드 예제 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
