利用JS生成博文目录及CSS定制博客

 更新时间:2016年02月10日 20:21:10   投稿:lijiao  
这篇文章主要介绍了利用JS生成博文目录及CSS定制博客的相关资料,需要的朋友可以参考下

本文实例为大家介绍了利用JS生成博文目录及CSS定制博客的方法,分享给大家供大家参考,具体内容如下

1.JS代码

  想要生成目录,许多都说需要JS修改权限,那个这里就直接进入设置页面,找到下方的联系邮箱直接发去就行了,工作人员回复的还是很快的。

  拿到权限之后,下面就是将编(搜)写(寻)的JS代码放在页脚HTML代码的方框内,然后点击保存就可以了。要注意目录的生成是几级标题,这一点可是很重要的。JS代码如下,基本没有变化,拷贝了原作者的写法,可以生成二级目录,分别为h2和h3,这点需要注意。

  综合来说,这个目录有以下几点的特点,这些也都可以在本文中看到(二级目录本博文没有使用)。

1). 可以在博文首部生成两级目录
2). 每个一级目录上方有一个回到顶部的链接
  JS代码如下。

<script language="javascript" type="text/javascript">
// 生成两级目录索引列表
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 += '<div 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 = '<div style="text-align: right"><a href="#_labelTop">回到顶部</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. 一级标题CSS格式

  我在观察zzq同学的一些博文里面的一级标题有一个浅灰色的背景,觉得添加之后看起来很不错。在这里就借用一下该图片作为一级标题的背景,图片和CSS的说明如下。

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

以上就是本文的详细内容,希望对大家的学习有所帮助。

相关文章

  • JS特权方法定义作用以及与公有方法的区别

    JS特权方法定义作用以及与公有方法的区别

    在构造函数内部通过this关键字定义的的方法为特权方法它的作用为在构造函数外面公开访问(仅限于实例化的对象),而且还能够访问私有成员和方法,感兴趣的你可以参考下哈
    2013-03-03
  • JavaScript事件委托的技术原理探讨示例

    JavaScript事件委托的技术原理探讨示例

    使用事件委托技术能让你避免对特定的每个节点添加事件监听器;相反,事件监听器是被添加到它们的父元素上
    2014-04-04
  • ECMAScript 基础知识

    ECMAScript 基础知识

    ECMAScript 基础知识...
    2007-06-06
  • 函数式 JavaScript(一)简介

    函数式 JavaScript(一)简介

    JavaScript 是一种强大但被误解的语言。关于它到底是一种面向对象的语言还是函数式语言,人们众说纷纭——但是现在让我们把这些争辩都抛到脑后。
    2014-07-07
  • 详解设置Webstorm 利用babel将ES6自动转码成ES5

    详解设置Webstorm 利用babel将ES6自动转码成ES5

    这篇文章主要介绍了详解设置Webstorm 利用babel将ES6自动转码成ES5,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • JavaScript 实现继承的几种方式

    JavaScript 实现继承的几种方式

    这篇文章主要介绍了JavaScript 实现继承的几种方式,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2021-02-02
  • js实现下拉框选择要显示图片的方法

    js实现下拉框选择要显示图片的方法

    这篇文章主要介绍了js实现下拉框选择要显示图片的方法,涉及针对js操作select的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • javascript实现阻止iOS APP中的链接打开Safari浏览器

    javascript实现阻止iOS APP中的链接打开Safari浏览器

    这篇文章主要介绍了javascript实现阻止iOS APP中的链接打开Safari浏览器,这个IOS APP一般是Web APP,否则没法使用本文的代码,需要的朋友可以参考下
    2014-06-06
  • JavaScript函数this指向问题详解

    JavaScript函数this指向问题详解

    这篇文章主要为大家介绍了JavaScript函数this指向,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • 用JS实现选项卡

    用JS实现选项卡

    这篇文章主要为大家详细介绍了用JS实现选项卡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03

最新评论