當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端小白也能快速学会的博客园博客美化全攻略

發布時間：2023/12/15 HTML 26 豆豆

生活随笔收集整理的這篇文章主要介紹了前端小白也能快速学会的博客园博客美化全攻略小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

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

美化方法論簡介

一般而言，需要選一個默認的skin，然后在該基礎上調整。

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

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

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

寬屏模版：

SimpleMemory

Minyx2_Lite

lessIsMore

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，例如：

補充完整前綴：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部分：

js部分:

如果需要修改自動完成的下拉選項，修改變量availableTags的值即可見效。

html部分：

效果圖:

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

先登錄網易云音樂網頁版，搜索到想要的音樂，然后點擊"生成外鏈播放器"即可得到相應的html代碼。

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

或

參數說明：

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

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

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

參數說明

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

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

效果圖:

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

頁首html需要添加

效果見本頁面右上角。

如果想對該圖標進行更多顏色或位置的設置，請參考：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標簽即能實現文字的滾動

效果圖:

在公告欄加入自己的社交網絡賬號 - 圖片鏈接

可以將自己不同社交網絡的賬號放在同一個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>

效果圖:

對于知乎，可以這樣寫更詳細些：

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

將其用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); }

然后將如下代碼貼進公告中~

效果圖:

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

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

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

效果圖:

參考:

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

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

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

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

生成的html代碼如下：

最后將該代碼加入到公告欄的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部分：

效果圖:

"自動移動的目錄"功能

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

然后將下方代碼貼進頁腳html.

JS部分:

效果圖:

改進評論的顯示樣式

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

純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來實現了。

禁用頁面的"選中復制"功能

在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="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中加入如下代碼:

<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&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>

官方demo:

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

效果圖:

打賞功能

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

在頁腳.html中插入如下代碼即可:

<script type="text/javascript" src="//files.cnblogs.com/files/enjoy233/tctip-1.0.3.min.js"></script>  <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中加入如下代碼:

當用戶復制文中內容(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....

總結

以上是生活随笔為你收集整理的前端小白也能快速学会的博客园博客美化全攻略的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： SAP管理员SAP*和DDIC被锁定后如
下一篇： Linux-- 查看文件 more与其它