博客園自定義主題樣式

題記

對於有強迫症的童鞋來講，一個長得不美觀或者不能知足咱們平常的審美需求的頁面，總會有想要改造它的衝動，好吧，讓咱們來調試下博客園提供的默認主題樣式，讓頁面更加清爽宜人，簡潔大氣。

Section One

打開後臺設置界面，進入你的博客首頁，打開調試器（chrome自帶調試器或firebug），看到哪裏不爽的，定位到頁面dom結構的相關元素，開始調試，例如我想改變下body的背景：

其中http://files.cnblogs.com/cyStyle路徑是在後臺文件上傳時的根路徑，你能夠上傳樣式，腳本，壓縮文件等，不過是有大小限制的，而且更新文件時須要注意CDN的緩存。調試完畢後進入設置頁面，在頁面定製CSS代碼框裏輸入你想要的代碼便可，保存便可。返回博客首頁發現body背景已經改變。對於權重不夠的屬性，能夠在屬性值後面加上 !important ，一招制敵~~~

Section Two

根據以上步驟一步步調試，直至達到你的審美觀。當你調試完畢後，你能夠把這些css打包成一個文件而後上傳，在設置頁面的頁首html代碼處引入，如：<link type="text/css" rel="stylesheet" href="(http://files.cnblogs.com/cyStyle/custom.cs" /> 若是你以爲你的樣式足夠能夠替換原來主題提供的樣式了，則能夠在設置頁面裏禁用模板默認CSS。接下來你能夠在設置頁面的博客側邊欄公告處定義一些我的公共信息，例如：

<div class="pageview">歡迎第 <img border="0" src="http://cc.amazingcounters.com/counter.php?i=3182973&c=9549232" width="60" alt="訪客統計" > 個訪客</div>

<p class="para">關於我：<strong>熱衷和關注前端開發的屌絲青年一枚~</strong></p>

<p class="para">博客：<a href="http://hcy2367.github.io/" title="chmyun's blog" target="_blank">http://hcy2367.github.io/</a></p>

<p class="para">聯繫我：<a href="mailto:hcy2367@163.com" title="email">hcy2367@163.com</a></p>

<a href="https://github.com/hcy2367"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>

Section Three

若是你想引入js，則須要發郵件到contact@cnblogs.com申請權限，爲何要引入js？好比我要改變頁面加載後的dom結構，我要加載一些類庫和插件（如代碼高亮插件prettify.js、bootstrap），我要引入社會化分享(百度分享、jiathis)，我要作一些特效（最近特麼流行的雪花漫天飛）等等，值得注意的是，最好不要直接在設置頁面的頁腳html代碼加入內嵌腳本，不然會出現一些奇怪的現象，好比alert會被過濾掉，而外部文件不會，由於博客園後臺會對html代碼進行一些過濾的處理。完成這些後就能夠定製屬於咱們本身想要的博客主題了。

值得注意的是：若是你想隱藏某些不想看到的模塊，如日曆模塊，當你在dom就緒時嘗試隱藏時你會發現該元素並無隱藏，須要在window onload觸發時再執行相關操做，緣由估計是這些模塊原本就被設計好在頁面加載完畢後再加載的，或者是ajax異步加載引發的，具體緣由須要探討下。

Last

時間不早了，2014的最後一天還在這寫博客，真苦逼，無論怎樣，都但願你們在新的一年有新的突破，[加油]！

對酒當歌，人生幾何，2015，你好！