博客样式的美化

虽然自己已经工作了两年多，平常的问题总结以及技术积累都统计在语雀文档内。 最近在博客园申请了一个博客地址，觉得博客本身自带的功能太过单一，于是乎，去网上论坛以及自己的一些想法去使自己的博客美化一些。废话不多说，撸起代码就是干，以下为博客增加的功能样式，有不足之处评论指点出来，共同讨论学习进步~~~以下为给博客添加的十几个小功能。

1.给鼠标点击样式添加爱心特效

 在管理设置，博客侧边栏公告（支持HTML代码） （支持 JS 代码），添加如下代码

<script type="text/javascript">
    (function (window, document, undefined) {
        var hearts = [];
        window.requestAnimationFrame = (function () {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback) {
                    setTimeout(callback, 1000 / 60);
                }
        })();
        init();
        function init() {
            css(
            ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
            attachEvent();
            gameloop();
        }

        function gameloop() {
            for (var i = 0; i < hearts.length; i++) {
                if (hearts[i].alpha <= 0) {
                    document.body.removeChild(hearts[i].el);
                    hearts.splice(i, 1);
                    continue;
                }
                hearts[i].y--;
                hearts[i].scale += 0.004;
                hearts[i].alpha -= 0.013;
                hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" +
                    hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale +
                    ") rotate(45deg);background:" + hearts[i].color;
            }
            requestAnimationFrame(gameloop);
        }

        function attachEvent() {
            var old = typeof window.onclick === "function" && window.onclick;
            window.onclick = function (event) {
                old && old();
                createHeart(event);
            }
        }

        function createHeart(event) {
            var d = document.createElement("div");
            d.className = "heart";
            hearts.push({
                el: d,
                x: event.clientX - 5,
                y: event.clientY - 5,
                scale: 1,
                alpha: 1,
                color: randomColor()
            });
            document.body.appendChild(d);
        }

        function css(css) {
            var style = document.createElement("style");
            style.type = "text/css";
            try {
                style.appendChild(document.createTextNode(css));
            } catch (ex) {
                style.styleSheet.cssText = css;
            }
            document.getElementsByTagName('head')[0].appendChild(style);
        }

        function randomColor() {
            return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() *
                255)) + ")";
        }
    })(window, document);
</script>

2.浏览器tab切换时标题进行更改

代码放在博客侧边栏公告（支持HTML代码） （支持 JS 代码）

<script>  
    // 浏览器标题切换改变标题
    var OriginTitile = document.title;    // 保存之前页面标题  
    var titleTime;  
    document.addEventListener('visibilitychange', function(){  
        if (document.hidden){  
            document.title ='你不要我了吗？QAQ';  
            clearTimeout(titleTime);  
        }else{  
            document.title = '~(o°ω°o) ';  
            titleTime = setTimeout(function() {  
                document.title = OriginTitile;  
            }, 1000); // 2秒后恢复原标题  
        }  
    });  
    </script>

3.给博客添加进度条progoss 显示

 代码放在  页首 HTML 代码

    

    <script>
        ;
        (function (w, d) {
            var domDiv = d.createElement('div');
            //修改domDiv的行内样式
            domDiv.style.cssText = 'position: fixed; top: 0; left: 0; width: 0; height: 7px;' +
                'box-shadow: 0 0 3px #999; background: -webkit-linear-gradient(left, red , blue );; z-index: 999999; -webkit-transition:width .3s linear;'
            //append是jquery的方法，dom对象的是appendchild();
            d.body.appendChild(domDiv);
            //domH:可视区域的高度
            var domH = w.innerHeight || d.documentElement.clientHeight || d.body.clientHeight;
            /**
             * [通过给window添加scroll事件实现了监控的作用。]
             * @param  {[type]} ){                var divsw         [description]
             * @param  {[type]} false      [冒泡阶段]
             * @return {[type]}            [description]
             * pageYOffset:滚到了视口顶部的高度。
             * document.body.offsetHeight:body的高度
             */
            w.addEventListener('scroll', function () {
                var divsw = domDiv.style.width = Math.round(pageYOffset / (d.body.offsetHeight - domH) *
                    100) + '%';
            }, false);
        })(window, document);
    </script>


<script type="text/javascript">
    var canShowAdsense = function () {
        return !!0
    };
</script>


<script src="https://cdn.bootcss.com/animejs/2.0.2/anime.min.js"></script>
<script src="https://cdn.bootcss.com/emojify.js/1.1.0/js/emojify.min.js"></script>
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?74ea64bad6ab0292a2fd9a69fac161cc";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

4.在右上角添加github图标

 代码放在  页首 HTML 代码

5.添加卡通人物

 方法一：：代码放在  页脚 HTML 代码

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
　　L2Dwidget.init({ "model": { jsonPath:
　　"https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
　　"scale": 1 }, "display": { "position": "left", "width": 150, "height": 300,
　　"hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 },
　　"react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 } });
</script>

　方法二：代码放在侧边栏

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>

6.鼠标点击添加烟花效果

在页首html代码中添加下面一行代码就OK了

<script src="https://blog-static.cnblogs.com/files/e-cat/cursor-effects.js"></script>

7.图片放大效果

　很多时候图片比较小，图片文字在博文中不是很清楚，这时候如果可以点击放大就很好了，推荐一个实现该功能的代码，放在【页脚Html代码】中，具体的代码如下

<script type="text/javascript" src="https://blog-static.cnblogs.com/files/jajian/img.enlarge.js"></script>

    

测试：

8.自动生成章节目录索引

一个好的博文除了博文的质量要好以外，好的组织结构也能让读者阅读的更加舒服与方便，我看园子里面有一些园友的博文都是分章节的，并且在博文的前面都带有章节的目录索引，点击索引之后会跳转到相应的章节阅读，并且还可以回到目录顶端。

使用方法：

登录到博客园之后，打开博客园的后台管理，切换到“设置”选项卡，将上面的代码，粘贴到 “页脚HTML代码” 区保存即可。

注意：上述js代码中提取的h2作为章节的标题，如果你的标题不是h2请在代码注释的地方自行修改。h3作为下一级的标题，该代码除了在文章的最开始生成目录索引之外，还会在每一个章节最后右下角(也就是下一个章节标题的右上角)会生成一个“回到顶部”的链接，以方便读者回到目录。

<script language="javascript" type="text/javascript">
// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
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 = '';
        content += '
';
        content += '
目录
';
        content += '
';
        for(var i=0; i
';
            $(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[j]).before(li3_anchor);
                li3_content += '
' + $(h3_list[j]).text() + '
';
            }
            
            var li2_content = '';
            if(li3_content.length > 0)
                li2_content = '
' + $(h2_list[i]).text() + '
' + li3_content + '
';
            else
                li2_content = '
' + $(h2_list[i]).text() + '
';
            content += li2_content;
        }
        content += '';
        content += '