基於Bootstrap的黑色極簡博客園主題


正如你所看到的,這是一個基於Bootstrap的黑色博客元主題。

主要的改進有:

  • 使用時間軸形式展示首頁的博文列表
  • 評論區iMessage風格化
  • 整體風格bootstrap化
  • 響應式設計。

關於時間軸

我的首頁,你可以看到一個時間軸形式的博文列表。這個時間軸效果最初是我在最近參加的一個現場網頁制作比賽中實現的,后經過完善和改進,若感興趣可以移步我的Gist

該時間軸的實現並不復雜,js只負責添加class和節點,所看到的效果全由css完成,

關於博客園主題的定制

雖然我不太喜歡博客園提供的主題,但博客園容許我們自定義header和footer,這意味着我們可以直接插入css和js代碼或引用外部文件,使得我們對博客園的定制有了無限的可能,缺乏的只是我們的想象力。

利用jquery強大的選擇器和dom操作能力,我們可以按自己的意願任意修改頁面html,當html、css、js都可以被定制,還有什么不能做的呢。

需要注意的是,最好將css和js上傳到自己的文件空間再引用,盡管我們可以直接在頁面中插入相應的的代碼,但這樣不利於瀏覽器緩存,並且會有一些限制(博客園后台會對html代碼進行過濾,比如alert會被過濾掉,而外部文件不會)。同樣的,最好不要直接引用其他網站的css或js,而應該下載下來放到自己的文件空間再引用。

關於博客園的代碼高亮

理想的代碼高亮應該是使用<pre>保存,顯示時渲染。博客園代碼高亮的問題在於一旦插入,就直接生成一堆標簽將代碼弄得支離破碎,這樣一來,修改代碼就變得非常麻煩。

prettify是比較理想的代碼高亮插件,官方就提供了多種主題,獨立的css文件讓定制更為方便。

最后的一些問題

我們所看到的博客園文章頁面都不是一次性生成,評論區、邊欄等一些模塊是通過ajax異步加載的。這給我帶來了一些問題,由於我需要用js修改dom,盡管我已經將don操作的時間推遲到了window.loaded,然而通過ajax下載的頁面並不總能在windows.loaded前完成。於是,出現這種情況的時候,我的js會放空,頁面html不會如我所願的被改變。應該慶幸的是,這種情況發生的概率並不高,如果你發現評論區沒有任何改觀,刷新一下就好。

最后的最后

我不是前端攻城獅,但對前端有着很大的興趣,歡迎交流。


免責聲明!

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



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