博客園樣式美化

原創 夏日淺笑、 2018-10-15 23:03

前言

之前就想通過博客園提供的自定義樣式功能美化一下博客，但是一直想等學會 vue 再來改（其實是懶......）。上個禮拜看到一位大神的博客感到非常驚豔，遂下定決心用一個週末來改。之前有想過自己設計樣式，但是感覺越看越醜，所以還是決定照着這位大神的博客一點點改。

準備工作

1、先看看有沒有輪子

Google 一下，沒有喜歡的樣式。

上 Github 也沒有搜到想要的。

可能關鍵詞沒用對吧。

2、自己動手，豐衣足食

首先要申請js權限，要不然很多東西都實現不了。然後右鍵查看源代碼，把html下載下來（方便在本地調試）。最後照着別人的博客一點點的修改，一步一步的實現效果。

ps:我原本用的博客樣式是bluesky，其實還是蠻喜歡的

3、最後成果

修改前：

修改後：

美化樣式

代碼以 Github上的爲最新版

頁面定製CSS代碼

/** 原有樣式修改 */
    #sideBar{
        display: none;
    }
    #mainContent{
        width: 100%;
        box-shadow: 0 0 0;
        border-radius: 0px;
        opacity: 0;
        transition:0.5s;
        margin-top:40px;
    }
    #main{
        width: 40%;
        background-color: white;
        /*max-width: 700px;*/
    }
    @media screen and (max-width: 1000px) {
     #main {width: 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;
    }
    #comment_form_container{
        display: none;
    }

    /** 自定義樣式 */
    /* 加載條 */
    #myProgressBar{
        width: 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;

      width: 100%;
      height: 2px;
    }
    #nprogress .peg {
      display: block;
      position: absolute;
      right: 0px;
      width: 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 {
      width: 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{
        width: 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;
        width: 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;
        width: 100%;
        height: 300px;
    }
    #myheader_bg{
        width: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;
        width: 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-width: 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;
        width: 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-width: 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;
        width: 100%;
        padding: 6px 0 6px 25px;
    }
    blockquote{
        border:0;
    }
    /* code加上行數 */
    .cnblogs-markdown .syntaxhighlighter table td.code {
      width: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 {
        width: 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;
    }

頁首Html代碼

<!-- ............自定義首部代碼開始............ -->
<!-- 自定義進度條 -->
<div id="myProgressBar"></div>

<!-- 自定義導航條 -->
<div id="mynavbar">
    <div style="position:relative;width:65pc;height:70px;margin:0 auto;">
        <a style="width: auto;height: 22px;margin-left: 25px;" href="https://www.cnblogs.com/summertime-wu">
            <img style="width: auto;height: 22px;outline: 0;margin-top: 25px;" src="https://ww1.sinaimg.cn/large/0062YmUwgy1fthbsa7nmoj302g02ggle.jpg">
        </a>
        <div id="mynavbar_menu">
            <a href="https://www.cnblogs.com/summertime-wu">首頁</a>
            <a href="https://msg.cnblogs.com/send/summertime-wu">聯繫</a>
            <a href="https://github.com/Summertime-Wu">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/summertime-wu" style="">暫未分類</a>
            </div> 
        </div>  
    </div>
</div>
<!-- ............自定義首部代碼結束............ -->

頁尾Html代碼

<!-- ............自定義尾部代碼開始............ -->
<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/[email protected]/nprogress.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)");
        }

        //標題
        $("#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/summertime-wu"|| 
            window.location.href == "https://www.cnblogs.com/summertime-wu/"||
            window.location.href == "http://www.cnblogs.com/summertime-wu"|| 
            window.location.href == "http://www.cnblogs.com/summertime-wu/") {
            $("#mypost_title_f").html("");
            $("#mypost_title_e").html("<a href='https://cnblogs.com/summertime-wu'>立德立言，無聞西東</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://cnblogs.com/summertime-wu'>暫未分類</a>";
            }
            var ftitle = "Published on "+ $("#post-date").html() + " in " +  classification
            + " with <a href='https://cnblogs.com/summertime-wu'>夏日淺笑、</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/summertime-wu"|| 
            window.location.href == "https://www.cnblogs.com/summertime-wu/"||
            window.location.href == "http://www.cnblogs.com/summertime-wu"|| 
            window.location.href == "http://www.cnblogs.com/summertime-wu/") {
        $("#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)");
        }
    })

 </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/gzdaijie");
            $(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(); 
            this.setContent();
            // this.setCopyright();
            this.setCodeRow();
        }
    }
    setMyBlog.runAll();
</script>

實現過程

1、頂部加載條

我採用的是NProgress,這個我感覺非常好用。這是他們的官網，可以直接點四個方法查看效果。

點Download會跳到Github上去，上面有詳情文檔和CDN地址

我採取了最簡單的方法

$(document).ready(function(){
        NProgress.start();
        NProgress.done();
}

效果是：

2、頂部導航條

頂部導航條要實現下滑隱藏，上滑加載。這個剛開始以爲很難，沒想到還是比較簡單的。

百度找到監聽滾動條事件的js方法

    var oldScrollNum = 0;
    window.onscroll = function(){
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        //下滑
        if (t>oldScrollNum) {

        //上拉
        }else{

        }
        oldScrollNum = t;
    }

然後通過這個方法改變頂部導航條的margin-top的值達到展現隱藏的效果

最後給滾動條加上過渡屬性transition: 0.5s ease-in-out; ，這樣就達到了想要的效果。

ps：其實用CSS動畫實現更流暢一點。

3、導航條上的關於和友情鏈接

這個其實就是寫兩篇隨筆 ，因爲隨筆的地址是固定的所以可以寫死。

4、背景圖片模糊

這個css3提供了原生支持：filter: blur(3px);

原圖：

duang！加了特效後：

5、爲每篇文章單獨的背景

這個得每篇文章裏面加個隱藏域，value存背景圖片的地址。

//設置背景圖片地址
        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)");
        }

這裏設成沒有取到值就用默認的

6、修改markdown樣式

這個就得嘔心瀝血的一點點調整了...

    /** 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;
        width: 100%;
        padding: 6px 0 6px 25px;
    }

修改前：

修改後：

ps:感覺還是不太滿意┑(￣Д ￣)┍

7、生成目錄

這個採用了Github上的輪子：https://github.com/gzdaijie/cnblogs_markdown_optimize

然後我魔改了下。。

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 ;
                }
            });
        }

eummm......看起來比較糟糕，但是能跑！！

效果：

8、底部導航條

這個實現和頂部的差不多，多的就是去頂尾部和上一篇下一篇的四個按鈕，去頂部和去尾部用錨點很好實現，上一篇和下一篇則需要用js從頁面上取值

然後賦給自定義的按鈕。不過這裏需要注意一點，由於這個上一篇和下一篇的鏈接博客園是採取ajax異步加載的方式，所以直接取鏈接可能導致取空值，需要設置一個定時器來取，我的是設置了1秒後再從頁面上取。

        /**
        設置ajax請求加載完數據時執行的js
    */
    setTimeout(afterAjax,1000);
    function afterAjax(){
            //取值
        }

9、去除尾部廣告

額，這個呢。實現so easy，找到對應廣告元素的id，設置 display:none 就好了，但是有點心虛。畢竟博客園免費給我們提供的了地方寫博客，然而我卻......

10、適配手機

這個其實沒有仔細處理，只是粗略的調整了下主體的大小，當瀏覽器寬度小於1000px時，將#main設爲100%寬。

    #main{
        width: 40%;
        background-color: white;
        /*max-width: 700px;*/
    }
    @media screen and (max-width: 1000px) {
     #main {width: 100%;}
    }

效果：

11、針對首頁優化

通過js獲取當前url，然後匹配一下（其實這裏可以優化一下，判斷是否包含 summertime-wu 且後面沒有下一級）

if (window.location.href == "https://www.cnblogs.com/summertime-wu"|| 
            window.location.href == "https://www.cnblogs.com/summertime-wu/"||
            window.location.href == "http://www.cnblogs.com/summertime-wu"|| 
            window.location.href == "http://www.cnblogs.com/summertime-wu/") {
    //針對性優化
}

是的，我現在才發現博客園既可以走http，也可以走https。。其實還可以這樣：http://summertime-wu.cnblogs.com

12、訪問統計

我這裏採用的是http://www.flagcounter.com/,感覺挺不錯的，不需要註冊什麼的，生成了html代碼直接複製到側邊欄代碼框裏就可以用了。

不過由於我把側邊欄隱藏了，所以網頁上看不到。正好我也不想讓這個統計影響了整體的頁面風格。

當然即使隱藏了還是能夠正常統計的。假如自己需要查看則需要手動在控制檯改下樣式，讓 #maincontent 縮小，#sidebar展現。

總結

  1. 在這裏鄭重感謝Chakhsu Lau，是這位大神的博客給我提供了模仿的對象。ps:這位大神的博客是用他自己寫的一個Typecho主題：pinghsu,使用了pjax技術，體驗如絲滑般流暢。

  2. 由於自己是後端，不太會寫前端，很多地方都不夠優雅，甚至有點小蠢。但是，能跑！！ ＋△＋

  3. 現在發現寫前端原來這麼爽，打開控制檯你就是上帝了，很多東西都有現成的輪子，還非常簡單好用。不過也發現前端不爽的地方，要適配各種分辨率和兼容各種瀏覽器。

  4. 自己同時是提需求的和實現需求的好矛盾啊啊啊。不過我最後堅定了一個想法，無論多難都要實現，打磨好每一個細節ˋ︿ˊ

  5. 源碼稍後會放在 Github上，如有做得不好的地方，請不吝賜教，假如覺得不錯的話給個star吧˙▽˙

本文作者：夏日淺笑、
原文地址：https://www.cnblogs.com/summertime-wu/p/9356736.html
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

HTML頁面關於高分屏的設置

記錄一個HTML頁面關於高分屏的踩到的坑。 所謂高分屏，就是在同樣大小的屏幕面積上顯示更多的像素點，這樣可以呈現更好的可視效果的屏幕。例如，我的筆記本是15.6寸，理論上它的屏幕分辨率應該是1920 x 1080像素，但實際上我的筆記本屏幕

harlee44 2024-05-04 14:31:10

DAPPER 事務 TRANSACTION

https://www.cnblogs.com/friend/p/16754184.html\   public async Task<int> Save(long moldProducedProductId, List<MoldStan

老飛飛 2024-05-04 14:29:20

[MDP.AspNetCore] 實作OAuth協定SSO Server/Client專案範例

團隊負責的系統變多的時候，使用SSO Server提供統一身分驗證，讓團隊只需要維護一份用戶資料及一個身分驗證服務。除了減少團隊維護成本之外，也讓使用者不用記憶多個站臺的帳號密碼，提供更好的使用者體驗。 本篇文章，介紹使用MDP.AspNe

Clark159 2024-05-04 14:23:49

Redis官方開源的可視化管理工具 - RedisInsight

前言 今天大姚給大家推薦一款Redis官方開源的可視化管理工具：RedisInsight。 Redis介紹 Redis (Remote Dictionary Server) 是一個使用 C 語言編寫的，開源的 (遵守 BSD 協議) 高性

追逐時光 2024-05-04 14:21:49

Python 潮流週刊#49：谷歌裁員 Python 團隊，微軟開源 MS-DOS 4.0

本週刊由 Python貓 出品，精心篩選國內外的 250+ 信息源，爲你挑選最值得分享的文章、教程、開源項目、軟件工具、播客和視頻、熱門話題等內容。願景：幫助所有讀者精進 Python 技術，並增長職業和副業的收入。 本期週刊分享了 12

豌豆花下貓 2024-05-04 14:19:09

HarmonyOS 垂直方向內容滾動條實現

概述 Swiper組件是一個用戶界面元素，用於在垂直方向上滾動內容。它通過遍歷一個數據集合，爲每一項創建一個可滾動的文本項。 代碼實現 以下是Swiper組件的實現代碼： Swiper(){ ForEach(searchSwiper,

西北野狼 2024-05-04 14:05:08

基於SSM的倉庫進銷存系統畢業設計論文【範文】

摘要 隨着信息技術的不斷髮展，企業對於倉儲管理的要求日益提高。爲了提升倉庫管理的自動化和智能化水平，本研究設計並實現了一個基於Spring、Spring MVC和MyBatis (SSM) 框架的在倉庫進銷存系統。該系統旨在爲企業提供一個高

Lucky帥小武 2024-05-04 14:03:17

基於SSM的在線考試系統畢業設計論文【範文】

摘要 隨着信息技術的飛速發展，網絡教學逐漸成爲教育行業的重要組成部分。在線考試系統作爲網絡教學平臺的關鍵模塊之一，其便捷性、高效性和公正性受到廣泛關注，基於SSM框架的在線考試系統旨在提供一個穩定、可靠並且易於維護的在線考試環境，以滿足現代

Lucky帥小武 2024-05-04 14:03:17

CSS & JS Effect – 用 wheel 模擬 scroll

前言 在 用 JavaScript 實現 position sticky 文章中，我提到了用 wheel 來模擬 scroll 效果。 這篇來說說具體怎麼實現，挺簡單的哦。   Preparation table.html <div c

興傑 2024-05-04 13:59:16

python包：torchsummary

利用torchsummary觀察每一層的情況   1）按照方式    pip install torchsummary     2）

wenluderen 2024-05-04 13:56:56

Windows使用WSL2及docker(Ubuntu22.04 LTS)

WSL2初始化 1.換源 #1 cp /etc/apt/sources.list /etc/apt/sources.list.bak #2 vim /etc/apt/sources.list # 清空原源並替換成以下源 # deb-src

臨冬城城主 2024-05-04 13:52:56

學習Mysql 你應該懂得

  1、日誌系統：平時在設計系統時可以借鑑一下 參考下面文章 https://www.cnblogs.com/ScarecrowAnBird/p/18163444 2、索引：提高性能利器   3、鎖：提高併發能力小絕招 https://ww

落葉已歸根 2024-05-04 13:45:25

mysql 鎖，和加鎖機制

背景間隙鎖是MySQL在RR可重複讀隔離級別下用來修復幻讀才引入的一種鎖，間隙鎖也只有在RR可重複讀隔離級別下才會存在，如果是在RC讀已提交隔離級別下，是沒有間隙鎖的存在的。另外，我們也知道，幻讀這種現象也只有在當前讀的時候纔會發生，在一致

落葉已歸根 2024-05-04 13:45:25

深入 Django 模型層：數據庫設計與 ORM 實踐指南

title: 深入 Django 模型層：數據庫設計與 ORM 實踐指南 date: 2024/5/3 18:25:33 updated: 2024/5/3 18:25:33 categories: 後端開發 tags: Djang

Mifen 2024-05-04 13:38:24

[轉帖]Introducing Exadata Cloud@Customer X10M

https://blogs.oracle.com/database/post/introducing-exadata-cloudcustomer-x10m     Extreme Scale with Dramatically

濟南小老虎 2024-05-04 13:29:33