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


Posted in Javascript onFebruary 10, 2016

本文实例为大家介绍了利用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');
}

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

Javascript 相关文章推荐
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
js实现单元格拖拽效果
Feb 10 Javascript
JavaScript数组 几个常用方法总结
Nov 11 Javascript
浅析javascript函数表达式
Feb 10 #Javascript
详解AngularJS中的http拦截
Feb 09 #Javascript
详解Javacript和AngularJS中的Promises
Feb 09 #Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 #Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 #Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 #Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 #Javascript
You might like
PHP中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
mysq GBKl乱码
2006/11/28 PHP
Destoon模板制作简明教程
2014/06/20 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
微信小程序实现留言板
2018/10/31 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
python实现飞机大战
2018/09/11 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
工程现场管理求职自荐信
2013/10/02 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
奥运会口号
2014/06/13 职场文书
升学宴演讲稿
2014/09/01 职场文书
学校节水倡议书
2015/04/29 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
python ConfigParser库的使用及遇到的坑
2022/02/12 Python