自动生成可导航的目录 · 效果图
添加了文章目录自动生成的脚本,以及通过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)
标签:博客园,主题,目录,效果图,HTML,生成,导航,装饰 From: https://www.cnblogs.com/harleyblogs/p/17428849.html