利用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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
JS之相等操作符详解
Sep 13 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 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 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
Python实现字典依据value排序
2016/02/24 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
浅析Django中关于session的使用
2019/12/30 Python
Python requests模块session代码实例
2020/04/14 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
前台接待岗位职责
2013/12/03 职场文书
车间工艺员岗位职责
2013/12/09 职场文书
认识深刻的检讨书
2014/02/16 职场文书
党支部综合考察材料
2014/05/19 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
国家助学贷款承诺书
2015/04/30 职场文书