博客园文章自动生成导航目录
文章如果比较长的话,子标题很难找,文章结构没法一目了然,如果有一个导航目录靠在边栏就好了
看了很多园子里其他的文章,js和css挺长的,怕用不好,干脆自己尝试写一个
一、要实现的功能
1、自动生成
不限定某几个h标签,最好h1-h6都可以支持
2、靠在侧边栏
我的边栏内容比较少,我就把导航目录直接加在边栏下面了,这样会和原先的风格结构比较搭,如果边栏内容比较多的,可能要改成绝对定位在右下角了
这里需要引入stickUp.js插件,在滚动条下滑的时候将导航栏固定在页面顶端
3、简单的风格
不同皮肤显示可以融入的比较好,这里会借用catListPostArchive随笔档案的css类,导航目录的样式会和随笔档案的样式一样,自己就不用加样式了
4、目录滚动监听
当页面滑动到某个h标签时,导航目录中需要高亮显示那一条,需要引用bootstrap的scrollspy.js插件来实现
5、优化
最好能平滑的滚动
二、实现代码
1、cnblog-scroller.js
jQuery(function($) {$(function() {//延迟1秒加载, 等博客园的侧栏加载完毕, 不然导航目录距离页顶部的高度会不对setTimeout(function () {loadScroller();}, 1000);});//加载导航目录function loadScroller() {//先获取第一个h标签, 之后循环时作为上一个h标签var $ph = $('#cnblogs_post_body :header:eq(0)');if($ph.length > 0) {//设置层级为1$ph.attr('offset', '1');//添加导航目录的内容$('#blog-sidecolumn').append('<div id="sidebar_scroller" class="catListPostArchive sidebar-block"><h3 class="catListTitle">导航目录</h3><ul class="nav"></ul></div>');//取当前边栏的宽度$('#sidebar_scroller').css('width', $('#blog-sidecolumn').width());//让导航目录可以停留在页面顶端$('#sidebar_scroller').stickUp();//遍历文章里每个h标签$('#cnblogs_post_body :header').each(function(i) {var $h = $(this);//设置h标签的id, 编号从0开始$h.attr('id', 'scroller-' + i);//比上一个h标签层级小, 级数加1if($h[0].tagName > $ph[0].tagName) {$h.attr('offset', parseInt($ph.attr('offset')) + 1);} //比上一个h标签层级大, 级数减1else if($h[0].tagName < $ph[0].tagName) {var h = parseInt($h[0].tagName.substring(1));var ph = parseInt($ph[0].tagName.substring(1));var offset = parseInt($ph.attr('offset')) - (ph-h);$h.attr('offset', offset < 1 ? 1 : offset);} //和上一个h标签层级相等时, 级数不变else {$h.attr('offset', $ph.attr('offset'));}//添加h标签的目录内容$('#sidebar_scroller ul').append('<li class="scroller-offset' + $h.attr('offset') + '"><a href="#scroller-' + i + '">' + $h.text() + '</a></li>');//最后设置自己为上一个h标签$ph = $h;});//开启滚动监听, 监听所有在.nav类下的li$('body').scrollspy();//让页面的滚动更平滑$('#sidebar_scroller a').on('click', function() {var targetOffset = $(this.hash).offset().top;$('html, body').animate({scrollTop: targetOffset}, 800);return false;});}}
});
stickUp.js插件的使用只有"$('#sidebar_scroller').stickUp();"一句,不过需要这个元素距离页顶部的高度已经确定(代码中延迟了1秒,等日历和侧栏控件加载好再加载,如果是绝对定位就不用等1秒了),github里最新的stickUp.js有一点小问题,这里附件中的已经修复了
scrollspy.js插件有两种初始化方式,一种是直接在body中增加"data-spy='scroll'",是马上加载的,因为我们要延迟,所以用第二种js手动初始化"$('body').scrollspy();",需要注意的是被监测的ul要附加"nav"的css类,scrollspy.js的代码中是通过".nav li > a"的结构去查找的
我习惯自己给h标签里添加序号的,所以代码中没有增加自动编号的功能,需要的话请在代码中增加
2、cnblog-scroller.css
.scroller-offset1 {text-indent: 0 /* !important */;}
.scroller-offset2 {text-indent: 1.5em;}
.scroller-offset3 {text-indent: 3em;}
.scroller-offset4 {text-indent: 4.5em;}
.scroller-offset5 {text-indent: 6em;}
.scroller-offset6 {text-indent: 7.5em;}
.nav .active {background-color:#f5f5f5;}
如果皮肤有自己设定text-indent缩进的话,需要用自己!important来强制设定,具体距离根据皮肤调整一下
三、使用方法
1、申请开通博客园js权限
在博客园 -> 管理 -> 设置 -> 博客侧边栏公告(支持HTML代码)
右边有申请js权限的按钮,理由写希望使用js来自动生成文章的导航目录就可以了
2、在页首Html代码中增加
将附件中的的4个文件上传到自己的博客园里,在博客园 -> 管理 -> 文件 -> 选择文件 上传
在博客园 -> 管理 -> 设置 -> 页首Html代码 中增加以下内容(如果没有开通js权限,js文件会被过滤掉)
<link href="http://files.cnblogs.com/files/你的用户名/cnblog-scroller.css" type="text/css" rel="stylesheet">
<script src="http://files.cnblogs.com/files/你的用户名/scrollspy.js" type="text/javascript"></script>
<script src="http://files.cnblogs.com/files/你的用户名/stickUp.min.js" type="text/javascript"></script>
<script src="http://files.cnblogs.com/files/你的用户名/cnblog-scroller.js" type="text/javascript"></script>
(直接用我的用户名也可以~不用下载了)
3、效果
请看这里博客左侧的导航目录
四、附件下载
4个文件下载
最新的代码地址:https://github.com/ctxsdhy/cnblogs-example
转载于:https://www.cnblogs.com/ctxsdhy/p/5691589.html
博客园文章自动生成导航目录相关推荐
- html HTML1300 进行了导航,jquery根据文章H标签自动生成导航目录
jquery根据文章H标签自动生成导航目录2017-11-19 20:57 在一些旅游网站,比如说途牛.携程这些,当你看某条线路的详情页时,右边会有相应的第一天.第二天等的目录. 这么大的网站,不可能 ...
- 根据文章H标签自动生成导航目录
原文地址http://www.santii.com/article/154.html 在一些旅游网站,比如说途牛.携程这些,当你看某条线路的详情页时,右边会有相应的第一天.第二天等的目录. 这么大的网 ...
- 长篇文章根据文章H标签自动生成导航目录方法
在一些旅游网站,比如说途牛.携程这些,当你看某条线路的详情页时,右边会有相应的第一天.第二天等的目录. 这么大的网站,不可能后台添加行程的时候,每一天都要自动写一个目录吧! 所以应该是自动生成的. 那 ...
- 博客园文章方块背景格式
有小伙伴问到方格背景的问题,所以写一篇文章记录我的博客园文章背景是如何制作的. 一.辅助网站1. 一键排版2. 代码主题3. 复制二. 图床设置 一.辅助网站 辅助网址:Md2All 作者提供了一篇帮 ...
- 【开源】博客园文章编辑器4.0版发布
源起 最近个人时间多起来了: 于是打算持续写一点东西: 前面写了两篇关于riot.js的东西: 被博客园的领导移出首页了: 原因之一是排版不整齐: 确实是不整齐,这我认, 然而,我自己可是博客园文章编 ...
- 在线文本替换工具 、支持正则表达式(博客园文章里添加Javascript或<script>语句)
概况与介绍 在博客园发布一篇文章,文章就是<在线文本替换工具 .支持正则表达式>https://www.cnblogs.com/lsllll44/articles/15522697.htm ...
- 一个最简单的博客园文章密码暴力破解器-python3实现
一个最简单的博客园文章密码暴力破解器-python3实现 我之前想写路由器的密码暴力破解器,我手上只有极路由,发现极路由有安全限制,只能允许连续10密码错误,所以我改拿博客园练手. 博客园的博客有个功 ...
- python密码破解工具_一个最简单的博客园文章密码暴力破解器-python3实现
一个最简单的博客园文章密码暴力破解器-python3实现 我之前想写路由器的密码暴力破解器,我手上只有极路由,发现极路由有安全限制,只能允许连续10密码错误,所以我改拿博客园练手. 博客园的博客有个功 ...
- 网页附加题写出下图的html,附加题(写HTML文件):根据给定的博客名单,自动生成HTML网页...
收集了学生CSDN博客地址很久了,但一直没来得及整理成贺利坚老师的完美班级网页名册.今天突然想,一共有6个班学生,如果手动写的话,太费事了.我们程序员,就是让费事不费脑的工作自动化,即使是第一次花很多 ...
最新文章
- AI安防崛起迅速 开疆拓土少不了专利作“盔甲”
- 返回页面顶部最简单方法
- 3306 端口 要不要修改_zabbix 自动发现并监控所有端口
- asp.net采用OLEDB方式导入Excel数据时提示:未在本地计算机上注册Microsoft.Jet.OLEDB.4.0 提供程序...
- 含有负边的图的最短路径(Bellman_ford算法)
- 文巾解题 17. 电话号码的字母组合
- 给图片加一层半透明_设计半透明风格卡通星球图片的PS教程
- 5G PDCCH介绍
- window 2008+apache2.4.4+php5.5+mysql-5.6.12+phpmyadmin4.0.4.1安装过程(参考他人文章基础上加上自己遇到的问题)...
- Java必备——MySql 三大知识点
- i7处理器好吗_笔记本电脑处理器是i5好还是i7好?为什么?
- Tomcat结合nginx使用案例
- android studio 找不到reosurce,EF 6 Bridge Table Insert Not Working
- 伪标签(Pseudo-Labelling)介绍:一种半监督机器学习技术
- Paypal移动快速支付流程
- 手机无法获取电脑热点ip地址
- Set和Map数据结构。
- 转 - DataGuard中如何配置LOG_ARCHIVE_DEST_n参数
- 浪潮全球化的一面:从OEM到JDM,从ODCC到OCP
- DNS服务器可能不可用 win11解决方法