Home  >  Article  >  Web Front-end  >  Use JS to generate a blog directory and CSS to customize the blog

Use JS to generate a blog directory and CSS to customize the blog

PHPz
PHPzOriginal
2016-05-16 15:15:541550browse

The example in this article introduces the method of using JS to generate a blog directory and CSS to customize the blog. It is shared with everyone for your reference. The specific content is as follows

If you want to generate a directory, many people say that you need JS to modify permissions. Just go to the settings page directly, find the contact email below and send it directly. The staff will reply very quickly.

After obtaining the permission, the following is to place the compiled (searched) written (searched) JS code in the box of the footer HTML code, and then click Save. It is important to pay attention to the levels of headings generated by the table of contents. The JS code is as follows, basically unchanged. It copies the original author's writing method and can generate secondary directories, h2 and h3 respectively. This needs to be noted.

In summary, this directory has the following characteristics, which can also be seen in this article (the secondary directory is not used in this blog post).

1). You can generate two-level directories at the beginning of the blog post
2). There is a link back to the top above each first-level directory

The JS code is as follows.

0)
 {
  var content = '';
  content += '';
  content += '目录';
  content += '';
  for(var i=0; i回到顶部';
   $(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[j]).before(li3_anchor);
    li3_content += '' + $(h3_list[j]).text() + '';
   }
   
   var li2_content = '';
   if(li3_content.length > 0)
    li2_content = '' + $(h2_list[i]).text() + '' + li3_content + '';
   else
    li2_content = '' + $(h2_list[i]).text() + '';
   content += li2_content;
  }
if($('#cnblogs_post_body').length != 0 )
  {
   $($('#cnblogs_post_body')[0]).prepend(content);
  }
 } 
}
GenerateContentList();
" _ue_custom_node_="true">

【Recommended related tutorials】

1. JavaScript video tutorial
2. JavaScript online manual
3. bootstrap tutorial

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn