博客園樣式美化

時間  2019-11-09
標籤 博客 樣式 美化 简体版
原文   原文鏈接

前言

以前就想經過博客園提供的自定義樣式功能美化一下博客，可是一直想等學會 vue 再來改（實際上是懶......）。上個禮拜看到一位大神的博客感到很是驚豔，遂下定決心用一個週末來改。以前有想過本身設計樣式，可是感受越看越醜，因此仍是決定照着這位大神的博客一點點改。javascript

準備工做

一、先看看有沒有輪子css

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

上 Github 也沒有搜到想要的。前端

可能關鍵詞沒用對吧。vue

二、本身動手，豐衣足食java

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

ps:我本來用的博客樣式是bluesky，其實仍是蠻喜歡的git

三、最後成果github

修改前：web

修改後：

美化樣式

代碼以 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/nprogress@0.2.0/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() {
            // 根據h二、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>

實現過程

一、頂部加載條

我採用的是NProgress,這個我感受很是好用。這是他們的官網，能夠直接點四個方法查看效果。

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

我採起了最簡單的方法

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

效果是：

二、頂部導航條

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

百度找到監聽滾動條事件的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動畫實現更流暢一點。

三、導航條上的關於和友情連接

這個其實就是寫兩篇隨筆 ，由於隨筆的地址是固定的因此能夠寫死。

四、背景圖片模糊

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

原圖：

duang！加了特效後：

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

這個得每篇文章裏面加個隱藏域，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)");
        }

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

六、修改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:感受仍是不太滿意┑(￣Д ￣)┍

七、生成目錄

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

而後我魔改了下。。

function() {
            // 根據h二、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......看起來比較糟糕，可是能跑！！

效果：

八、底部導航條

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

而後賦給自定義的按鈕。不過這裏須要注意一點，因爲這個上一篇和下一篇的連接博客園是採起ajax異步加載的方式，因此直接取連接可能致使取空值，須要設置一個定時器來取，個人是設置了1秒後再從頁面上取。

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

九、去除尾部廣告

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

十、適配手機

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

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

效果：

十一、針對首頁優化

經過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

十二、訪問統計

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

不過因爲我把側邊欄隱藏了，因此網頁上看不到。正好我也不想讓這個統計影響了總體的頁面風格。

固然即便隱藏了仍是可以正常統計的。假如本身須要查看則須要手動在控制檯改下樣式，讓 #maincontent 縮小，#sidebar展示。

總結

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

  2. 因爲本身是後端，不太會寫前端，不少地方都不夠優雅，甚至有點小蠢。可是，能跑！！ ＋△＋

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

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

  5. 源碼稍後會放在 Github上，若有作得很差的地方，請不吝賜教，假如以爲不錯的話給個star吧˙▽˙

本文做者：夏日淺笑、
原文地址：http://www.javashuo.com/article/p-pjvkpiie-gs.html 本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文連接。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程