前端小白也能快速学会的博客园博客美化全攻略
生活随笔
收集整理的這篇文章主要介紹了
前端小白也能快速学会的博客园博客美化全攻略
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
前端小白也能快速學(xué)會的博客園博客美化全攻略
A呦V，博客園er的自我修養(yǎng)是什么？第一條，別只顧收藏和偷師呀，記得點"推薦"或關(guān)注本人喔~
美化方法論簡介
一般而言，需要選一個默認(rèn)的skin，然后在該基礎(chǔ)上調(diào)整。
官方介紹：
博客皮膚模板 http://skintemplate.cnblogs.com/
官方文檔 - 【博客園skin開發(fā)文檔 】:
https://docs.qq.com/sheet/DZF...
寬屏模版：
SimpleMemory
Minyx2_Lite
lessIsMore
BlueSky
博客園布局的組成及其對應(yīng)關(guān)系(下方一圖來自于網(wǎng)絡(luò)):
準(zhǔn)備工作
附該美化過程的github項目:
yanglr/Beautify-cnblogs: Beautify-cnblogs
歡迎fork或star~
本博客的所有代碼在此github項目的src文件夾中~
源碼使用步驟：
js權(quán)限申請
登陸后依次點擊“我的博客” → “管理” → “設(shè)置”，在下拉后找到“博客側(cè)邊欄公告”，后方有一個“申請js權(quán)限”。
或者也可進(jìn)博客園園子頁面(https://home.cnblogs.com/feed...)，發(fā)狀態(tài)@博客園團隊，申請開通js權(quán)限。
也可發(fā)個郵件到contact@cnblogs.com申請js權(quán)限。
申請時內(nèi)容模板已為你備好:
尊敬的博客園管理員：本人請求申請開通js權(quán)限，希望能夠把博客修飾的漂亮點，點綴自定義js插件效果，希望管理員可以批準(zhǔn)，多謝~
提交完申請，會彈出提示:
JS權(quán)限申請已提交，待審核。
剩下的就是耐心等待了，一般來說挺快就會通過。如果設(shè)置頁面上公告欄標(biāo)題右側(cè)不存在“申請js權(quán)限”，說明已成功開通js權(quán)限。
如何模仿一個博客園的自定義風(fēng)格(樣式css+動態(tài)效果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引用到自己的博客中，即可進(jìn)行大概樣子的模仿，其他部分需要細(xì)調(diào)。
markdown樣式自定義
默認(rèn)markdown狀態(tài)下，代碼中的字比較小。
/* 文章標(biāo)題樣式(這個不是markdown里的標(biāo)題) */ #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; }/* 標(biāo)題樣式 */ #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; } /* 標(biāo)題樣式設(shè)置結(jié)束 *//* 去除雙下劃線斜體樣式 */ 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那樣的主題，可參考：
如何自定義博客園代碼高亮主題，同時分享自己使用的黑色主題 - 我是小茗同學(xué) - 博客園 .
在頁面頂部添加"自定義搜索"功能
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;/*設(shè)置顯示在當(dāng)前頁面的上一層*/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", "微軟系列技術(shù)","Sublime", "Git","Visual Studio Code","Eclipse","C#開發(fā)", "C++開發(fā)", "Java開發(fā)","PHP開發(fā)","Python開發(fā)","Web前端開發(fā)","Windows Forms","WPF","計算機數(shù)學(xué)","瀏覽器插件","軟件推薦","算法實踐","專業(yè)學(xué)習(xí)","Leetcode","知乎","Bravo Yeung","legege007","enjoy233","數(shù)學(xué)","內(nèi)容太長，顯示其中的一部分"];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]; //彈出框里的每一條內(nèi)容var newDivNode = $("<div>").attr("id", i); //設(shè)置每個節(jié)點的id值newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;");newDivNode.html(wordNode).appendTo(autoNode); //追加到彈出框//鼠標(biāo)移入高亮，移開不高亮newDivNode.mouseover(function () {if (highlightindex != -1) { //原來高亮的節(jié)點要取消高亮（是-1就不需要了）autoNode.children("div").eq(highlightindex).css("background-color", "white");}//記錄新的高亮節(jié)點索引highlightindex = $(this).attr("id");$(this).css("background-color", "#ebebeb");});newDivNode.mouseout(function () {$(this).css("background-color", "white");});//鼠標(biāo)點擊文字上屏newDivNode.click(function () {//取出高亮節(jié)點的文本內(nèi)容var comText = autoNode.hide().children("div").eq(highlightindex).text();highlightindex = -1;//文本框中的內(nèi)容變成高亮節(jié)點的內(nèi)容$("#" + search).val(comText);})if (carlist.length > 0) { //如果返回值有內(nèi)容就顯示出來autoNode.show();} else { //服務(wù)器端無內(nèi)容返回 那么隱藏彈出框autoNode.hide();//彈出框隱藏的同時，高亮節(jié)點索引值也變成-1highlightindex = -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> <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="園內(nèi)搜索"> </div>效果圖:
在頁面頂部添加"音樂播放器"(Flash)播放背景音樂
先登錄網(wǎng)易云音樂網(wǎng)頁版，搜索到想要的音樂，然后點擊"生成外鏈播放器"即可得到相應(yīng)的html代碼。
表現(xiàn)形式一：單曲播放 (type = 1)
<embed src="http://music.163.com/outchain/player?type=0&id=26237342&auto=0&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>參數(shù)說明：
播放器可修改參數(shù)：width=100% #自適應(yīng)寬度, 本博客使用了固定寬度320
height=66 #根據(jù)自己需要來改
sid=26237342 # 此數(shù)字是歌曲的ID http://music.163.com/#/song?i...
auto=0 # 0表示不自動播放，1表示自動播放
表現(xiàn)形式二：列表播放 (type = 0)
<embed src="https://music.163.com/outchain/player?type=0&id=78413764&auto=0&height=430" width="100%" height="450" frameborder="no" marginwidth="0" marginheight="0"></embed>當(dāng)然該url中的https:也可刪掉。
參數(shù)說明
播放器可修改參數(shù)：width=100% # 自適應(yīng)寬度
height=450 # 根據(jù)自己的需要修改
id=34238509 # 此數(shù)字是歌曲列表頁的ID, 例如：http://music.163.com/#/playli...
auto=0 # 0表示不自動播放，1表示自動播放
將該代碼貼進(jìn)頁首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"圖標(biāo)
頁首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>效果見本頁面右上角。
如果想對該圖標(biāo)進(jìn)行更多顏色或位置的設(shè)置，請參考：GitHub Ribbons - The GitHub Blog.
為導(dǎo)航欄設(shè)置漸變背景色
/* 頭部 */ #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標(biāo)簽即能實現(xiàn)文字的滾動
<marquee><a href="#"><font color="blue" size="4">You will make it! </marquee>效果圖:
在公告欄加入自己的社交網(wǎng)絡(luò)賬號 - 圖片鏈接
可以將自己不同社交網(wǎng)絡(luò)的賬號放在同一個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>效果圖:
對于知乎，可以這樣寫更詳細(xì)些：
<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&A sites" title="profile for Bravo Yeung on Stack Exchange, a network of free, community-driven Q&A sites" /></a>將其用div包起來，放進(jìn)公告.html即可見效。
在公告欄添加一個能旋轉(zhuǎn)的rss圖標(biāo)
先將相應(yīng)的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); }然后將如下代碼貼進(jìn)公告中~
<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達(dá)人 Chabudai，初發(fā)表于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設(shè)置、博客側(cè)欄代碼 - 曹杰峰的博客
ps: iOS移動端用默認(rèn)瀏覽器打開看不到效果很正常，這個是flash做的，蘋果的產(chǎn)品基本上都不直接支持flash了，iOS上安裝一個Chrome瀏覽器倒是可以正常打開的~
在公共欄添加"站點統(tǒng)計"功能
打開網(wǎng)站：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彈窗)
實現(xiàn)的基本原理:
onclick = "window.open()", target = popUpWindow此功能的特色在于用戶搜索之后，搜索結(jié)果頁面并不會影響到原博客頁面，而是在彈出的獨立窗口顯示，而且很容易擴展出很多其他站點的搜索功能。
在公告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;" />   <input type="button" class="btn_my_zzk" value="站內(nèi)搜索" 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;" />   <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>然后將下方代碼貼進(jìn)頁腳html.
JS部分:
<script language="javascript" type="text/javascript"> //生成目錄索引列表 function GenerateContentList() {var jquery_h3_list = $('#cnblogs_post_body h4');//如果你的章節(jié)標(biāo)題不是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>效果圖:
改進(jìn)評論的顯示樣式
這里我索性改成了熟悉的微信聊天的樣式。
純css實現(xiàn):
.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博客后臺提供了"鏈接"功能，這個就是用來添加友情鏈接的。
設(shè)置方法(見下圖):
編輯分類 -> 添加鏈接，設(shè)置好后公告欄上會顯示相關(guān)內(nèi)容，不過可能會有延時，需要等一會。
效果圖:
"博客簽名"功能
雖然cnblogs博客后臺提供了"博客簽名"功能，測試發(fā)現(xiàn)該該方法實現(xiàn)的博客簽名在IE中打開時不顯示，只好改為用跨瀏覽器的JQuery來實現(xiàn)了。
<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>版權(quán)聲明：本文為博主原創(chuàng)或轉(zhuǎn)載文章，歡迎轉(zhuǎn)載，<b>但轉(zhuǎn)載文章之后必須在文章頁面明顯位置注明出處</b>，否則保留追究法律責(zé)任的權(quán)利。</div>'); }); </script>禁用頁面的"選中復(fù)制"功能
在css中進(jìn)行相應(yīng)的設(shè)置，只需將下方代碼貼入"頁面css"文本框即可。
/* 禁止頁面，選中 復(fù)制 */ 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; }綜合考慮后，這種處理方式并不太友好，于是采用了后文中的"復(fù)制博客內(nèi)容時自動加版權(quán)說明"。
不顯示底部廣告
在css中進(jìn)行相應(yīng)的設(shè)置，只需將下方代碼貼入"頁面css"文本框即可。
#ad_t2,#cnblogs_c1,#under_post_news,#cnblogs_c2,#under_post_kb {display:none; !important }修改導(dǎo)航欄(修改部分鏈接的文字 + 增加下拉菜單)
css部分:
/* 定制自己導(dǎo)航欄的樣式 */ #shwtop ul {margin: 0;padding: 0;list-style-type: none; /*去除li前的標(biāo)注*/background-color: #333;overflow: hidden; /*隱藏溢出的部分，保持一行*/ } #shwtop li {float: left; /*左浮動*/ } #shwtop li a, .dropbtn {display: inline-block; /*設(shè)置成塊*/color: white;text-align: center;text-decoration: none;padding: 14px 16px; } /*鼠標(biāo)移上去，改變背景顏色*/ #shwtop li a:hover, .dropdown:hover .dropbtn { /* 當(dāng)然顏色你可以自己改成自己喜歡的，我還是挺喜歡藍(lán)色的 */background-color: blue; } #shwtop .dropdown {/*display:inline-block將對象呈遞為內(nèi)聯(lián)對象，但是對象的內(nèi)容作為塊對象呈遞。旁邊的內(nèi)聯(lián)對象會被呈遞在同一行內(nèi)，允許空格。*/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部分：
<!-- 更新導(dǎo)航欄的菜單--> <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="這里是你文章或隨筆分類的鏈接地址，自己修改下面同理"> 這里更改下拉具體內(nèi)容 </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="進(jìn)入我的閃存">閃存</a></li>');$("#navList").append('<li id="nav_follow"><a id="enjoy233" rel="nofollow" href="http://home.cnblogs.com/followees/" target="_blank" title="進(jìn)入我的關(guān)注">我關(guān)注</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>效果圖:
如需調(diào)整請自行修改~
微博秀的嵌入(支持http/https訪問)
參看本人的另一篇文章 當(dāng)今最全面可用的微博分享組件嵌入方法(親測2019年2月仍有效) - Enjoy233 即可。
效果圖(見本博客左側(cè)公告欄):
分享組件的嵌入(支持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="分享到豆瓣網(wǎng)"></a> <a href="#" class="bds_youdao" data-cmd="youdao" title="分享到有道云筆記"></a> <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人網(wǎng)"></a> <a href="#" class="bds_kaixin001" data-cmd="kaixin001" title="分享到開心網(wǎng)"></a> <a href="#" class="bds_mail" data-cmd="mail" title="分享到郵件分享"></a> </div> <script type="text/javascript" id="bdshare_js" data="type=tools&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:
分享按鈕-百度分享 (獲取代碼 -> 按向?qū)Р僮?#xff0c;可查看網(wǎng)頁側(cè)邊的動態(tài)使用效果，也可看到相應(yīng)代碼。)
效果圖:
打賞功能
本博客基于開源插件 tctip v1.0.3 來實現(xiàn)~
在頁腳.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 .
復(fù)制正文文字時自動加版權(quán)
確保頁面能成功引入JQuery.js后在頁首html中加入如下代碼:
<script language="javascript" type="text/javascript"> jQuery(document).on('copy', function(e) {var selected = window.getSelection();var copyFooter = '<br>---------------------<br>著作權(quán)歸作者所有。<br>' + '商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。<br>'+ '作者：Bravo Yeung<br> 源地址：' + document.location.href+ '<br>來源：博客園cnblogs<br>? 版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！';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>當(dāng)用戶復(fù)制文中內(nèi)容(ctrl+C或鼠標(biāo)右擊復(fù)制)時，會自動加上版權(quán)文字，csdn的代碼復(fù)制功能以及知乎的內(nèi)容復(fù)制都有此功能。
效果圖:
對正文中的圖片設(shè)置懸停放大
不少平臺有個關(guān)于圖片的功能：當(dāng)鼠標(biāo)懸停在圖片上時，圖片會被放大。本人直接使用css來做了這件事情~
讀者只需將下方代碼貼進(jìn)頁面css即可~
.post img {cursor: pointer;transition: all 0.5s; } .post img:hover {transform: scale(1.3); }隱藏博文右下角的"反對"按鈕
只需在頁面css的文本框中加入如下代碼:
.buryit {display: none; }.comment_bury {display: none; }效果請見頁面右下角。
本文首發(fā)于本人的博客園: https://www.cnblogs.com/enjoy....
總結(jié)
以上是生活随笔為你收集整理的前端小白也能快速学会的博客园博客美化全攻略的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SAP管理员SAP*和DDIC被锁定后如
- 下一篇： 前端面试问题汇总