前言
最近，有很多部落格園的朋友給我留言或私信，詢問我的部落格背景是如何做的。
不是我敝帚自珍，而是由于内容較多，一一回複實在是太費勁。沒有及時答複的朋友，請見諒。
我在這裡做一次集中式分享，如果有喜歡的内容，盡管拿去。
Quickstart
如果你僅僅想原封不動的使用本人的定制皮膚，而不想了解實作細節。那麼你隻需要完成以下幾個步驟即可，後面的章節可以忽略。
（1）進入部落格園管理背景的設定标簽頁
這個設定頁面下有幾個輸入框允許你添加 html 、css 、js 代碼，部落格園會在渲染你的部落格頁面時自動加載這些代碼。
- 頁面定制CSS代碼
- 部落格側邊欄公告
- 頁首Html代碼
- 頁腳Html代碼
（2）頁面定制CSS代碼
不必添加内容，但是需要勾選 禁用模闆預設CSS。
（3）部落格側邊欄公告
添加以下代碼：
<!-- 小老鼠遊戲控件 -->
<div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2F&up_tailColor=E6DEBE&" width="240" height="160"><param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2E&up_tailColor=E6DEBE&"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"></object></div>
<!-- 公告欄時鐘控件 -->
<embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="240" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
<!-- 百度分享欄控件 -->
<script>
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"3","bdPos":"right","bdTop":"105.5"},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document){0[(getElementsByTagName("head")[0]||body).appendChild(createElement("script")).src="http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion="+~(-new Date()/3600000)]};
</script> （4）頁首Html代碼
<!-- fork github 控件 -->
<a href="https://github.com/dunwu" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<!-- 自定制樣式檔案以及腳本 -->
<script src="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.js"></script>
<link rel="stylesheet" href="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.css" />
<!-- 背景動畫 -->
<canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
<script src="https://files.cnblogs.com/files/jingmoxukong/canvas-nest.min.js"></script>
<!-- 标簽雲相關庫 -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://files.cnblogs.com/files/jingmoxukong/jquery.engine3D.js" type="text/javascript" charset="utf-8"></script>
<script src="https://files.cnblogs.com/files/jingmoxukong/jquery.particlePhysics.js" type="text/javascript" charset="utf-8"></script>
<script src="https://files.cnblogs.com/files/jingmoxukong/jquery.starfieldTagCloud.js" type="text/javascript" charset="utf-8"></script> （5）點選儲存，完成。
定制部落格園 CSS 的原理
為了幫助了解，說明這些輸入框的作用時，我都截取了浏覽器開發者工具的截圖。
說明
市場上流行的浏覽器基本上都支援開發者工具，一般快捷鍵為
。你可以在 Elements 欄看到你的頁面中添加的元素。F12
在這裡添加的 css 代碼會被部落格園添加到一個臨時 css 檔案中，并用于渲染你的部落格頁面。
注意
如果勾選 禁用模闆預設CSS ，則你選中的部落格皮膚的 css 效果将失效。
在這裡添加代碼會被嵌入到部落格園頁面的 sideBar 下。
在這裡添加代碼會被嵌入到部落格園頁面的 body 标簽 下。
從兩個截圖不難看出，在部落格園管理背景的頁首或頁腳輸入框寫入代碼，并無差別。
定制細節
我在打造自己的部落格園皮膚的過程中，也是借鑒了很多網友的例子。在這裡分享一下。
下面的内容，需要你了解一定的 html + css + js 知識。我會講解如何去實作皮膚定制，但是不會在這裡解釋基礎文法。
獨立控件
小老鼠遊戲動畫
忘記在哪兒學習到的。将以下代碼粘貼到部落格側邊欄公告即可。
<div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2F&up_tailColor=E6DEBE&" width="240" height="160"><param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2E&up_tailColor=E6DEBE&"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"></object></div> 動畫時鐘
效果圖
我在
http://www.cnblogs.com/liyunhua/p/4558480.html學習來的。将以下代碼粘貼到部落格側邊欄公告即可。
<embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="240" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> 百度分享欄
既然選擇寫部落格，自然希望被更多人看到自己的文章。是以，添加一個分享欄，使得訪客可以輕松将你的部落格分享到各個社交平台是一個不錯的功能。
進入
百度分享官方頁面，按照導航提示。
選擇功能 > 設定按鈕 > 設定圖檔按鈕 > 擷取代碼。
将代碼粘貼到部落格園管理背景的部落格側邊欄公告即可。
Github 角
作為程式員，總該有個 github 賬戶吧。可以使用
GitHub Corners将部落格和 Github 賬戶關聯起來。
點選右上角，就可以跳轉到 Github，還是挺帥氣的。
使用方式如下：
，選擇自己鐘意的 Github 角樣式，拷貝對應的代碼。記得将超連結
a
的
href
屬性替換為你的 github 位址。
然後将代碼粘貼到頁首Html代碼。
标簽雲
我從
http://www.cnblogs.com/justinw/archive/2010/06/17/1759661.html學習的。
粘貼以下代碼到頁首Html代碼
<!-- 标簽雲相關庫 -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://files.cnblogs.com/files/jingmoxukong/jquery.engine3D.js" type="text/javascript" charset="utf-8"></script>
<script src="https://files.cnblogs.com/files/jingmoxukong/jquery.particlePhysics.js" type="text/javascript" charset="utf-8"></script>
<script src="https://files.cnblogs.com/files/jingmoxukong/jquery.starfieldTagCloud.js" type="text/javascript" charset="utf-8"></script>
<!-- 定時器 -->
<script>
function customTimer(inpId, fn) {
if ($(inpId).length) {
fn();
}
else {
var intervalId = setInterval(function () {
if ($(inpId).length) { //如果存在了
clearInterval(intervalId); // 則關閉定時器
customTimer(inpId, fn); //執行自身
}
}, 100);
}
}
function generateTagClouds() {
$('.catListTag>ul').wrap('<div class=\'wrap\' ></div>').parent().css({ 'width': '240px', 'height': '240px' });
var options = {
'range': [-200, 300],
'gravity': -10,
'xPos': 0.5,
'yPos': 0.5,
'gravityVector': [0, 0, 1],
'interval': 100,
'hoverGravityFactor': 0
};
$('div.wrap').starfieldTagCloud(options);
}
$(function () {
...
customTimer('.catListTag', generateTagClouds);
...
});
</script> 背景動畫
效果圖就不上了，各位看官請直接看我的部落格背景動畫，還是挺有趣的吧。
我的背景動畫是我在閑逛 Github 時找到的動畫效果。其原理就是基于 HTML5 新特性 canvas，渲染的動畫效果。有興趣可以通路一下：
動畫庫原位址使用方法：
粘貼以下代碼到頁首Html代碼：
<!-- 背景動畫 -->
<canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
<script src="https://files.cnblogs.com/files/jingmoxukong/canvas-nest.min.js"></script> 這段代碼的意思就是定義一個 canvas 元素，然後使用我下載下傳的 canvas-nest.min.js 庫檔案去渲染動畫。
動态标題
閑逛 codepen 時找到的一個動态文字效果：
codepen上的動畫文字效果，覺得還挺炫的。我做了一個簡單的移植。
使用方式：粘貼如下代碼到頁首Html代碼即可。
<script src="https://files.cnblogs.com/files/jingmoxukong/title.min.js"></script>
<link rel="stylesheet" href="https://files.cnblogs.com/files/jingmoxukong/title.min.css" /> 以上引用檔案被我壓縮了，源碼在我的 Github 上：
如果你也想使用這種動态标題，需要對源碼做一些修改
// 為了渲染 cavans 效果的标題，生成一個 title 清單
function generateBlogTitle() {
var root=document.createElement("div");
root.id='ui';
for (var i=0; i < 50; i++) {
var node=document.createElement("div");
node.className='text';
node.innerHTML='靜默虛空';
root.appendChild(node);
}
document.getElementById("blogTitle").appendChild(root);
var subTitle=document.createElement("h2");
subTitle.innerHTML='Talk is cheap, show me the code.';
document.getElementById("blogTitle").appendChild(subTitle);
} 将上面代碼中的
node.innerHTML='靜默虛空';
替換為你的主标題；
将
subTitle.innerHTML='Talk is cheap, show me the code.';
替換為你的子标題。
另外，需要将部落格管理背景的主标題、子标題清空。
文章内容樣式定制
有關文章内容的樣式定制，我都寫入了 cnblog.js 和 cnblog.css。當然，為了提高通路速度，這兩個檔案被我壓縮了。
使用方式：添加以下代碼到頁首Html代碼
<!-- 自定制樣式檔案以及腳本 -->
<script src="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.js"></script>
<link rel="stylesheet" href="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.css" /> 由于，我實在是懶得一一講解代碼，是以僅在下面羅列這兩個檔案支援的特性。如果想在我的源碼基礎上作一些修改，可以在這裡通路源碼：
cnblog.js cnblog.css帶頭像的評論欄
部落格園的評論欄預設不顯示使用者頭像，這樣顯得非常單調。是以我添加了一段定制代碼。
自動生成文章目錄
如果你的文章内容較長，有個目錄，可以幫讀者快速定位感興趣的内容。
快捷操作欄
這個也是我從部落格園其他朋友那兒學習的，但是實在想不起出處了。
響應式布局
我對于部落格做了一些簡單的響應式布局處理。使得讀者在移動端上通路時不至于有過于糟糕的體驗。
使用
@media
查詢，你可以針對不同的媒體類型定義不同的樣式。
@media
可以針對不同的螢幕尺寸設定不同的樣式，特别是如果你需要設定設計響應式的頁面，
@media
是非常有用的。
當你重置浏覽器大小的過程中，頁面也會根據浏覽器的寬度和高度重新渲染頁面。
@media only screen and (max-width: 736px) {
#navigator {
width: 90%;
margin: auto;
float: none;
}
#mainContent {
width: 90%;
margin: auto;
float: none;
}
#sideBar {
width: 90%;
margin: auto;
float: none;
}
... 樣式的美化
剩下的内容就是一些瑣碎的美化細節了。比如我對标題文字增加了陰影效果，表格重新渲染了顔色等等。如果不喜歡，請自行參考我的源碼修改。