詳談如何定製本身的博客園皮膚
前言
最近，有不少博客園的朋友給我留言或私信，詢問個人博客背景是如何作的。javascript
不是我敝帚自珍，而是因爲內容較多，一一回復實在是太費勁。沒有及時答覆的朋友，請見諒。css
我在這裏作一次集中式分享，若是有喜歡的內容，儘管拿去。html
Quickstart
若是你僅僅想原封不動的使用本人的定製皮膚，而不想了解實現細節。那麼你只須要完成如下幾個步驟便可，後面的章節能夠忽略。java
（1）進入博客園管理後臺的設置標籤頁node
這個設置頁面下有幾個輸入框容許你添加 html 、css 、js 代碼，博客園會在渲染你的博客頁面時自動加載這些代碼。jquery
- 頁面定製CSS代碼
- 博客側邊欄公告
- 頁首Html代碼
- 頁腳Html代碼
（2）頁面定製CSS代碼git
沒必要添加內容，可是須要勾選 禁用模板默認CSS。程序員
（3）博客側邊欄公告github
添加如下代碼：canvas
<!-- 小老鼠遊戲控件 -->
<div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;" data="https://files.cnblogs.com/files/jingmoxukong/mouse.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="https://files.cnblogs.com/files/jingmoxukong/mouse.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="https://files.cnblogs.com/files/jingmoxukong/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代碼
<!-- 自定製樣式文件 -->
<link rel="stylesheet" href="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.css" />
<!-- 自定製腳本 -->
<script src="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.js"></script>
<!-- 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>
<!-- 背景動畫 -->
<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.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://files.cnblogs.com/files/jingmoxukong/jquery.particlePhysics.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://files.cnblogs.com/files/jingmoxukong/jquery.starfieldTagCloud.min.js" type="text/javascript" charset="utf-8"></script>
（5）點擊保存，完成。
定製博客園 CSS 的原理
爲了幫助理解，說明這些輸入框的做用時，我都截取了瀏覽器開發者工具的截圖。
說明
市場上流行的瀏覽器基本上都支持開發者工具，通常快捷鍵爲
F12。你能夠在 Elements 欄看到你的頁面中添加的元素。
頁面定製CSS代碼
在這裏添加的 css 代碼會被博客園添加到一個臨時 css 文件中，並用於渲染你的博客頁面。
注意
若是勾選 禁用模板默認CSS ，則你選中的博客皮膚的 css 效果將失效。
博客側邊欄公告
在這裏添加代碼會被嵌入到博客園頁面的 sideBar 下。
頁首Html代碼
在這裏添加代碼會被嵌入到博客園頁面的 body 標籤 下。
頁腳Html代碼
在這裏添加代碼會被嵌入到博客園頁面的 body 標籤 下。
說明
從兩個截圖不難看出，在博客園管理後臺的頁首或頁腳輸入框寫入代碼，並沒有區別。
定製細節
我在打造本身的博客園皮膚的過程當中，也是借鑑了不少網友的例子。在這裏分享一下。
說明
下面的內容，須要你瞭解必定的 html + css + js 知識。我會講解如何去實現皮膚定製，可是不會在這裏解釋基礎語法。
獨立控件
小老鼠遊戲動畫
忘記在哪兒學習到的。將如下代碼粘貼到博客側邊欄公告便可。
<div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;" data="https://files.cnblogs.com/files/jingmoxukong/mouse.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="https://files.cnblogs.com/files/jingmoxukong/mouse.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="https://files.cnblogs.com/files/jingmoxukong/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 Corners ，選擇本身鐘意的 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 文件中，搜索以下代碼段，將 a href 中的超連接屬性改成你本人的博客地址，把 "靜默虛空" 改成你本身的博客名稱便可。固然，你也能夠徹底替換掉個人簽名。
$($('#cnblogs_post_body')[len - 1])
.append('<div id=\'signature\'><p>做者：<a href=\'http://www.cnblogs.com/jingmoxukong/\'>靜默虛空</a></br>歡迎任何形式的轉載，但請務必註明出處。</br>限於本人水平，若是文章和代碼有表述不當之處，還請不吝賜教。</p></div>');
帶頭像的評論欄
博客園的評論欄默認不顯示用戶頭像，這樣顯得很是單調。因此我添加了一段定製代碼。
效果圖
自動生成文章目錄
若是你的文章內容較長，有個目錄，能夠幫讀者快速定位感興趣的內容。
效果圖
快捷操做欄
這個也是我從博客園其餘朋友那兒學習的，可是實在想不起出處了。
響應式佈局
我對於博客作了一些簡單的響應式佈局處理。使得讀者在移動端上訪問時不至於有過於糟糕的體驗。
使用 @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;
}
...
效果圖
樣式的美化
剩下的內容就是一些瑣碎的美化細節了。好比我對標題文字增長了陰影效果，表格從新渲染了顏色等等。若是不喜歡，請自行參考個人源碼修改。
資料
- 1. 詳談如何定製自己的博客園皮膚
- 2. 博客園皮膚-我的博客園皮膚設置教程
- 3. 博客園的自定義皮膚
- 4. DIY博客園的博客皮膚
- 5. 博客園皮膚3
- 6. 修改博客園皮膚
- 7. 博客園皮膚美化
- 8. 個人博客園皮膚
- 9. 博客園自定義皮膚
- 10. 博客園皮膚sao操做
- 更多相關文章...
- • XSD 如何使用? - XML Schema 教程
- • 如何僞造ARP響應？ - TCP/IP教程
- • 漫談MySQL的鎖機制
- • Docker容器實戰(八) - 漫談 Kubernetes 的本質
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Appium入門
- 2. Spring WebFlux 源碼分析(2)-Netty 服務器啓動服務流程 --TBD
- 3. wxpython入門第六步（高級組件）
- 4. CentOS7.5安裝SVN和可視化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig對象缺少setMaxIdle、setMaxWaitMillis等方法，問題記錄
- 6. 一步一圖一代碼，一定要讓你真正徹底明白紅黑樹
- 7. 2018-04-12—（重點）源碼角度分析Handler運行原理
- 8. Spring AOP源碼詳細解析
- 9. Spring Cloud（1）
- 10. python簡單爬去油價信息發送到公衆號
- 1. 詳談如何定製自己的博客園皮膚
- 2. 博客園皮膚-我的博客園皮膚設置教程
- 3. 博客園的自定義皮膚
- 4. DIY博客園的博客皮膚
- 5. 博客園皮膚3
- 6. 修改博客園皮膚
- 7. 博客園皮膚美化
- 8. 個人博客園皮膚
- 9. 博客園自定義皮膚
- 10. 博客園皮膚sao操做