Easter1.0博客园样式

简介

设置样式是Bluesky
不禁用默认css
申请js权限

页面css

/* 导航区域 */


/* 设置头导航的颜色以及其他信息 */

#header {
    background-color: transparent !important;
}

#navList li a {
    background-color: transparent !important;
    color: black !important;
    font-weight: 600 !important;
}

.blogStats {
    color: black !important;
}


/* 让博客园顶部导航消失 */

#top_nav {
    display: none !important;
}


/* 让博客园三个字消失 */

#blog_nav_sitehome {
    display: none !important;
}


/* 代码雨样式 */

#content_canvas {
    position: fixed;
    right: 0px;
    bottom: 0px;
    min- 100%;
    min-height: 100%;
    height: auto;
     auto;
    z-index: 0;
}


/* 页面区域 */


/* 页面内容的阴影 */

#main {
    box-shadow: 0 0 8px #999;
}


/* 侧边栏位置改变 */

#mainContent {
    float: right !important;
}


/* 消除power */

#poweredby {
    display: none !important;
}


/* 网站运行时间 */

#onworktime {
    position: absolute;
    z-index: 1;
    text-align: center;
     100%;
    padding-bottom: 2px;
}


/* 页脚区域 */


/* 页脚歌曲与版权的间距 */

#footer {
    padding-bottom: 0px !important;
}


/* 侧边栏样式 */


/* 改进文字样式 */

#sideBarMain h3 {
    font-size: 15px;
}

#profile_block a {
    font-size: 13px;
}


/* 日历样式 */

.CalTitle {
    font-size: 15px;
    font-weight: 600;
    line-height: 40px;
}

.CalDayHeader {
    font-size: 14px;
    line-height: 40px;
    border-bottom: 1px solid #f4f4f4;
}

.CalWeekendDay {
    font-size: 13px;
    line-height: 2.1;
}

.CalTodayDay {
    background-color: #39f;
    color: #fff;
    height: 35px;
    border-radius: 100%;
}

#blog-calendar u {
    color: #39f;
    font-weight: 600;
    text-decoration: none !important;
}


/* 最新随笔 */

.catListEssay ul {
    font-size: 14px !important;
}

.catListTag ul {
    font-size: 14px !important;
}

.catListBlogRank ul {
    font-size: 14px !important;
}

.catListPostCategory ul {
    font-size: 14px !important;
}

.catListPostArchive ul {
    font-size: 14px !important;
}

.catListView ul {
    font-size: 14px !important;
}


/************** 基本样式 开始 ***************/

@media screen and (min- 0px) {
    /* 去广告 */
    #ad_c1,
    #ad_c2,
    #bannerbar,
    #ad_t2,
    #under_post_news,
    .c_ad_block {
        display: none;
    }
}


/* 代码高亮样式 */

.cnblogs-markdown .hljs {
    display: block;
    overflow-x: auto;
    /* 替换背景和字体颜色 */
    background: #2b2b2b !important;
    color: #bababa !important;
    /* 代码块不换行 */
    white-space: pre;
    word-break: normal;
}

@font-face {
    font-family: consola;
    src: url("http://static.xxxxx.top/consola.ttf");
}

.cnblogs-markdown .hljs,
.cnblogs-post-body .hljs {
    font-family: consola !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    padding: 10px !important;
}


/*

Darcula color scheme from the JetBrains family of IDEs

*/

.hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    color: #abb2bf;
    background: #282c34;
}

.hljs-comment,
.hljs-quote {
    color: #5c6370;
    font-style: italic;
}

.hljs-doctag,
.hljs-keyword,
.hljs-formula {
    color: #c678dd;
}

.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
    color: #e06c75;
}

.hljs-literal {
    color: #56b6c2;
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
    color: #98c379;
}

.hljs-built_in,
.hljs-class .hljs-title {
    color: #e6c07b;
}

.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
    color: #d19a66;
}

.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
    color: #61aeee;
}

.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: bold;
}

.hljs-link {
    text-decoration: underline;
}


/* github */

.github-corner :hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
}

@media (max- 991px) {
    .github-corner>svg {
        fill: #fff !important;
        color: #222 !important;
    }
    .github-corner .github-corner:hover .octo-arm {
        animation: none;
    }
    .github-corner .github-corner .octo-arm {
        animation: octocat-wave 560ms ease-in-out;
    }
}

@-moz-keyframes octocat-wave {
    0%,
    100% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
    }
    20%,
    60% {
        -webkit-transform: rotate(-25deg);
        -moz-transform: rotate(-25deg);
        -ms-transform: rotate(-25deg);
        -o-transform: rotate(-25deg);
        transform: rotate(-25deg);
    }
    40%,
    80% {
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        transform: rotate(10deg);
    }
}

@-webkit-keyframes octocat-wave {
    0%,
    100% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
    }
    20%,
    60% {
        -webkit-transform: rotate(-25deg);
        -moz-transform: rotate(-25deg);
        -ms-transform: rotate(-25deg);
        -o-transform: rotate(-25deg);
        transform: rotate(-25deg);
    }
    40%,
    80% {
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        transform: rotate(10deg);
    }
}

@-o-keyframes octocat-wave {
    0%,
    100% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
    }
    20%,
    60% {
        -webkit-transform: rotate(-25deg);
        -moz-transform: rotate(-25deg);
        -ms-transform: rotate(-25deg);
        -o-transform: rotate(-25deg);
        transform: rotate(-25deg);
    }
    40%,
    80% {
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        transform: rotate(10deg);
    }
}

@keyframes octocat-wave {
    0%,
    100% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);
    }
    20%,
    60% {
        -webkit-transform: rotate(-25deg);
        -moz-transform: rotate(-25deg);
        -ms-transform: rotate(-25deg);
        -o-transform: rotate(-25deg);
        transform: rotate(-25deg);
    }
    40%,
    80% {
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        transform: rotate(10deg);
    }
}


/* 隐藏反对按钮 */

.buryit {
    display: none;
}

.comment_bury {
    display: none;
}


/* 博客详情 */

#cb_post_title_url {
    font-size: 35px !important;
}

.forFlow img {
    margin-top: 0px !important;
}

#sidebar_scroller {
    position: fixed !important;
    top: 95px;
    font-size: 13px;
    background-color: white;
    padding: 20px;
}

.side-choose {
    position: fixed !important;
    font-size: 15px;
    font-weight: 600;
    background-color: white;
     135px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
}


/* 设置消除main样式 */

.removemainstyle {
    box-shadow: none !important;
    background-color: transparent !important;
}


/* 加大阅读内容宽度 */

.addmaincontentwidth {
     1000px !important;
}


/* 设置目录宽度 */

.sidebar_scrollerwidth {
     135px !important;
}

.sideBarwidth {
     0px !important;
}

.scroller-offset2 {
    margin-left: 2em;
}

.scroller-offset3 {
    margin-left: 4em;
}

.scroller-offset4 {
    margin-left: 6em;
}

#cnblogs_post_body h4 {
    padding: 0px !important;
    background-color: transparent !important;
    color: black !important;
}


/* 设置手机端样式 */

@media (max- 767px) {
    /* >=768的设备 */
    .blogStats {
        display: none !important;
    }
    #navList {
        position: absolute;
        left: 25%;
    }
    .github-corner>svg {
         50px !important;
        height: 50px !important;
    }
    #sidebar_scorerank {
        display: none !important;
    }
    #blogCalendar {
        display: none !important;
    }
    #sidebar_postcategory {
        display: none !important;
    }
    #sidebar_categories {
        display: none !important;
    }
    #onworktime {
        font-size: 10px;
    }
    #sidebar_scroller {
        display: none !important;
    }
    .addmaincontentwidth {
         100% !important;
    }
    #div_digg {
        display: none !important;
    }
    #author_profile_follow {
        display: none !important;
    }
    #comment_form_container {
        display: none !important;
    }
}

侧边栏代码

<!-- 设置头像 -->
<div align="center" style="postion">
    <a href="https://www.cnblogs.com/zhurong/">
        <img style=" 80px;height: 80px;border-radius: 50%;" src="//pic.cnblogs.com/avatar/1986238/20200519154451.png">
    </a>
    <p style="text-align: center;">个性签名：脚踏实地，仰望星空</p>
    <img src="https://images.cnblogs.com/cnblogs_com/zhibu/998049/o_fgx.jpg" style="padding-top:13px;100%">
</div>
<!--引入highlight.js-->
<script src="https://blog-static.cnblogs.com/files/dongxuelove/highlight.pack.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>
<!-- 爱心特效 -->
<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{ 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ''; 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>
<script type="text/javascript">
    /* 鼠标特效 */
    var a_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            var a = new Array("爱你是终身浪漫的开始", "脚踏实地，仰望星空");
            var $i = $("<span></span>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                "top": y - 20,
                "left": x + 14,
                "position": "absolute",
                "font-weight": "bold",
                "color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) +
                    "," + ~~(255 * Math.random()) + ")"
            });
            $("body").append($i);
            $i.animate({
                    "top": y - 75,
                    "opacity": 0
                },
                1250,
                function() {
                    $i.remove();
                });
        });
    });
</script>
<!-- 设置固定工具集 -->

页首

<script type="text/javascript" src="https://blog-static.cnblogs.com/files/dongxuelove/tongji.js"></script>
<a href="https://github.com/easternblood" class="github-corner">
    <svg width="60" height="60" viewBox="0 0 250 250" style="fill:#151513; color:#fff; z-index: 999999; position: fixed; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true">
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path
            d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
            fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
        <path
            d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
            fill="currentColor" class="octo-body"></path>
    </svg>
</a>
<!-- 引入js -->
<canvas id="content_canvas" width="1440" height="900"></canvas>
<!-- 回到顶部 -->
<style>
    #back-top {
        position: fixed;
        bottom: 2rem;
        right: 1rem;
        z-index: 10;
    }
    
    #back-top span {
         50px;
        height: 64px;
        display: block;
        background: url(https://images.cnblogs.com/cnblogs_com/dongxuelove/1691239/o_210128073636o_rocket.png) no-repeat center center;
    }
    
    #back-top a {
        outline: none
    }
</style>
<script type="text/javascript">
    $(function() {
        // 默认是隐藏“回到顶部”按钮
        $("#back-top").hide();
        // 滚动距离顶部 500 像素时 淡入、淡出
        console.log(navigator.userAgent);
        var os = function() {
            var ua = navigator.userAgent,
                isWindowsPhone = /(?:Windows Phone)/.test(ua),
                isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
                isAndroid = /(?:Android)/.test(ua),
                isFireFox = /(?:Firefox)/.test(ua),
                isChrome = /(?:Chrome|CriOS)/.test(ua),
                isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) ||
                (
                    isFireFox && /(?:Tablet)/.test(ua)),
                isPhone = /(?:iPhone)/.test(ua) && !isTablet,
                isPc = !isPhone && !isAndroid && !isSymbian;
            return {
                isTablet: isTablet,
                isPhone: isPhone,
                isAndroid: isAndroid,
                isPc: isPc
            };
        }();

        if (os.isAndroid || os.isPhone) {
            console.log("手机")
            $("#back-top").attr('style', 'display:none;')
        } else if (os.isTablet) {
            console.log("平板")
        } else if (os.isPc) {
            console.log("电脑")
            $(window).scroll(function() {
                if ($(this).scrollTop() > 500) {
                    $('#back-top').fadeIn();
                } else {
                    $('#back-top').fadeOut();
                }
            });
            // 回到顶部，点击事件
            $('#back-top a').click(function() {
                $('body,html').animate({
                    scrollTop: 0
                }, 800);
                return false;
            });
        }
    });
</script>
<p id="back-top" style="display:none" title="回到页面顶部"><a href="#top"><span></span></a></p>

页脚

<!-- 音乐菜单 -->
<!-- <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.css">
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="732601508" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div>
<script src="https://blog-static.cnblogs.com/files/dongxuelove/APlayer.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/dongxuelove/Meting.min.js"></script> -->
<!-- 补充高度 -->

<script>
    setTimeout(function() {
        //5秒后实现的方法写在这个方法里面
        // console.log("运行代码雨中1");
        //获取画布对象
        var canvas = document.getElementById("content_canvas");
        //获取画布的上下文
        var context = canvas.getContext("2d");
        var s = window.screen;
        var W = canvas.width = s.width;
        var H = canvas.height;
        //获取浏览器屏幕的宽度和高度
        //var W = window.innerWidth;
        //var H = window.innerHeight;
        //设置canvas的宽度和高度
        canvas.width = W;
        canvas.height = H;
        //每个文字的字体大小
        var fontSize = 12;
        //计算列
        var colunms = Math.floor(W / fontSize);
        //记录每列文字的y轴坐标
        var drops = [];
        //给每一个文字初始化一个起始点的位置
        for (var i = 0; i < colunms; i++) {
            drops.push(0);
        }
        //运动的文字
        var str = "orange";
        //4:fillText(str,x,y);原理就是去更改y的坐标位置
        //绘画的函数
        function draw() {
            // console.log("运行代码雨中2")
            context.fillStyle = "rgba(238,238,238,.08)"; //遮盖层
            context.fillRect(0, 0, W, H);
            //给字体设置样式
            context.font = "600 " + fontSize + "px  Georgia";
            //给字体添加颜色
            context.fillStyle = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33",
                "#FF8800", "#FF4444", "#CC0000"
            ][parseInt(Math.random() * 10)]; //randColor();可以rgb,hsl, 标准色，十六进制颜色
            //写入画布中
            for (var i = 0; i < colunms; i++) {
                var index = Math.floor(Math.random() * str.length);
                var x = i * fontSize;
                var y = drops[i] * fontSize;
                context.fillText(str[index], x, y);
                //如果要改变时间，肯定就是改变每次他的起点
                if (y >= canvas.height && Math.random() > 0.99) {
                    drops[i] = 0;
                }
                drops[i]++;
            }
        };

        function randColor() { //随机颜色
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        }
        draw();
        setInterval(draw, 35);
    }, 200); //延迟5000毫秒
</script>
<!--看板娘 - 猫-->
<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-hijiki/assets/hijiki.model.json",
            "scale": 0.7
        },
        "display": {
            "position": "left",
            "width": 100,
            "height": 200,
            "hOffset": 10,
            "vOffset": 0
        },
        "mobile": {
            "show": false,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 1,
            "opacityOnHover": 0.2
        }
    });
    window.onload = function() {
        $("#live2dcanvas").attr("style",
            "position: fixed; opacity: 1; left:10px; bottom: -100px; z-index: 1; pointer-events: none;")
    }
</script>
<!-- 网站运行时间 -->
<div id="onworktime">
    <p style="text-align:center;"><span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span></p>
</div>
<script>
    var now = new Date();

    function createtime() {
        var grt = new Date("04/25/2020 00:00:00"); //在此处修改你的建站时间
        now.setTime(now.getTime() + 250);
        days = (now - grt) / 1000 / 60 / 60 / 24;
        dnum = Math.floor(days);
        hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
        hnum = Math.floor(hours);
        if (String(hnum).length == 1) {
            hnum = "0" + hnum;
        }
        minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes);
        if (String(mnum).length == 1) {
            mnum = "0" + mnum;
        }
        seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds);
        if (String(snum).length == 1) {
            snum = "0" + snum;
        }
        document.getElementById("timeDate").innerHTML = "本站勉强运行 " + dnum + " 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
    setInterval("createtime()", 250);
</script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    $(function() {
        // 其他初始化
        if ($("#topics").length > 0) {
            setSideContent(); // 侧边目录
            contentActiveListen(); // 侧边目录滚动激活
        } else {
            console.log("初始化失败");
        }
        myscroll(); // 平滑滚动控制
    });
    /* 平滑滚动控制 */
    myscroll = function() {
        $("a[href*=\#],area[href*=\#]").click(function() {
            if (
                location.pathname.replace(/^//, "") ==
                this.pathname.replace(/^//, "") &&
                location.hostname == this.hostname
            ) {
                var $target = $(this.hash);
                $target =
                    ($target.length && $target) || $("[name=" + this.hash.slice(1) + "]");
                if ($target.length) {
                    var targetOffset = $target.offset().top;
                    $("html,body").animate({
                            scrollTop: targetOffset - 70,
                        },
                        500
                    );
                    return false;
                }
            }
        });
    };




    // 侧边悬浮按钮
    /* 侧边显示 */
    showSide = function() {
        $("#sideBarMain").fadeIn();
        $("#myside").addClass("active");
        $("#mycontent").removeClass("active");
        $("#sidebar_scroller").fadeOut();
        $("#main").removeClass("removemainstyle")
        $("#mainContent").removeClass("addmaincontentwidth")
        $("#sidebar_scroller").removeClass('sidebar_scrollerwidth')
        $("#sideBar").removeClass('sideBarwidth')
    };
    /* 目录显示 */
    showContent = function() {
        $("#sideBarMain").fadeOut();
        $("#myside").removeClass("active");
        $("#mycontent").addClass("active");
        $("#sidebar_scroller").fadeIn();
        $("#main").addClass("removemainstyle")
        $("#mainContent").addClass("addmaincontentwidth")
        $("#sidebar_scroller").addClass('sidebar_scrollerwidth')
        $("#sideBar").addClass('sideBarwidth')
    };

    // 侧边目录
    /* 侧边目录滚动激活 */
    contentActiveListen = function() {
        //开启滚动监听, 监听所有在.nav类下的li
        // $("body").scrollspy({
        //     offset: 80, // 偏置80，防止遮挡
        // });
        $(window).scroll(function() {
            var now = $("#sidebar_scroller").find(".active");
            var prevNum = now.prevAll().length + 1;
            var basicHeight = now.outerHeight();
            $("#sideBar").scrollTop(prevNum * basicHeight - 60);
        });
    };
    /* 侧边目录 */
    setSideContent = function() {
        var $ph = $("#cnblogs_post_body :header:eq(0)");
        if ($ph.length > 0) {
            //设置层级为1
            $ph.attr("offset", "1");
            //添加导航目录的内容
            $("#sideBar").prepend(
                '<div id="sidebar_scroller" class="sidebar-block"><ul class="nav"></ul></div>'
            );
            $("#sideBar").prepend(
                '<div class="side-choose"><a id="myside" href="javascript:showSide()"></a><a id="mycontent" href="javascript:showContent()">大纲</a></div>'
            );
            $("#sideBarMain").hide();
            showContent();
            // 判断当大纲存在时我们才使用以下代码
            var mycontentobj = document.getElementById("mycontent");
            if (mycontentobj == null) {
                $("#main").removeClass("removemainstyle")
                $("#mainContent").removeClass("addmaincontentwidth")
                $("#sidebar_scroller").removeClass('sidebar_scrollerwidth')
                $("#sideBar").removeClass('sideBarwidth')
            } else {
                $("#main").addClass("removemainstyle")
                $("#mainContent").addClass("addmaincontentwidth")
                $("#sidebar_scroller").addClass('sidebar_scrollerwidth')
                $("#sideBar").addClass('sideBarwidth')
                console.log(navigator.userAgent);
                var os = function() {
                    var ua = navigator.userAgent,
                        isWindowsPhone = /(?:Windows Phone)/.test(ua),
                        isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
                        isAndroid = /(?:Android)/.test(ua),
                        isFireFox = /(?:Firefox)/.test(ua),
                        isChrome = /(?:Chrome|CriOS)/.test(ua),
                        isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) ||
                        (
                            isFireFox && /(?:Tablet)/.test(ua)),
                        isPhone = /(?:iPhone)/.test(ua) && !isTablet,
                        isPc = !isPhone && !isAndroid && !isSymbian;
                    return {
                        isTablet: isTablet,
                        isPhone: isPhone,
                        isAndroid: isAndroid,
                        isPc: isPc
                    };
                }();

                if (os.isAndroid || os.isPhone) {
                    console.log("手机")
                    $("#sideBar").attr('style', 'display:none;')
                } else if (os.isTablet) {
                    console.log("平板")
                } else if (os.isPc) {
                    console.log("电脑")
                }
            }
            //遍历文章里每个h标签
            $("#cnblogs_post_body :header").each(function(i) {
                var $h = $(this);
                //设置h标签的id, 编号从0开始
                $h.attr("id", "scroller-" + i);
                //比上一个h标签层级小, 级数加1
                if ($h[0].tagName > $ph[0].tagName) {
                    $h.attr("offset", parseInt($ph.attr("offset")) + 1);
                } //比上一个h标签层级大, 级数减1
                else 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);
                    if (offset < 1) {
                        offset = 1;
                    }
                    $h.attr("offset", 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;
            });
            contentActiveListen(); // 侧边目录滚动激活
        }
    };
</script>