打造博客園(cnblogs)超級(jí)自定義界面
更新時(shí)間:2009年12月16日 22:02:42 作者:
有部分網(wǎng)友提出想了解一下像我這樣的高度訂制化博客界面是如何做出來(lái)的。所以在這里給大家分享一下經(jīng)驗(yàn)。
定制博客界面的核心方法是通過(guò)引用我們自己上傳的外部JS,使外部JS的代碼能在當(dāng)前博客頁(yè)面上執(zhí)行,從而用這個(gè)JS修改頁(yè)面DOM結(jié)構(gòu)(加入新的界面元素,加入引用自定義的CSS,加入新的界面交互功能),然后我們就可以在自己寫的這個(gè)外部JS里任意發(fā)揮了。
在博客園中的博客頁(yè)面中引用外部JS的方法:
進(jìn)入博客設(shè)置頁(yè)面->設(shè)置->子標(biāo)題,在這里,你可以輸入你博客的一些子標(biāo)題的內(nèi)容,同時(shí),你其實(shí)還可以輸入如下html:
<script src="XXXX">
XXXX代表你的JS的絕對(duì)URL地址。

所以接下來(lái)要做的事是想辦法找個(gè)地方把你的JS上傳上去,然后得到這個(gè)JS的鏈接。正好博客園可以上傳文件:
進(jìn)入博客設(shè)置頁(yè)面->文件
在這個(gè)頁(yè)面,我們可以上傳我們自己的JS,然后就可以得到格式為http://files.cnblogs.com/[博客地址]/[文件名]的URL,例如我的博客上實(shí)現(xiàn)UI的核心代碼的URL是http://files.cnblogs.com/laynelin/UI.JS

順便多說(shuō)一句,實(shí)際上要打造復(fù)雜的界面,你可能需要上傳不只一個(gè)JS。(當(dāng)然你也可以考慮到performance原因,將多個(gè)JS合并成一個(gè)文件,然后再把crunch(壓縮)一把。),而且你還需要上傳CSS和圖片。
CSS也可以用和JS同樣的方案上傳。但至于圖片,強(qiáng)烈建議你用寫文章時(shí)用到的CuteEditor里的圖片上傳功能。在那里,可以給圖片建子目錄,還可以一次上傳任意多個(gè)文件,非常適用于涉及圖片很多的頁(yè)面定制需求。
說(shuō)到CSS,由于我們可能會(huì)需要完全重寫原有的博客頁(yè)面樣式,所以墻裂推薦大家在設(shè)置博客頁(yè)面模板時(shí)選擇“禁用模板CSS”.
OK,剩下的事情就是大家充分發(fā)揮自己的想象力,通過(guò)我們自己的JS,打造我們自己的界面結(jié)構(gòu),并通過(guò)自己的CSS和圖片進(jìn)行界面裝飾了。
我會(huì)在后續(xù)文章中陸續(xù)跟大家分享一些技術(shù)細(xì)節(jié)。也歡迎大家留言告訴我大家有哪些想知道的技術(shù)細(xì)節(jié)。
來(lái)自:http://www.cnblogs.com/laynelin
在博客園中的博客頁(yè)面中引用外部JS的方法:
進(jìn)入博客設(shè)置頁(yè)面->設(shè)置->子標(biāo)題,在這里,你可以輸入你博客的一些子標(biāo)題的內(nèi)容,同時(shí),你其實(shí)還可以輸入如下html:
<script src="XXXX">
XXXX代表你的JS的絕對(duì)URL地址。
所以接下來(lái)要做的事是想辦法找個(gè)地方把你的JS上傳上去,然后得到這個(gè)JS的鏈接。正好博客園可以上傳文件:
進(jìn)入博客設(shè)置頁(yè)面->文件
在這個(gè)頁(yè)面,我們可以上傳我們自己的JS,然后就可以得到格式為http://files.cnblogs.com/[博客地址]/[文件名]的URL,例如我的博客上實(shí)現(xiàn)UI的核心代碼的URL是http://files.cnblogs.com/laynelin/UI.JS
順便多說(shuō)一句,實(shí)際上要打造復(fù)雜的界面,你可能需要上傳不只一個(gè)JS。(當(dāng)然你也可以考慮到performance原因,將多個(gè)JS合并成一個(gè)文件,然后再把crunch(壓縮)一把。),而且你還需要上傳CSS和圖片。
CSS也可以用和JS同樣的方案上傳。但至于圖片,強(qiáng)烈建議你用寫文章時(shí)用到的CuteEditor里的圖片上傳功能。在那里,可以給圖片建子目錄,還可以一次上傳任意多個(gè)文件,非常適用于涉及圖片很多的頁(yè)面定制需求。
說(shuō)到CSS,由于我們可能會(huì)需要完全重寫原有的博客頁(yè)面樣式,所以墻裂推薦大家在設(shè)置博客頁(yè)面模板時(shí)選擇“禁用模板CSS”.
OK,剩下的事情就是大家充分發(fā)揮自己的想象力,通過(guò)我們自己的JS,打造我們自己的界面結(jié)構(gòu),并通過(guò)自己的CSS和圖片進(jìn)行界面裝飾了。
我會(huì)在后續(xù)文章中陸續(xù)跟大家分享一些技術(shù)細(xì)節(jié)。也歡迎大家留言告訴我大家有哪些想知道的技術(shù)細(xì)節(jié)。
來(lái)自:http://www.cnblogs.com/laynelin
您可能感興趣的文章:
相關(guān)文章
github版本庫(kù)使用詳細(xì)圖文教程(命令行及圖形界面版)
今天我們就來(lái)學(xué)習(xí)github的使用,我們將用它來(lái)管理我們的代碼,你會(huì)發(fā)現(xiàn)它的好處的,當(dāng)然是要在本系列教程全部完成之后,所以請(qǐng)緊跟站長(zhǎng)的步伐,今天是第一天,我們來(lái)學(xué)習(xí)如何在git上建立自己的版本倉(cāng)庫(kù),并將代碼上傳到倉(cāng)庫(kù)中2015-08-08chatGPT?deBug解決管理員登入服務(wù)器返回401問(wèn)題
這篇文章主要介紹了chatGPT?deBug解決管理員登入,服務(wù)器返回401,沒(méi)有拿到數(shù)據(jù),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05VS2019中scanf返回值被忽略的問(wèn)題及其解決方法
這篇文章主要介紹了VS2019中scanf返回值被忽略的問(wèn)題及其解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04Elasticsearches通過(guò)坐標(biāo)位置實(shí)現(xiàn)對(duì)附近人的搜索
這篇文章主要為大家介紹了Elasticsearches使用坐標(biāo)位置實(shí)現(xiàn)對(duì)附近人的搜索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04SVN與Git版本控制的優(yōu)缺點(diǎn)差異全面分析
這篇文章主要為大家介紹了SVN與Git版本控制的優(yōu)缺點(diǎn)差異全面分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04UTC時(shí)間、GMT時(shí)間、本地時(shí)間、Unix時(shí)間戳的具體使用
本文主要介紹了UTC時(shí)間、GMT時(shí)間、本地時(shí)間、Unix時(shí)間戳的具體使用,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09使用Git Bash向GitHub上傳本地項(xiàng)目
這篇文章介紹了使用Git Bash向GitHub上傳本地項(xiàng)目的方法,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04