打造博客園(cnblogs)超級自定義界面
更新時間：2009年12月16日 22:02:42 作者：
有部分網(wǎng)友提出想了解一下像我這樣的高度訂制化博客界面是如何做出來的。所以在這里給大家分享一下經(jīng)驗。
定制博客界面的核心方法是通過引用我們自己上傳的外部JS，使外部JS的代碼能在當前博客頁面上執(zhí)行，從而用這個JS修改頁面DOM結(jié)構(gòu)（加入新的界面元素，加入引用自定義的CSS，加入新的界面交互功能），然后我們就可以在自己寫的這個外部JS里任意發(fā)揮了。
在博客園中的博客頁面中引用外部JS的方法：
進入博客設(shè)置頁面->設(shè)置->子標題，在這里，你可以輸入你博客的一些子標題的內(nèi)容，同時，你其實還可以輸入如下html:
<script src="XXXX">
XXXX代表你的JS的絕對URL地址。
所以接下來要做的事是想辦法找個地方把你的JS上傳上去，然后得到這個JS的鏈接。正好博客園可以上傳文件：
進入博客設(shè)置頁面->文件
在這個頁面，我們可以上傳我們自己的JS，然后就可以得到格式為http://files.cnblogs.com/[博客地址]/[文件名]的URL，例如我的博客上實現(xiàn)UI的核心代碼的URL是http://files.cnblogs.com/laynelin/UI.JS
順便多說一句，實際上要打造復(fù)雜的界面，你可能需要上傳不只一個JS。（當然你也可以考慮到performance原因，將多個JS合并成一個文件，然后再把crunch（壓縮）一把。），而且你還需要上傳CSS和圖片。
CSS也可以用和JS同樣的方案上傳。但至于圖片，強烈建議你用寫文章時用到的CuteEditor里的圖片上傳功能。在那里，可以給圖片建子目錄，還可以一次上傳任意多個文件，非常適用于涉及圖片很多的頁面定制需求。
說到CSS，由于我們可能會需要完全重寫原有的博客頁面樣式，所以墻裂推薦大家在設(shè)置博客頁面模板時選擇“禁用模板CSS”.
OK，剩下的事情就是大家充分發(fā)揮自己的想象力，通過我們自己的JS，打造我們自己的界面結(jié)構(gòu)，并通過自己的CSS和圖片進行界面裝飾了。
我會在后續(xù)文章中陸續(xù)跟大家分享一些技術(shù)細節(jié)。也歡迎大家留言告訴我大家有哪些想知道的技術(shù)細節(jié)。
來自:http://www.cnblogs.com/laynelin
在博客園中的博客頁面中引用外部JS的方法：
進入博客設(shè)置頁面->設(shè)置->子標題，在這里，你可以輸入你博客的一些子標題的內(nèi)容，同時，你其實還可以輸入如下html:
<script src="XXXX">
XXXX代表你的JS的絕對URL地址。
所以接下來要做的事是想辦法找個地方把你的JS上傳上去，然后得到這個JS的鏈接。正好博客園可以上傳文件：
進入博客設(shè)置頁面->文件
在這個頁面，我們可以上傳我們自己的JS，然后就可以得到格式為http://files.cnblogs.com/[博客地址]/[文件名]的URL，例如我的博客上實現(xiàn)UI的核心代碼的URL是http://files.cnblogs.com/laynelin/UI.JS
順便多說一句，實際上要打造復(fù)雜的界面，你可能需要上傳不只一個JS。（當然你也可以考慮到performance原因，將多個JS合并成一個文件，然后再把crunch（壓縮）一把。），而且你還需要上傳CSS和圖片。
CSS也可以用和JS同樣的方案上傳。但至于圖片，強烈建議你用寫文章時用到的CuteEditor里的圖片上傳功能。在那里，可以給圖片建子目錄，還可以一次上傳任意多個文件，非常適用于涉及圖片很多的頁面定制需求。
說到CSS，由于我們可能會需要完全重寫原有的博客頁面樣式，所以墻裂推薦大家在設(shè)置博客頁面模板時選擇“禁用模板CSS”.
OK，剩下的事情就是大家充分發(fā)揮自己的想象力，通過我們自己的JS，打造我們自己的界面結(jié)構(gòu)，并通過自己的CSS和圖片進行界面裝飾了。
我會在后續(xù)文章中陸續(xù)跟大家分享一些技術(shù)細節(jié)。也歡迎大家留言告訴我大家有哪些想知道的技術(shù)細節(jié)。
來自:http://www.cnblogs.com/laynelin
您可能感興趣的文章:
相關(guān)文章
本文詳細介紹了死鎖，例如死鎖的概念、產(chǎn)生死鎖的條件、如何預(yù)防死鎖等等，有需要的朋友可以自行參考本篇文章，希望對你有所幫助2021-08-08
今天我們就來學(xué)習(xí)github的使用，我們將用它來管理我們的代碼，你會發(fā)現(xiàn)它的好處的，當然是要在本系列教程全部完成之后，所以請緊跟站長的步伐，今天是第一天，我們來學(xué)習(xí)如何在git上建立自己的版本倉庫，并將代碼上傳到倉庫中2015-08-08
chatGPT?deBug解決管理員登入服務(wù)器返回401問題
這篇文章主要介紹了chatGPT?deBug解決管理員登入，服務(wù)器返回401,沒有拿到數(shù)據(jù)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
chatgpt-api是?OpenAI?ChatGPT?的非官方的?Node.js?包裝器，?chatgpt-api不再需要任何瀏覽器破解它使用泄露出來的OpenAI官方ChatGPT?在后臺使用的模型，這篇文章主要介紹了chatgpt-api使用指南【官方泄露版】,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了VS2019中scanf返回值被忽略的問題及其解決方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Elasticsearches通過坐標位置實現(xiàn)對附近人的搜索
這篇文章主要為大家介紹了Elasticsearches使用坐標位置實現(xiàn)對附近人的搜索，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
這篇文章主要為大家介紹了SVN與Git版本控制的優(yōu)缺點差異全面分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
這篇文章主要介紹了油猴腳本開發(fā)詳解+油猴爬蟲腳本實例,油猴安裝,油猴自定義腳本,油猴腳本模板,油猴實戰(zhàn)Ajax,油猴實戰(zhàn)WebSocket通信,需要的朋友可以參考下2024-02-02
本文主要介紹了UTC時間、GMT時間、本地時間、Unix時間戳的具體使用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章介紹了使用Git Bash向GitHub上傳本地項目的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04