博客園自定義主題樣式


題記

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

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.jsbootstrap),我要引入社會化分享(百度分享jiathis),我要做一些特效(最近特么流行的雪花漫天飛)等等,值得注意的是,最好不要直接在設置頁面的頁腳html代碼加入內嵌腳本,否則會出現一些奇怪的現象,比如alert會被過濾掉,而外部文件不會,因為博客園后台會對html代碼進行一些過濾的處理。完成這些后就可以定制屬於我們自己想要的博客主題了。

值得注意的是:如果你想隱藏某些不想看到的模塊,如日歷模塊,當你在dom就緒時嘗試隱藏時你會發現該元素並沒有隱藏,需要在window onload觸發時再執行相關操作,原因估計是這些模塊本來就被設計好在頁面加載完畢后再加載的,或者是ajax異步加載引起的,具體原因需要探討下。

Last

時間不早了,2014的最后一天還在這寫博客,真苦逼,不管怎樣,都希望大家在新的一年有新的突破,[加油]!

對酒當歌,人生幾何,2015,你好!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM