博客园 - 博客园主题装饰

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

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

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

 

 

 

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

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

标题1则为：1

标题2则为：1.1

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

 

 

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

 

脚本配置位置：【页首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)

 

 

鼠标点击特效

博客园添加鼠标点击特效 - HuZixia - 博客园

在页首HTML中添加以下代码

<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        // var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
        var a = new Array("功德+1","财运+1","速度+1", "体质+1","耐力+1","力量+1","知识+1","速度+1","颜值+1");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        // const colors = ['red', 'orange', 'green', 'blue', 'purple', 'pink', 'black'];
        
        
        // // 使用 crypto.getRandomValues 生成随机数
        // if (window.crypto && window.crypto.getRandomValues) {
        //     const array = new Uint32Array(1);
        //     window.crypto.getRandomValues(array);
        //     const randomIndex = array[0] % colors.length;
        // } else {
        //     const randomIndex = Math.floor(Math.random() * colors.length);
        // }

        $i.css({
            "z-index": 9999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(128*Math.random())+","+~~(128*Math.random())+","+~~(128*Math.random())+")"
            // "color": colors[randomIndex]
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },1500,function() {
            $i.remove();
        });
    });
});
</script>