利用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静态的url如何传递
May 03 Javascript
javascript 数组操作详解
Jan 29 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
微信小程序实现底部弹出框
Nov 18 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语法(3)
2006/10/09 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
php实现的生成排列算法示例
2019/07/25 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
详解如何较好的使用js
2016/12/16 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
在类Unix系统上开始Python3编程入门
2015/08/20 Python
提升Python程序性能的7个习惯
2019/04/14 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
python time.strptime格式化实例详解
2021/02/03 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
C++面试题目
2013/06/25 面试题
护理学应聘自荐书范文
2014/02/05 职场文书
升学宴演讲稿
2014/09/01 职场文书
连锁超市项目计划书
2014/09/15 职场文书
教师创先争优承诺书
2015/04/27 职场文书
初级职称评定工作总结
2015/08/13 职场文书
《将心比心》教学反思
2016/02/23 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python