博客园页面美化

博客园博客页面美化

来源:https://github.com/Summertime-Wu/make_cnblogs_better

CSS代码

/** 原有样式修改 */
    #sideBar{
        display: none;
    }
    #mainContent{
         100%;
        box-shadow: 0 0 0;
        border-radius: 0px;
        opacity: 0;
        transition:0.5s;
        margin-top:40px;
    }
    #main{
         40%;
        background-color: white;
        /*max- 700px;*/
    }
    @media screen and (max- 1000px) {
     #main { 100%;}
    }
    body{
        background-image: none;
        background-color: white;
        font-family: Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace !important;
        line-height: 1.8;
    }
    #cnblogs_post_body{
        font-size: 16px;
    }
    #green_channel{
        display: none;
    }
    #post_next_prev{
        display: none;
    }
    .forFlow img{
        margin-top: 0;
    }

    /** 去除广告 */
    #cb_post_title_url{
        display: none;
    }
    #cnblogs_c1{
        display: none;
    }
    #cnblogs_c2{
        display: none;
    }
    #ad_t2{
        display: none;
    }
    #kb_block{
        display:none
    }
    #under_post_news{
        display:none
    }
    #header{
        display:none
    }
    #BlogPostCategory{
        display: none;
    }
    #comment_nav{
        display: none;
    }
    .postDesc{
        border-bottom:none;
    }
    #author_profile_follow{
        display: none;
    }

    /** 自定义样式 */
    /* 加载条 */
    #myProgressBar{
         15%;
        height: 2px;
        background-color: #eb5055;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
    }
    #nprogress {
      pointer-events: none;
    }

    #nprogress .bar {
      background: #eb5055;

      position: fixed;
      z-index: 1031;
      top: 0;
      left: 0;

       100%;
      height: 2px;
    }
    #nprogress .peg {
      display: block;
      position: absolute;
      right: 0px;
       100px;
      height: 100%;
      box-shadow: 0 0 10px #eb5055, 0 0 5px #eb5055;
      opacity: 1.0;

      -webkit-transform: rotate(3deg) translate(0px, -4px);
          -ms-transform: rotate(3deg) translate(0px, -4px);
              transform: rotate(3deg) translate(0px, -4px);
    }
    #nprogress .spinner {
      display: block;
      position: fixed;
      z-index: 1031;
      top: 15px;
      right: 15px;
    }

    #nprogress .spinner-icon {
       18px;
      height: 18px;
      box-sizing: border-box;

      border: solid 2px transparent;
      border-top-color: #eb5055;
      border-left-color: #eb5055;
      border-radius: 50%;

      -webkit-animation: nprogress-spinner 400ms linear infinite;
              animation: nprogress-spinner 400ms linear infinite;
    }
    .nprogress-custom-parent {
      overflow: hidden;
      position: relative;
    }
    .nprogress-custom-parent #nprogress .spinner,
    .nprogress-custom-parent #nprogress .bar {
      position: absolute;
    }

    @-webkit-keyframes nprogress-spinner {
      0%   { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }
    @keyframes nprogress-spinner {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }


    /** 导航栏 */
    #mynavbar{
         100%;
        height: 70px;
        position: fixed;
        display: block;
        top: 0px;
        z-index: 100;
        background-color: white;
        transition:0.5s ease-in-out;
        box-shadow: 0 1px 5px rgba(0,0,0,.1);
    }
    #mynavbar_menu{
        display: inline-block;
         auto;
        position: relative;
        float: right;
        text-align: right;
        line-height: 68px;
    }
    #mynavbar_menu a{
        padding: 0 15px;
        font-size: 14px;
        outline: 0;
        color: #313131;
        text-decoration: none;
    }
    #mynavbar_menu a:hover{
        color: #eb5055 !important;
    }

    /** 头部 */
    #myheader{
        background-color: #2175bc!important;
        margin-top:70px;
        position: relative;
         100%;
        height: 300px;
    }
    #myheader_bg{
        100%;
        height:300px;
        background-position: center;
        background-size: cover;
        -webkit-filter: blur(3px);
        -moz-filter: blur(3px);
        filter: blur(3px);
        position: absolute;
    }
    #myheader_cover{
        position: relative;
        margin-top: 70px;
         100%;
        height: 300px;
        background-color: rgba(0,0,0,.5);
        box-shadow: 0 1px 5px rgba(0,0,0,.3);
    }
    #mypost_title{
        position: relative;
        top: 105pt;
        margin: 0 auto;
        padding: 30px 25px 20px;
        max- 700px;
        color: white;
        transition:0.5s;
        opacity: 0;
    }
    #mypost_title_e{
        margin: 0;
        padding: 5px 0 15px;
    }
    #mypost_title_e a{
        border: 1px solid #6fa3ef;
        border-radius: 15px;
        background: #6fa3ef;
        color: #fff;display: inline-block;
        margin: 4px 8px 0 0;
        padding: 0 15px;
        letter-spacing: 0;
        font-weight: 600;
        font-size: 13px;outline: 0;text-decoration: none;
        transition: 0.5s;
    }
    #mypost_title_e a:before{
        content: "# "
    }
    #mypost_title_e a:hover{
        background-color: white;
        border: 1px solid white;
        color:black;
    }
    #mypost_title_f a{
        color: white;
    }
    #mypost_title_f a:hover{
        text-decoration:none;
    }

    /** 右侧导航 */
    #right_meun{
        position: fixed;
        z-index: 999;
        top: 100px;
        left: 69%;
        display: none;
        text-align: left;
        border-left: 1px solid #ddd;
        font-size: 12px;
    }
    #right_meun li{
        list-style: none!important;
    }
    #right_meun a{
        display: inline-table;
        margin-left: 5px;
        white-space: nowrap;
        text-decoration: none;
        color: #313131;
        outline: 0;
    }
    #right_meun a:hover{
        color: #eb5055;
    }
    #right_meun>li::before {
        position: relative;
        top: 0;
        left: -4px;
        display: inline-block;
         7px;
        height: 7px;
        content: '';
        border-radius: 50%;
        background-color: #eb5055;
    }
    /* 底部导航 */
    #post-bottom-bar{
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        height: 3pc;
        border-top: 1px solid #e0e0e0;
        background-color: #fff;
        margin: 0;
        padding: 0;
        transition: 0.5s ease-in-out;
    }
    #post-bottom-bar a{
        text-decoration: none!important;
    }
    .post-bottom-bar .bottom-bar-inner{
        margin: 0 auto;
        padding: 0 10px;
        max- 900px;
    }
    .bottom-bar-items{
        margin: 0 0 0 10px;
        color: #313131;
        font-size: 14px !important;
        line-height: 3pc;float: left;
    }
    .post-bottom-bar{
        margin: 0 0 0 10px;
        color: #313131;
        font-size: 14px;
        line-height: 3pc;
    }
    .post-bottom-bar .social-share .bottom-bar-item {
        padding: 4px;
    }
    .post-bottom-bar .bottom-bar-item.bottom-bar-facebook a {
        background-color: #4267b2;
        color: #fff;
    }
    .post-bottom-bar .social-share .bottom-bar-item a {
        padding: 2px 10px;
        border-radius: 15px;
    }
    .post-bottom-bar .bottom-bar-item a {
        margin: 0;
        padding: 9pt;
        border: 0;
        background: 0 0;
        color: #313131;
        font-size: 14px;
        line-height: 3pc;
        cursor: pointer;
    }
    .post-bottom-bar .bottom-bar-item.bottom-bar-twitter a {
        background-color: #1b95e0;
        color: #fff;
    }
    .post-bottom-bar .bottom-bar-item.bottom-bar-qrcode a {
        background-color: #5f5f5f;
        color: #fff;
    }
    .bottom-bar-item a:hover{
        color: #eb5055;
    }


    /** MarkDown样式调整 */
    .cnblogs-markdown .hljs{
        font-size: 16px!important;
        line-height: 2!important;
        padding: 15px!important;
    }
    .cnblogs-markdown code{
        background:rgb(238,240,244) none !important;
        border:0px !important;
        color: rgb(73,59,92) !important;
        font-size: 16px!important;
    }
    .cnblogs-markdown h2{
        font-weight: 500;
        margin: 20px 0;
    }
    .cnblogs-markdown h2:before{
        content: "#";
        color: #eb5055;
        position: relative;
        top: 0;
        left: -12px;
    }
    #cnblogs_post_body h2{
        font-weight: 500;
        margin: 20px 0;
    }
    #cnblogs_post_body h3{
        font-size: 16px;
        font-weight: bold;
        line-height: 1.5;
        margin: 10px 0;
    }
    .cnblogs-markdown h3:before{
        content: "##";
        color: #2175bc;
        position: relative;
        top: 0;
        left: -8px;
    }
    .postBody blockquote, .postCon blockquote{
        background-image: none;
        border-left: 5px solid #DDDFE4;
        background-color: #EEF0F4;
         100%;
        padding: 6px 0 6px 25px;
    }
    blockquote{
        border:0;
    }
    /* code加上行数 */
    .cnblogs-markdown .syntaxhighlighter table td.code {
      95% !important; 
    }

    .cnblogs-markdown .syntaxhighlighter code {
      font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace!important;
      padding: 0 !important;
      border-radius: 0 !important;
      background-color: transparent !important;
    }

    .cnblogs-markdown .syntaxhighlighter code:before,
    .cnblogs-markdown .syntaxhighlighter code:before {
      letter-spacing: -0.5em;
    }


    /** 更改浏览器滚动条和选中字体背景颜色 */
    ::selection {
        background-color: #eb5055;
        color: #fff;
    }
    ::-webkit-scrollbar {
         6px;
        height: 6px;
    }
    ::-webkit-scrollbar-thumb {
        min-height: 28px;
        background-color: #c2c2c2;
        background-clip: padding-box;
    }
    ::-webkit-scrollbar-track-piece {
        background-color: #fff;
    }
    *, :after, :before {
        box-sizing: border-box;
    }

页首代码

<!-- ............自定义首部代码开始............ -->
<!-- 自定义进度条 -->
<div id="myProgressBar"></div>
<!-- 自定义导航条 -->
<div id="mynavbar">
    <div style="position:relative;65pc;height:70px;margin:0 auto;">
        <a style=" auto;height: 70px;margin-left: 25px;" href="https://www.cnblogs.com/JustNo/">
            <img style=" auto;height: 70px;outline: 0;margin-top: 0px;" src="https://i.loli.net/2019/10/07/FPrqAnC75ezXN38.png">
        </a>
        <div id="mynavbar_menu">
            <a href="https://www.cnblogs.com/JustNo/">首页</a>
            <a href="https://msg.cnblogs.com/send/JustNo">联系</a>
            <a href="https://github.com/SheepHuan">Github</a>
            <a href="https://www.cnblogs.com/summertime-wu/p/9350833.html">友情链接</a>
            <a href="https://www.cnblogs.com/">博客园</a>
            <a href="https://www.cnblogs.com/summertime-wu/p/9350808.html">关于</a>
        </div>
    </div>
</div>

<!-- 自定义头部锚点 -->
<a name="mtop"></a>

<!-- 自定义头部 -->
<div id="myheader">
    <!-- 背景图片 -->
    <div id="myheader_bg"></div>
    <!-- 遮罩层 -->
    <div id="myheader_cover" title="点我点我">
        <!-- 博客标题 -->
        <div id="mypost_title">
            <div id="mypost_title_h" style="font-weight: 500;font-size: 21px;">不知所云</div>
            <div id="mypost_title_f">Published on 2017-09-02 11:31 in 暂未分类 with  不知所云</div>
            <div id="mypost_title_e">
                <a href="https://www.cnblogs.com/JustNo" style="">暂未分类</a>
            </div> 
            </div> 
        </div>  
    </div>
</div>
<!-- ............自定义首部代码结束............ -->

页尾代码

<!-- ............自定义尾部代码开始............ -->
<div id="post-bottom-bar" class="post-bottom-bar">
    <div class="bottom-bar-inner">
        <!-- 左边 -->
        <div class="bottom-bar-items social-share" style="float: left;">
            <span class="bottom-bar-item bottom-bar-facebook">
                <a id="bottom-d" href="javascript:void(0)" target="_blank">好文要赞</a>
            </span>
            <span class="bottom-bar-item bottom-bar-twitter">
                <a id="bottom-g" href="javascript:void(0)"" target="_blank">关注我</a>
            </span>
            <span class="bottom-bar-item bottom-bar-qrcode">
                <a id="bottom-s" href="javascript:void(0)" target="_blank">收藏该文</a>
            </span>
        </div>
        <!-- 右边 -->
        <div class="bottom-bar-items right" style="float: right;">
            <span class="bottom-bar-item"><a id="mbottom-left" href="javascript:void(0);">←</a></span>
            <span class="bottom-bar-item"><a id="mbottom-right" href="javascript:void(0);">→</a></span>
            <span class="bottom-bar-item"><a href="#mfooter">↓</a></span>
            <span class="bottom-bar-item"><a href="#mtop">↑</a></span>
        </div>
    </div> 
</div>
<a name="mfooter"></a>
<!-- ............自定义尾部代码结束............ -->


<script type="text/javascript" src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script type="text/javascript">
    /**
        用来设置初始时需要执行的js
    */
    $(document).ready(function(){

        //加载顶部进度条
        NProgress.start();
        NProgress.done();
        $("#myProgressBar").hide();

        //设置背景图片地址
        if ($("#head_bg_img").val()!=null && $("#head_bg_img").val()!="") {
            $("#myheader_bg").css("background-image","url("+$("#head_bg_img").val()+")");
        }else{
            $("#myheader_bg").css("background-image","url(https://ww1.sinaimg.cn/large/0062YmUwgy1fthnpo4n7yj31hc0hrq8e.jpg)");
     	$("#myheader_bg").css("filter","blur(0px)");
        }

        //标题
        $("#mypost_title_h").html($("#cb_post_title_url").html());

        //正文和标题淡入
        $("#mainContent").css("opacity","1");
        $("#mainContent").css("margin-top","0");
        $("#mypost_title").css("opacity","1");
        $("#mypost_title").css("top","75pt");

        //更改iocn图标
        var linkObject = document.createElement("link");
        linkObject.rel = "shortcut icon";
        linkObject.href = "https://ww1.sinaimg.cn/large/0062YmUwgy1fthbsa7nmoj302g02ggle.jpg";
        document.getElementsByTagName("head")[0].appendChild(linkObject);
    })

    /**
        设置ajax请求加载完所有数据时执行的js
    */
    setTimeout(afterAjax,1000);
    function afterAjax(){
        //假如是首页
        if (window.location.href == "https://www.cnblogs.com/JustNo"|| 
            window.location.href == "https://www.cnblogs.com/JustNo/"||
            window.location.href == "https://www.cnblogs.com/JustNo"|| 
            window.location.href == "https://www.cnblogs.com/JustNo/") {
            $("#mypost_title_f").html("");
            $("#mypost_title_e").html("<a href='https://www.cnblogs.com/JustNo'>业精于勤荒于嬉，行成于思毁于随</a>");
        }else{
            var classification = null;
            if ($("#BlogPostCategory").html()!=null && $("#BlogPostCategory").html()!= "") {
                classification = $("#BlogPostCategory").html();
                classification = classification.substring(3,classification.length);
            }else{
                classification = "<a href='https://www.cnblogs.com/JustNo'>暂未分类</a>";
            }
            var ftitle = "Published on "+ $("#post-date").html() + " in " +  classification
            + " with <a href='https://www.cnblogs.com/JustNo'>不知所云</a>";
            //设置副标题标题
            $("#mypost_title_f").html(ftitle);
            //设置标题分类按钮
            $("#mypost_title_e").html(classification);
            //设置底部导航条上一篇下一篇文章
            var pnp = $("#post_next_prev a");
            $("#mbottom-left").attr("href",pnp[1].href);
            if (pnp.length>2) {
                $("#mbottom-right").attr("href",pnp[3].href);
            }
        }
        $("#myheader_bg").css("filter","blur(0px)");
    }


    /** 
        自定义的js方法
    */
    //设置底部导航条点击事件
    $("#bottom-g").click(function(){
        follow('5dfde587-1816-e711-845c-ac853d9f53ac');
    })
    $("#bottom-s").click(function(){
        AddToWz(cb_entryId);return false;
    })
    if (window.location.href == "https://www.cnblogs.com/JustNo"|| 
            window.location.href == "https://www.cnblogs.com/JustNo/"||
            window.location.href == "https://www.cnblogs.com/JustNo"|| 
            window.location.href == "https://www.cnblogs.com/JustNo/") {
        $("#bottom-d").html("友情链接");
        $("#bottom-d").attr("href","https://www.cnblogs.com/summertime-wu/p/9350833.html");
    }else{
        var url = window.location.href;
        var lastUrl = url.substring(url.lastIndexOf("/")+1);
        var mpageId = lastUrl.substring(0,lastUrl.indexOf("."));
        $("#bottom-d").click(function(){
            DiggIt(mpageId,cb_blogId,1);
            green_channel_success(this,'谢谢推荐！');
        })
    }


    //通过滚动条控制导航条的展现隐藏
    var oldScrollNum = 0;
    window.onscroll = function(){
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        //下滑
        if (t>oldScrollNum) {
            if (t>120) {
                $("#mynavbar").css("margin-top","-70px");//顶部导航
                $("#post-bottom-bar").css("bottom","-3pc");//底部导航
            }
            if (t>300) {
                $("#right_meun").css("display","inline-block");//右侧导航
            }
        //上拉
        }else{
            //防止用a链接跳转也触发效果
            if (oldScrollNum-t<20) {
                $("#mynavbar").css("margin-top","0px");//顶部导航
                $("#post-bottom-bar").css("bottom","0");//底部导航
            }
            if (t<=300) {
                $("#right_meun").css("display","none");//右侧导航
            }
        }
        oldScrollNum = t;
    }

    //背景大图点击模糊||清晰
    $("#myheader_cover").click(function(){
        if ($("#myheader_bg").css("filter") == "blur(3px)") {
            $("#myheader_bg").css("filter","blur(0px)");
        }else{
            $("#myheader_bg").css("filter","blur(3px)");
        }
    })

     //点击图片放大居中显示
    layer.photos({
      photos: '#cnblogs_post_body'
      ,shift: 0
    });
 </script>

 <script type="text/javascript">  
    var setMyBlog = {
        setCopyright: function() {
            //设置版权信息，转载出处自动根据页面url生成
            var info_str = '<p>作者：<a target="_blank">@gzdaijie</a><br>'+
                '本文为作者原创，转载请注明出处：<a class="uri"></a></p><hr></hr>', 
                info = $(info_str),
                info_a = info.find("a"),
                url = window.location.href;
            $(info_a[0]).attr("href","https://github.com/SheepHuan");
            $(info_a[1]).attr("href",url).text(url);
            $("#cnblogs_post_body").prepend(info);
        },
        setCodeRow: function(){
            // 代码行号显示
            var pre = $("pre.sourceCode"); //选中需要更改的部分
            if(pre && pre.length){
                pre.each(function() {
                    var item = $(this);
                    var lang = item.attr("class").split(" ")[1]; //判断高亮的语言
                    item.html(item.html().replace(/<[^>]+>/g,"")); //将<pre>标签中的html标签去掉
                    item.removeClass().addClass("brush: " + lang +";"); //根据语言添加笔刷
                    SyntaxHighlighter.all();
                })
            }
        },
        setAtarget: function() {
            // 博客内的链接在新窗口打开
            $("#cnblogs_post_body a").each(function(){
                this.target = "_blank";
            }) 
        },
        setContent: function() {
            // 根据h2、h3标签自动生成目录
            var captions_ori = $("#cnblogs_post_body h2"),
                captions_ori2 = $("#cnblogs_post_body h3"),
                captions = $("#cnblogs_post_body h2,#cnblogs_post_body h3").clone(),
                content = $("<ul id='right_meun'></ul>");
            $("#cnblogs_post_body").prepend(content.append(captions));
            var index = -1,index2 = -1;
            captions.replaceWith(function(){
                var self = this;
                if(self.tagName == "H2" || self.tagName == "h2"){
                    // 设置点击目录跳转
                    index += 1;
                    $('<a name="' + '_caption_' + index + '"></a>').insertBefore(captions_ori[index]); 
                    return '<li id="'+index+'li"><a href="#_caption_' + index + '">' + self.innerHTML + '</a><ul></ul></li>';
                } else {
                    // add by summertime-wu 增加h3链接跳转
                    index2 += 1;
                    $('<a name="' + '_caption' + index2 + '"></a>').insertBefore(captions_ori2[index2]); 
                    $("#"+index+"li ul").append("<li><a href='#_caption" + index2 + "' style='color:#5f5f5f;'>" +self.innerHTML+"</a></li>");
                    return ;
                }
            });
        },
        runAll: function() {
            /* 运行所有方法
             * setAtarget() 博客园内标签新窗口打开
             * setContent() 设置目录
             * setCopyright() 设置版权信息
             * setCodeRow() 代码行号显示
             */ 
            this.setAtarget(); 
            //假如为手机端不显示目录
            if(document.body.clientWidth>=1000){
                this.setContent();
            }
            // this.setCopyright();
            this.setCodeRow();
        }
    }
    setMyBlog.runAll();
</script>