前端小白也能快速學會的博客園博客美化全攻略

時間 2019-12-09

標籤前端快速學會博客美化攻略简体版

原文原文鏈接

前端小白也能快速學會的博客園博客美化全攻略

A呦V，博客園er的自我修養是什麼？第一條，別隻顧收藏和偷師呀，記得點"推薦"或關注本人喔~ javascript

美化方法論簡介

通常而言，須要選一個默認的skin，而後在該基礎上調整。css

官方介紹：
博客皮膚模板 http://skintemplate.cnblogs.com/html

官方文檔 - 【博客園skin開發文檔】:前端

https://docs.qq.com/sheet/DZF...java

寬屏模版：jquery

SimpleMemorygit

Minyx2_Litegithub

lessIsMoreweb

BlueSky

算法

博客園佈局的組成及其對應關係(下方一圖來自於網絡):

準備工做

首先你得有個cnblogs博客
申請js權限

附該美化過程的github項目:
yanglr/Beautify-cnblogs: Beautify-cnblogs

歡迎fork或star~

本博客的全部代碼在此github項目的src文件夾中~

源碼使用步驟：

打開博客後臺管理 → 「設置」
在博客皮膚選項卡中將博客皮膚設置爲： LessIsMore
將src文件夾下的頁面定製.css 複製到頁面定製CSS代碼代碼框內
將同一文件夾下的頁首.html 複製到頁首Html代碼代碼框內
將同一文件夾下的頁尾.html 複製到頁腳Html代碼代碼框內
保存，便可見效。

js權限申請

登錄後依次點擊「個人博客」 → 「管理」 → 「設置」，在下拉後找到「博客側邊欄公告」，後方有一個「申請js權限」。

或者也可進博客園園子頁面(https://home.cnblogs.com/feed...)，髮狀態@博客園團隊，申請開通js權限。

也可發個郵件到contact@cnblogs.com申請js權限。

申請時內容模板已爲你備好:

尊敬的博客園管理員：
本人請求申請開通js權限，但願可以把博客修飾的漂亮點，點綴自定義js插件效果，但願管理員能夠批准，多謝~

提交完申請，會彈出提示:

JS權限申請已提交，待審覈。

剩下的就是耐心等待了，通常來講挺快就會經過。若是設置頁面上公告欄標題右側不存在「申請js權限」，說明已成功開通js權限。

如何模仿一個博客園的自定義風格(樣式css+動態效果js)?

模仿一個cnblogs的全局css，只需打開Chrome瀏覽器，按下F12，找裏面的skin css和custom css，例如：

<link id="MainCss" type="text/css" rel="stylesheet" href="/skins/LessIsMore/bundle-LessIsMore.css?...">

<link type="text/css" rel="stylesheet" href="/blog/customcss/198996.css?v=...">

補充完整前綴：http://www.cnblogs.com，使用ref將該兩個css引用到本身的博客中，便可進行大概樣子的模仿，其餘部分須要細調。

markdown樣式自定義

默認markdown狀態下，代碼中的字比較小。

/* 文章標題樣式(這個不是markdown裏的標題) */
#topics .postTitle a {
    /* color: #169fe6; */
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    font-weight: bold;
}
 
/* 普通文字樣式 */
#cnblogs_post_body p {
    margin: 18px auto;
    color: #000;
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    font-size: 16px;
    text-indent: 0;
}
 
/* 標題樣式 */
#cnblogs_post_body h1 {
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 0;
}

#cnblogs_post_body h2 {
    font-family: Consolas, "Microsoft YaHei", monospace;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.5;
    margin: 20px 0;
}

#cnblogs_post_body h3 {
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 0;
}

#cnblogs_post_body h4 {
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0;
}
/* 標題樣式設置結束 */
 
/* 去除雙下劃線斜體樣式 */
em {
    font-style: normal;
    color: #000;
}
 
/* 無序列表 */
#cnblogs_post_body ul li {
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    color: #000;
    font-size: 16px;
    list-style-type: disc;
}
 
/* 有序列表 */
#cnblogs_post_body ol li {
    font-family: Georgia,Times New Roman,Times,sans-serif, monospace;
    color: #000;
    font-size: 16px;
    list-style-type: decimal;
}
 
/* 超連接 */
#cnblogs_post_body a:link {
    text-decoration: none;
    color: #002C99;
}
 
/* 引用背景 */
#topics .postBody blockquote {
    background: #fff3d4;
    border: none;
    border-left: 5px solid #f6b73c;
    margin: 0;
    padding-left: 10px;
}
 
/* 單行代碼 */
.cnblogs-markdown code {
    font-family: Consolas, "Microsoft YaHei", monospace !important;
    font-size: 16px !important;
    line-height: 20px;
    background-color: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    padding: 0 5px !important;
    border-radius: 3px !important;
    line-height: 1.8;
    margin: 1px 5px;
    vertical-align: middle;
    display: inline-block;
}
 
/* 多行代碼, 引用 */
.cnblogs-markdown .hljs {
    font-family: Consolas, "Microsoft YaHei", monospace !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    padding: 5px !important;
}

若是但願使用Sublime那樣的主題，可參考：
如何自定義博客園代碼高亮主題，同時分享本身使用的黑色主題 - 我是小茗同窗 - 博客園 .

在頁面頂部添加"自定義搜索"功能

css部分：

<style type="text/css"> 
    #auto_div {
        display: none;
        width: 257px;
        border: 1px #74c0f9 solid;
        background: #FFF;
        position: absolute;
        top: 24px;
        left: 0;
        margin-top: 15px;
        color: #323232;
        /*設置顯示在當前頁面的上一層*/
        z-index: 1;
    }
 
    .side_search {
        float: left;
        position: relative;
        height: 31px;
        margin-left: 25px;
        display: inline-block;
    }
 
        .side_search:hover {
            -webkit-box-shadow: 0 0 3px #999;
            -moz-box-shadow: 0 0 3px #999
        }
 
    .search_input {
        width: 210px;
        vertical-align: middle;
        height: 30px;
        line-height: 30px;
        border: 1px solid #999;
        border-radius: 2px 0 0 2px;
        padding: 4px 7px;
        background-color: #fbfbfb;
    }
 
    .delete_btn {
        background: #fbfbfb;
        margin-left: -6px;
        border: 1px solid #fbfbfb;
        border-radius: 0 3px 3px 0;
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        color: red;
        font-weight: bold;
        width: 38px;
        font-size: 25px;
        height: 38px;
        padding-bottom: inherit;
    }
 
    .search_btn {
        border-radius: 3px 3px 3px 3px;
        background: #4d90fe;
        margin-left: -7px;
        border: 1px solid #4d90fe;
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        color: #f3f7fc;
        font-weight: bold;
        width: 100px;
        font-size: 18px;
        height: 41px;
    }
 
        .search_btn:hover {
            background: #1874CD
        }
 
    .search_btn2 {
        border-radius: 3px 3px 3px 3px;
        background: #F0CB85;
        border: 1px solid #F0CB85;
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        color: #DC143C;
        font-weight: bold;
        width: 100px;
        font-size: 18px;
        height: 41px;
    }
 
        .search_btn2:hover {
            background: #DEB887
        }
 
    input, button, textarea, select, optgroup, option {
        font-family: inherit;
        font-size: inherit;
        font-style: inherit;
        font-weight: inherit;
    }
</style>

js部分:

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var availableTags = [
        "C#", "C++", "算法",
        "ASP", "MySQL", "Oracle",
        "HTML", "CSS", "JavaScript",
        "jQuery", "AJAX", "微軟系列技術",
        "Sublime", "Git",
        "Visual Studio Code",
        "Eclipse",
        "C#開發", "C++開發", "Java開發",
        "PHP開發",
        "Python開發",
        "Web前端開發",
        "Windows Forms",
        "WPF",
        "計算機數學",
        "瀏覽器插件",
        "軟件推薦",
        "算法實踐",
        "專業學習",
        "Leetcode",
        "知乎",
        "Bravo Yeung",
        "legege007",
        "enjoy233",
        "數學",
        "內容太長，顯示其中的一部分"
    ];
    var old_value = "";
    var highlightindex = -1;   //高亮

    //自動完成
    function AutoComplete(auto, search, mylist) {
        if ($("#" + search).val() != old_value || old_value == "") {
            var autoNode = $("#" + auto);   //緩存對象（彈出框）
            var carlist = new Array();
            var n = 0;
            old_value = $("#" + search).val();
 
            for (i in mylist) {
                if (mylist[i].indexOf(old_value) >= 0) {
                    carlist[n++] = mylist[i];
                }
            }
            if (carlist.length == 0) {
                autoNode.hide();
                return;
            }
            autoNode.empty();  //清空上次的記錄
            for (i in carlist) {
                var wordNode = carlist[i];   //彈出框裏的每一條內容

                var newDivNode = $("<div>").attr("id", i);    //設置每一個節點的id值
                newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;");
 
                newDivNode.html(wordNode).appendTo(autoNode);  //追加到彈出框

                //鼠標移入高亮，移開不高亮
                newDivNode.mouseover(function () {
                    if (highlightindex != -1) {        //原來高亮的節點要取消高亮（是-1就不須要了）
                        autoNode.children("div").eq(highlightindex).css("background-color", "white");
                    }
                    //記錄新的高亮節點索引
                    highlightindex = $(this).attr("id");
                    $(this).css("background-color", "#ebebeb");
                });
                newDivNode.mouseout(function () {
                    $(this).css("background-color", "white");
                });
 
                //鼠標點擊文字上屏
                newDivNode.click(function () {
                    //取出高亮節點的文本內容
                    var comText = autoNode.hide().children("div").eq(highlightindex).text();
                    highlightindex = -1;
                    //文本框中的內容變成高亮節點的內容
                    $("#" + search).val(comText);
                })
                if (carlist.length > 0) {    //若是返回值有內容就顯示出來
                    autoNode.show();
                } else {               //服務器端無內容返回 那麼隱藏彈出框
                    autoNode.hide();
                    //彈出框隱藏的同時，高亮節點索引值也變成-1
                    highlightindex = -1;
                }
            }
        }
 
        //點擊頁面隱藏自動補全提示框
        document.onclick = function (e) {
            var e = e ? e : window.event;
            var tar = e.srcElement || e.target;
            if (tar.id != search) {
                if ($("#" + auto).is(":visible")) {
                    $("#" + auto).css("display", "none")
                }
            }
        }
 
    }
 
    $(function () {
        old_value = $("#zzk_q").val();

        $("#zzk_q").keyup(function () {
            AutoComplete("auto_div", "zzk_q", availableTags);
        });
    });
 
    function quickdelete() {
        document.getElementById("zzk_q").value = "";
    }
 
    function zzk_go() {
        var n = encodeURIComponent(document.getElementById("zzk_q").value);
        window.location = "http://zzk.cnblogs.com/s?w=blog%3AEnjoy233+" + n + "&t="
    }
    function zzk_go2() {
        var n = encodeURIComponent(document.getElementById("zzk_q").value);
        window.location = "http://zzk.cnblogs.com/s?w=" + n
    }
    function zzk_go_enter(n) {
        if (n.keyCode == 13)
            return zzk_go(), !1
    }
</script>

若是須要修改自動完成的下拉選項，修改變量availableTags的值便可見效。

html部分：

<h1 style="margin-left: 570px;padding-top:15px;padding-bottom: 15px; color: #337ab7;font-size: 3em;font-weight: bold;font-style: italic;text-shadow: 1px 0px 0px #1E90FF;">  </h1>
<div class="side_search">
    <input type="text" id="zzk_q" class="search_input" onkeydown="return zzk_go_enter(event);" placeholder="輸入 回車搜索" tabindex="1" autofocus x-webkit-speech>
    <div id="auto_div">
    </div>&nbsp;
    <input onclick="quickdelete()" type="button" class="delete_btn" value="×" title="清空">
    <input onclick="zzk_go()" type="button" class="search_btn" value="本博搜索">
    <input onclick="zzk_go2()" type="button" class="search_btn2" value="園內搜索">
</div>

效果圖:

在頁面頂部添加"音樂播放器"(Flash)播放背景音樂

先登陸網易雲音樂網頁版，搜索到想要的音樂，而後點擊"生成外鏈播放器"便可獲得相應的html代碼。

表現形式一：單曲播放 (type = 1)

<embed src="http://music.163.com/outchain/player?type=0&amp;id=26237342&amp;auto=0&amp;height=430" width="100%" height="450" frameborder="no" marginwidth="0" marginheight="0"></embed>

或

<embed src="https://music.163.com/style/swf/widget.swf?sid=26237342&type=2&auto=0&width=320&height=66" width="340" height="86"  allowNetworking="all" ></embed>

參數說明：

播放器可修改參數：
width=100% #自適應寬度, 本博客使用了固定寬度320
height=66 #根據本身須要來改
sid=26237342 # 此數字是歌曲的ID http://music.163.com/#/song?i...
auto=0 # 0表示不自動播放，1表示自動播放

表現形式二：列表播放 (type = 0)

<embed src="https://music.163.com/outchain/player?type=0&amp;id=78413764&amp;auto=0&amp;height=430" width="100%" height="450" frameborder="no" marginwidth="0" marginheight="0"></embed>

固然該url中的https:也可刪掉。

參數說明

播放器可修改參數：
width=100% # 自適應寬度
height=450 # 根據本身的須要修改
id=34238509 # 此數字是歌曲列表頁的ID, 例如： http://music.163.com/#/playli...
auto=0 # 0表示不自動播放，1表示自動播放

將該代碼貼進頁首html便可見效(若是代碼中含有iframe，需替換成embed)~

<div style="display: table; text-align: center; width: 40%; height: 100%;">
<embed src="https://music.163.com/style/swf/widget.swf?sid=26237342&type=2&auto=0&width=320&height=66" width="340" height="86"  allowNetworking="all" ></embed>
</div>

效果圖:

在頁面頂部添加"Fork me on Github"圖標

頁首html須要添加

<div>
<a href="http://github.com/yanglr" target="_blank" style="position: absolute;right: 0;  top: 0; z-index: 100;">
    <img src="http://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_git-right-link.gif" alt="Fork me on github">
</a>
</div>

效果見本頁面右上角。

若是想對該圖標進行更多顏色或位置的設置，請參考：GitHub Ribbons - The GitHub Blog.

爲導航欄設置漸變背景色

/* 頭部 */
#header {
    position: relative;
    height: 280px;
    margin: 0;
    background: #020031;
    background: -moz-linear-gradient(45deg,#020031 0,#6d3353 100%);
    background: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#020031),color-stop(100%,#6d3353));
    background: -webkit-linear-gradient(45deg,#020031 0,#6d3353 100%);
    background: -o-linear-gradient(45deg,#020031 0,#6d3353 100%);
    background: -ms-linear-gradient(45deg,#020031 0,#6d3353 100%);
    background: linear-gradient(45deg,#020031 0,#6d3353 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#020031', endColorstr='#6d3353', GradientType=1);
    -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);
    -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);
    box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);
}

在公告欄添加滾動文字

使用marquee標籤即能實現文字的滾動

<marquee><a href="#"><font color="blue" size="4">You will make it!
</marquee>

效果圖:

在公告欄加入本身的社交網絡帳號 - 圖片連接

能夠將本身不一樣社交網絡的帳號放在同一個span中，而後嵌入到div裏，代碼以下：

<div nowrap align=center>
        <img src="http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_gzh.png" width=150 height=150>
    </div>
<br>
<div align="center">
     <a href="http://stackoverflow.com/users/6075331/bravo-young" target="_blank" class="mr5 "><strong>StackOverflow</strong></a><font  style="color:#BF7158">(</font>
    <img src="http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_reputation-rp.png" class="mr5">
    <span style="color:#BF7158" class="mr10">406 <font size=4 color=black>⬆</font>)</span>
</div>

<br>

<div class="c-social" align="center">
<span>
    <a href="https://github.com/yanglr" target="_blank">
      <img src="https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_github.png" class="mr5" width = 40 height=40>
    </a>
    <a href="http://blog.csdn.net/lzuacm" target="_blank">
      <img src="http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_csdn.png" class="mr5" width = 40 height=40>
    </a>
    <a href="https://www.zhihu.com/people/legege007" target="_blank">
      <img src="https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_zhihu.png" class="mr5" width = 40 height=40>
    </a>
    <a href="http://weibo.com/546671991" target="_blank">
      <img src="https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_weibo.png" class="mr5" width = 40 height=40>
    </a>

</span>

效果圖:

對於知乎，能夠這樣寫更詳細些：

<div valign="middle" align="left" bgcolor='#F6F8FA'>
    <span>
        <a href="https://www.zhihu.com/people/legege007" title="知乎撩我" target="_blank">
            <img src="http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_zhihu-dog.jpg" height='22'>
        </a>
    </span>
    <span valign='middle'>
        <font>(</font>
        <img src="https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_vote.png" width='14' height='14' title="贊同">
        42.8k <font color=black></font>
        <img src="https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_fav.png" width='14' height='14' title="收藏">
        90.7k <font  color=black></font>
        <img src="https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_thank.png" width='14' height='14' title="感謝">
        21.7k <font color=black></font>)
    </span>
</div>

而對於stackoverflow，官方在StackExchange頁面提供了flair，好比個人是: User Bravo Yeung - Stack Exchange ，頁面中提供了可嵌入的html代碼:

<a href="https://stackexchange.com/users/4637854/bravo-yeung"><img src="https://stackexchange.com/users/flair/4637854.png" width="208" height="58" alt="profile for Bravo Yeung on Stack Exchange, a network of free, community-driven Q&amp;A sites" title="profile for Bravo Yeung on Stack Exchange, a network of free, community-driven Q&amp;A sites" /></a>

將其用div包起來，放進公告.html便可見效。

在公告欄添加一個能旋轉的rss圖標

先將相應的css放入頁面定製css或公告欄的css中，而後在後面使用。

#feed_icon {
    border: #000 solid 2px;
    display: block;
    margin: 50px auto;
    border-radius: 50%;
    transition: all 2.0s;
}

#feed_icon:hover {
    transform: rotate(360deg);
}

而後將以下代碼貼進公告中~

<div id="feed">
  <a href="https://www.cnblogs.com/enjoy233/rss" title="訂閱Feed"  target="_blank">
     <img id="feed_icon" src="https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_rss.png" alt="" style="border: 0pt none;" width = 60 height=60>
  </a>
</div>

效果圖:

在公共欄添加"人體時鐘"(Flash)

此人體時鐘的原做者: 日本flash達人 Chabudai，初發表於2008年9月(2008-09-23)。

只需在公告中貼入以下代碼:

<embed wmode="transparent" src="https://files.cnblogs.com/files/enjoy233/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="200" height="120" name="honehoneclock" align="middle" allowscriptaccess="always"type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

效果圖:

參考:

人體造型時鐘hone clock設置、博客側欄代碼 - 曹傑峯的博客

ps: iOS移動端用默認瀏覽器打開看不到效果很正常，這個是flash作的，蘋果的產品基本上都不直接支持flash了，iOS上安裝一個Chrome瀏覽器卻是能夠正常打開的~

在公共欄添加"站點統計"功能

打開網站：http://www.flagcounter.com/ ，無需註冊，點擊黃色按鈕"Get Your Flag Counter"，便可生成嵌入該插件的html代碼。

生成的html代碼以下：

<div>
<a href="https://info.flagcounter.com/LCgi"><img src="https://s04.flagcounter.com/count2/LCgi/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_1/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
<div>

最後將該代碼加入到公告欄的html代碼中即能生效。

在公告欄中加入"自定義搜索"(PopUp彈窗)

實現的基本原理:

onclick = "window.open()", target = popUpWindow

此功能的特點在於用戶搜索以後，搜索結果頁面並不會影響到原博客頁面，而是在彈出的獨立窗口顯示，並且很容易擴展出不少其餘站點的搜索功能。

在公告html中貼入以下代碼:

<div id="sidebar_search_new" class="mySearch">
<h3 class="catListTitle">自定義搜索(PopUp窗口)</h3>
    <input type="text" id="zzk_q1" class="input_my_zzk_new" placeholder="Bravo Yeung"> 
<span>
    <input type="button" class="btn_my_zzk" value="本博搜索" onclick="window.open('https://zzk.cnblogs.com/my/s/blogpost-p?Keywords=' + document.getElementById('zzk_q1').value,'popUpWindow','height=750,width=1000,left=10,top=10,scrollbars=yes,menubar=no'); return false;" />
&emsp;
<input type="button" class="btn_my_zzk" value="站內搜索" onclick="window.open('https://zzk.cnblogs.com/s/blogpost?w=' + document.getElementById('zzk_q1').value,'popUpWindow','height=750,width=1000,left=10,top=10,scrollbars=yes,menubar=no'); return false;" />
</div>
<span>
<span>
    <input type="button" class="btn_my_zzk" value="知乎搜索" onclick="window.open('https://www.zhihu.com/search?type=content&q=' + document.getElementById('zzk_q1').value,'popUpWindow','height=750,width=1000,left=10,top=10,scrollbars=yes,menubar=no'); return false;" />
&emsp;
<input type="button" class="btn_my_zzk" value="CSDN搜索" onclick="window.open('https://so.csdn.net/so/search/s.do?t=blog&u=yanglr2010&q=' + document.getElementById('zzk_q1').value,'popUpWindow','height=750,width=1000,left=10,top=10,scrollbars=yes,menubar=no'); return false;" />
</div>

效果圖:

參考:
Javascript - Open a given URL in a new tab by clicking a button - Stack Overflow

JavaScript Popup Windows

Javascript window.open, also fullscreen and centered popup window « JavaScript DHTML Tutorials

頁面底部添加"回到頂部" + "收藏" + "快速評論"功能

html部分：

<div class="scrollBtn" id="scrollBtn">
    <ul class="clearfix">
        <li class="sB-home">
            <a href="http://www.cnblogs.com/enjoy233" class="ff-t" title="首頁"></a>
        </li>
        <li class="sB-comment">
            <a href="#blog-comments-placeholder" onclick="$('#tbCommentBody').focus();" class="ff-t" title="添加評論"></a>
        </li>
        <li class="sB-share"><a onclick="if(cb_entryId !=undefined){AddToWz(cb_entryId)}" href="javascript:void(0);" title="收藏"></a></li>
        <li class="sB-goTop" id="goTop" style="display: list-item;">
            <a href="#top" title="回頂部"></a>
        </li>
    </ul>
</div>

效果圖:

"自動移動的目錄"功能

頁腳html引入css文件nav.my.css和nav.my.js。

<link href="//blog-static.cnblogs.com/files/enjoy233/nav.my.css" rel="stylesheet">
<script type="text/javascript" src="//files.cnblogs.com/files/enjoy233/nav.my.js"></script>

而後將下方代碼貼進頁腳html.

JS部分:

<script language="javascript" type="text/javascript">
//生成目錄索引列表
function GenerateContentList()
{
    var jquery_h3_list = $('#cnblogs_post_body h4');//若是你的章節標題不是h4,只須要將這裏的h4換掉便可
    if(jquery_h3_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content    += '<div id="navCategory">';
        content    += '<p style="font-size:18px"><b>閱讀目錄</b></p>';
        content    += '<ul>';
        for(var i =0;i<jquery_h3_list.length;i++)
        {
            var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到頂部</a><a name="_label' + i + '"></a></div>';
            $(jquery_h3_list[i]).before(go_to_top);
            var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
            content += li_content;
        }
        content    += '</ul>';
        content    += '</div>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }    
}
GenerateContentList();
</script>

效果圖:

改進評論的顯示樣式

這裏我索性改爲了熟悉的微信聊天的樣式。

純css實現:

.blog_comment_body {
        background: #B2E866;
        float: left;
        border-radius: 5px;
        position: relative;
        overflow: visible;
        margin-left: 33px;
        max-width: 700px;
    }

    .feedbackListSubtitle a.layer {
        background: #B2E866;
        color: #414141 !important;
        padding: 2px 4px;
        border-radius: 2px;
    }

將上面的代碼貼緊頁面css文本框便可見效果。

效果圖:

在公告欄添加"友情連接"

cnblogs博客後臺提供了"連接"功能，這個就是用來添加友情連接的。

設置方法(見下圖):

編輯分類 -> 添加連接，設置好後公告欄上會顯示相關內容，不過可能會有延時，須要等一會。

效果圖:

"博客簽名"功能

雖然cnblogs博客後臺提供了"博客簽名"功能，測試發現該該方法實現的博客簽名在IE中打開時不顯示，只好改成用跨瀏覽器的JQuery來實現了。

<script type="text/javascript">
$(document).ready(function(){
    $("#cnblogs_post_body").append('<br/><hr/><div style="border: 2px dotted #4d90fe; padding: 2px; background-color: lightgray">    做者：<a href="http://www.cnblogs.com/enjoy233/" target="_blank" title="Enjoy233的博客" style="color: brown">Bravo Yeung</a><br>    出處：<a href="http://www.cnblogs.com/Enjoy233/" target="_blank" title="http://www.cnblogs.com/Enjoy233/" style="color: blue">http://www.cnblogs.com/Enjoy233/</a>    <br>若是您以爲閱讀本文對您有幫助，請點擊一下右下方的<b style="color: blue; font-size: 16px">推薦</b>按鈕，您的<b style="color: blue; font-size: 16px">推薦</b>將是我寫做的最大動力！    <br>版權聲明：本文爲博主原創或轉載文章，歡迎轉載，<b>但轉載文章以後必須在文章頁面明顯位置註明出處</b>，不然保留追究法律責任的權利。</div>');
});
</script>

禁用頁面的"選中複製"功能

在css中進行相應的設置，只需將下方代碼貼入"頁面css"文本框便可。

/* 禁止頁面，選中 複製 */
html,body {
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

綜合考慮後，這種處理方式並不太友好，因而採用了後文中的"複製博客內容時自動加版權說明"。

不顯示底部廣告

在css中進行相應的設置，只需將下方代碼貼入"頁面css"文本框便可。

#ad_t2,#cnblogs_c1,#under_post_news,#cnblogs_c2,#under_post_kb {
    display:none; !important
}

修改導航欄(修改部分連接的文字 + 增長下拉菜單)

css部分:

/* 定製本身導航欄的樣式 */
#shwtop ul {
    margin: 0;
    padding: 0;
    list-style-type: none; /*去除li前的標註*/
    background-color: #333;
    overflow: hidden; /*隱藏溢出的部分，保持一行*/
}
#shwtop li {
    float: left; /*左浮動*/
}
#shwtop li a, .dropbtn {
    display: inline-block; /*設置成塊*/
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 14px 16px;
}
/*鼠標移上去，改變背景顏色*/
#shwtop li a:hover, .dropdown:hover .dropbtn { 
    /* 固然顏色你能夠本身改爲本身喜歡的，我仍是挺喜歡藍色的 */
    background-color: blue;
}
#shwtop .dropdown {
    /*
    display:inline-block將對象呈遞爲內聯對象，
    可是對象的內容做爲塊對象呈遞。
    旁邊的內聯對象會被呈遞在同一行內，容許空格。
    */
    display: inline-block;
}
#shwtop .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
#shwtop .dropdown-content a {
    display: block;
    color: black;
    padding: 8px 10px;
    text-decoration:none;
}
#shwtop .dropdown-content a:hover {
    background-color: #a1a1a1;
}
#shwtop .dropdown:hover .dropdown-content{
    display: block;
}

頁腳html部分：

<!-- 更新導航欄的菜單-->
<script>
    $(function(){
            $("#navigator").append('<div id="shwtop" >    <ul style="margin-left:5px;margin-right: 5px;">       <div class="dropdown">            <a href="#" class="dropbtn">後臺管理</a>            <div class="dropdown-content">                <!-- <a class="menu" href="這裏是你文章或隨筆分類的連接地址，本身修改下面同理"> 這裏更改下拉具體內容 </a> -->                <a class="menu" href="http://i.cnblogs.com/Configure.aspx"  target="_blank">GUI配置</a>                <a class="menu" href="http://i.cnblogs.com/posts" target="_blank">博文列表</a>                <a class="menu" href="http://wz.cnblogs.com/" target="_blank">收藏</a>                               <a class="menu" href="http://i.cnblogs.com/Files.aspx" target="_blank">文件</a>   <a class="menu" href="https://i.cnblogs.com/EditGalleries.aspx" target="_blank">相冊</a>          </div>        </div>    </ul></div>');

        $("#navList").append('<li id="nav_home"><a id="enjoy233" rel="nofollow" href="https://ing.cnblogs.com/" target="_blank" title="進入個人閃存">閃存</a></li>');
        $("#navList").append('<li id="nav_follow"><a id="enjoy233" rel="nofollow" href="http://home.cnblogs.com/followees/" target="_blank" title="進入個人關注">我關注</a></li>');          

        $('#navList')[0].children["nav_contact"].innerHTML='<a id="nav_contact" class="menu" rel="nofollow" href="https://msg.cnblogs.com/send/Enjoy233">私信</a>';
        $('#navList')[0].children["nav_rss"].innerHTML='<a id="nav_rss" class="menu" rel="nofollow" href="https://www.cnblogs.com/enjoy233/rss">RSS訂閱</a>';

            //加載圖片
            var ponum1 = $(".postTitle").length;
            var ponum2 = $(".entrylistPosttitle").length;
            if(ponum1!=0)
                articleimg(ponum1);
            if(ponum2!=0)
                entrylistarticleimg(ponum2);
        });
</script>

效果圖:

如需調整請自行修改~

微博秀的嵌入(支持http/https訪問)

參看本人的另外一篇文章當今最全面可用的微博分享組件嵌入方法(親測2019年2月仍有效) - Enjoy233 便可。

效果圖(見本博客左側公告欄):

分享組件的嵌入(支持http/https訪問)

因爲官方的 Baidu Share 的ssl證書已過時，只好找到一個替代鏡像 //static.dmzj.com/baidushare/static/js/shell_v2.js，使得經過https訪問或http訪問本博客均可以看到左下角的分享按鈕~

在頁腳.html中加入以下代碼:

<!-- Baidu Share BEGIN -->
<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare"> 
<span class="bds_more">分享到：</span> 
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空間"></a>
<a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
<a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣網"></a>
<a href="#" class="bds_youdao" data-cmd="youdao" title="分享到有道雲筆記"></a>
<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人網"></a>
<a href="#" class="bds_kaixin001" data-cmd="kaixin001" title="分享到開心網"></a>
<a href="#" class="bds_mail" data-cmd="mail" title="分享到郵件分享"></a>
</div> 
<script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=2883522" ></script> 
<script type="text/javascript" id="bdshell_js"></script> 
<script type="text/javascript"> 
document.getElementById("bdshell_js").src = "//static.dmzj.com/baidushare/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000) 
</script> 
<!-- Baidu Share END -->

官方demo:

分享按鈕-百度分享 (獲取代碼 -> 按嚮導操做，可查看網頁側邊的動態使用效果，也可看到相應代碼。)

效果圖:

打賞功能

本博客基於開源插件 tctip v1.0.3 來實現~

在頁腳.html中插入以下代碼便可:

<!-- tctip 支付讚揚/打賞 -->
<script type="text/javascript" src="//files.cnblogs.com/files/enjoy233/tctip-1.0.3.min.js"></script> <!-- js文件引入 -->
<script>
    new tctip({
        top: '20%',
        button: {
            id: 1,
            type: 'zanzhu',
        },
        list: [
            {
                type: 'alipay',
                qrImg: 'https://files.cnblogs.com/files/enjoy233/Reward_Alipay_Charge.bmp' //替換成本身的支付寶付款碼
            }, {
                type: 'wechat',
                qrImg: 'https://files.cnblogs.com/files/enjoy233/Reward_WX_Charge.bmp' //替換成本身的微信付款碼
            }
        ]
    }).init()
</script>

效果圖:

還看到過一個不錯的方法，親測有效：自制簡易打賞功能 - EritPang .

複製正文文字時自動加版權

確保頁面能成功引入JQuery.js後在頁首html中加入以下代碼:

<script language="javascript" type="text/javascript">
jQuery(document).on('copy', function(e)
{
  var selected = window.getSelection();
  var copyFooter = '<br>---------------------<br>著做權歸做者全部。<br>' 
                        + '商業轉載請聯繫做者得到受權，非商業轉載請註明出處。<br>'
                        + '做者：Bravo Yeung<br> 源地址：' + document.location.href
                        + '<br>來源：博客園cnblogs<br>© 版權聲明：本文爲博主原創文章，轉載請附上博文連接！';
  var copyHolder = $('<div>', {html: selected + copyFooter, style: {position: 'absolute', left: '-99999px'}});

  $('body').append(copyHolder);
  selected.selectAllChildren( copyHolder[0] );
  window.setTimeout(function() {
      copyHolder.remove();
  },0);
});
</script>

當用戶複製文中內容(ctrl+C或鼠標右擊複製)時，會自動加上版權文字，csdn的代碼複製功能以及知乎的內容複製都有此功能。

效果圖:

對正文中的圖片設置懸停放大

很多平臺有個關於圖片的功能：當鼠標懸停在圖片上時，圖片會被放大。本人直接使用css來作了這件事情~

讀者只需將下方代碼貼進頁面css便可~

.post img {
    cursor: pointer;
    transition: all 0.5s;
}
.post img:hover {
    transform: scale(1.3);
}

隱藏博文右下角的"反對"按鈕

只需在頁面css的文本框中加入以下代碼:

.buryit {
    display: none;
}

.comment_bury {
    display: none;
}

效果請見頁面右下角。

本文首發於本人的博客園: https://www.cnblogs.com/enjoy....

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。