利用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 相关文章推荐
ExtJS Window 最小化的一种方法
Nov 18 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
搜索引擎技术核心揭密
2006/10/09 PHP
浅谈PHP语法(1)
2006/10/09 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
layui实现三级联动效果
2019/07/26 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
Python中文件遍历的两种方法
2014/06/16 Python
Python socket聊天脚本代码实例
2020/01/02 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
编写python代码实现简单抽奖器
2020/10/20 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
白色公司:The White Company
2017/10/11 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
教师党员一句话承诺
2014/03/28 职场文书
毕业证委托书范文
2014/09/26 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
Ruby处理CSV数据方法详解
2022/04/18 Ruby