Use JS to generate blog directories and CSS to customize blogs

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

1. JS code

To generate the directory, many people say that JS needs to modify the permissions. For that, you can directly go to the Settings page, find the contact email address at the bottom and send it directly. The staff replies very quickly.

After you get the permission, the following is to put the JS code (search) write (find) in the box of the HTML code in the footer and click save. It is important to note what level headings the directory is generated by. JS code is as follows, basically unchanged, copy the original author's writing method, can generate a level 2 directory, h2 and h3 respectively, this needs to be noted.

Taken together, the directory has several features that can be seen in this article (level 2 directories are not used in this post).

1). You can generate a two-level directory at the beginning of a blog post
2). Each level 1 directory has a link back to the top
The JS code is as follows.

<script language="javascript" type="text/javascript">
//  Generates a two-level directory index list 
function GenerateContentList()
{
 var mainContent = $('#cnblogs_post_body');
 var h2_list = $('#cnblogs_post_body h2');　　// If your chapter title is not h2, All you have to do is take this h2 Change can be 

 if(mainContent.length < 1)
  return;
 
 if(h2_list.length>0)
 {
  var content = '<a name="_labelTop"></a>';
  content += '<div id="navCategory">';
  content += '<p style="font-size:18px"><b> directory </b></p>';
  content += '<ul>';
  for(var i=0; i<h2_list.length; i++)
  {
   var go_to_top = '<div style="text-align: right"><a href="#_labelTop"> Back to the top </a><a name="_label' + i + '"></a></div>';
   $(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 + '">' + $(h3_list[j]).text() + '</a></li>';
   }
   
   var li2_content = '';
   if(li3_content.length > 0)
    li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
   else
    li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
   content += li2_content;
  }
if($('#cnblogs_post_body').length != 0 )
  {
   $($('#cnblogs_post_body')[0]).prepend(content);
  }
 } 
}

GenerateContentList();
</script>

2. Level 1 heading CSS format

I have observed one of zzq's blog posts in which the level 1 title has a light gray background, and I think it looks good after adding it. Here I use the image 1 as the background for the level 1 title. The image and CSS are described below.

#cnblogs_post_body h2 {
 background-repeat: no-repeat;
 background-image: url('http://xxxx');
}

Above is the detailed content of this article, hope to be helpful to your study.