當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

详谈如何定制自己的博客园皮肤【转】

發布時間：2023/12/6 编程问答 65 豆豆

生活随笔收集整理的這篇文章主要介紹了详谈如何定制自己的博客园皮肤【转】小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

轉自：http://www.cnblogs.com/jingmoxukong/p/7826982.html

前言
Quickstart
定制博客園 CSS 的原理
頁面定制CSS代碼
博客側邊欄公告
頁首Html代碼
頁腳Html代碼
定制細節
獨立控件
小老鼠游戲動畫
動畫時鐘
百度分享欄
Github 角
標簽云
背景動畫
動態標題
文章內容樣式定制
帶頭像的評論欄
自動生成文章目錄
快捷操作欄
響應式布局
樣式的美化
資料

前言

最近，有很多博客園的朋友給我留言或私信，詢問我的博客背景是如何做的。

不是我敝帚自珍，而是由于內容較多，一一回復實在是太費勁。沒有及時答復的朋友，請見諒。

我在這里做一次集中式分享，如果有喜歡的內容，盡管拿去。

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代碼

<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 的原理

為了幫助理解，說明這些輸入框的作用時，我都截取了瀏覽器開發者工具的截圖。

說明

市場上流行的瀏覽器基本上都支持開發者工具，一般快捷鍵為 F12。你可以在 Elements 欄看到你的頁面中添加的元素。

頁面定制CSS代碼

在這里添加的 css 代碼會被博客園添加到一個臨時 css 文件中，并用于渲染你的博客頁面。

注意

如果勾選禁用模板默認CSS ，則你選中的博客皮膚的 css 效果將失效。

博客側邊欄公告

在這里添加代碼會被嵌入到博客園頁面的 sideBar 下。

頁首Html代碼

在這里添加代碼會被嵌入到博客園頁面的 body 標簽下。

頁腳Html代碼

在這里添加代碼會被嵌入到博客園頁面的 body 標簽下。

說明

從兩個截圖不難看出，在博客園管理后臺的頁首或頁腳輸入框寫入代碼，并無區別。

定制細節

我在打造自己的博客園皮膚的過程中，也是借鑒了很多網友的例子。在這里分享一下。

說明

下面的內容，需要你了解一定的 html + css + js 知識。我會講解如何去實現皮膚定制，但是不會在這里解釋基礎語法。

獨立控件

小老鼠游戲動畫

忘記在哪兒學習到的。將以下代碼粘貼到博客側邊欄公告即可。

動畫時鐘

效果圖

我在 http://www.cnblogs.com/liyunhua/p/4558480.html 學習來的。將以下代碼粘貼到博客側邊欄公告即可。

百度分享欄

既然選擇寫博客，自然希望被更多人看到自己的文章。所以，添加一個分享欄，使得訪客可以輕松將你的博客分享到各個社交平臺是一個不錯的功能。

效果圖

進入百度分享官方頁面，按照導航提示。

選擇功能 > 設置按鈕 > 設置圖片按鈕 > 獲取代碼。

將代碼粘貼到博客園管理后臺的博客側邊欄公告即可。

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代碼即可。

以上引用文件被我壓縮了，源碼在我的 Github 上：

title.js
title.css

如果你也想使用這種動態標題，需要對源碼做一些修改

// 為了渲染 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

帶頭像的評論欄

博客園的評論欄默認不顯示用戶頭像，這樣顯得非常單調。所以我添加了一段定制代碼。

效果圖

js 源碼

自動生成文章目錄

如果你的文章內容較長，有個目錄，可以幫讀者快速定位感興趣的內容。

效果圖

快捷操作欄

這個也是我從博客園其他朋友那兒學習的，但是實在想不起出處了。

響應式布局

我對于博客做了一些簡單的響應式布局處理。使得讀者在移動端上訪問時不至于有過于糟糕的體驗。

使用 @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; } ...

效果圖

樣式的美化

剩下的內容就是一些瑣碎的美化細節了。比如我對標題文字增加了陰影效果，表格重新渲染了顏色等等。如果不喜歡，請自行參考我的源碼修改。

資料

github-corners

canvas-nest

codepen上的動畫文字效果

美化博客園界面（讓您的博客更加賞心悅目）希望對您有用

jQuery]3D效果的標簽云

總結

以上是生活随笔為你收集整理的详谈如何定制自己的博客园皮肤【转】的全部內容，希望文章能夠幫你解決所遇到的問題。

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