博客园 - 博客园主题装饰-JZTXT

自动生成可导航的目录 · 效果图

自动生成可导航的目录 · 脚本内容

鼠标点击彩色圆点特效 · 效果图

自动生成可导航的目录 · 效果图

添加了文章目录自动生成的脚本，以及通过JS自定义了导航栏。

标题1则为：1

标题2则为：1.1

标题号会自动生成，所以即使博文未以标题标注层次，该脚本也会自动生成层次分明的序号

图1 可导航的快捷目录效果图

图2 可导航的快捷目录效果图2

自动生成可导航的目录 · 脚本内容

脚本配置位置：【页首HTML代码】或【页脚HTML代码】

<script>

/*通过选项，去除控件失效，直接根据id移除*/

$(function(){

/*$("a").remove("#blog_nav_admin");  *//*删除管理栏目*/

/*$("div").remove("#sidebar_links1226849");  *//*删除侧边栏链接*/

/*$("div").remove("#sidebar_postarchive");  删除随笔档案*/




/*$("#navList").append('<li><a >首页</a></li>');*/

//添加导航，直接复制上面一行，修改链接和文字




//添加“清单”导航

$("#navList").append('<li><a>清单</a></li>');

});

</script>


<!--引入js库，用于实现文章自动生成目录索引begin-->
<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/miangao/maodian.css">
<!--<script src="https://files.cnblogs.com/files/miangao/maodian.js"></script>-->
<script src="https://files.cnblogs.com/files/z00377750/maodian.js"></script>
<script src="https://files.cnblogs.com/files/miangao/bootstrap.min.js"></script>


<!--引入js库，用于实现文章自动生成目录索引end-->

鼠标点击彩色圆点特效 · 效果图

脚本配置位置：【页首HTML代码】或【页脚HTML代码】

<!-- 鼠标点击特效 -->
<script src="https://blog-static.cnblogs.com/files/yjlblog/cursor-effects.js"></script>
<canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

配置说明：

https://cloud.tencent.com/developer/article/2005902

https://www.yuque.com/awescnb/user

预览效果：JanYork（小简） - 博客园 (cnblogs.com)