打造博客園(cnblogs)超級(jí)自定義界面
更新時(shí)間：2009年12月16日 22:02:42 作者：
有部分網(wǎng)友提出想了解一下像我這樣的高度訂制化博客界面是如何做出來的。所以在這里給大家分享一下經(jīng)驗(yàn)。
定制博客界面的核心方法是通過引用我們自己上傳的外部JS，使外部JS的代碼能在當(dāng)前博客頁面上執(zhí)行，從而用這個(gè)JS修改頁面DOM結(jié)構(gòu)（加入新的界面元素，加入引用自定義的CSS，加入新的界面交互功能），然后我們就可以在自己寫的這個(gè)外部JS里任意發(fā)揮了。
在博客園中的博客頁面中引用外部JS的方法：
進(jìn)入博客設(shè)置頁面->設(shè)置->子標(biāo)題，在這里，你可以輸入你博客的一些子標(biāo)題的內(nèi)容，同時(shí)，你其實(shí)還可以輸入如下html:
<script src="XXXX">
XXXX代表你的JS的絕對(duì)URL地址。
所以接下來要做的事是想辦法找個(gè)地方把你的JS上傳上去，然后得到這個(gè)JS的鏈接。正好博客園可以上傳文件：
進(jìn)入博客設(shè)置頁面->文件
在這個(gè)頁面，我們可以上傳我們自己的JS，然后就可以得到格式為http://files.cnblogs.com/[博客地址]/[文件名]的URL，例如我的博客上實(shí)現(xiàn)UI的核心代碼的URL是http://files.cnblogs.com/laynelin/UI.JS
順便多說一句，實(shí)際上要打造復(fù)雜的界面，你可能需要上傳不只一個(gè)JS。（當(dāng)然你也可以考慮到performance原因，將多個(gè)JS合并成一個(gè)文件，然后再把crunch（壓縮）一把。），而且你還需要上傳CSS和圖片。
CSS也可以用和JS同樣的方案上傳。但至于圖片，強(qiáng)烈建議你用寫文章時(shí)用到的CuteEditor里的圖片上傳功能。在那里，可以給圖片建子目錄，還可以一次上傳任意多個(gè)文件，非常適用于涉及圖片很多的頁面定制需求。
說到CSS，由于我們可能會(huì)需要完全重寫原有的博客頁面樣式，所以墻裂推薦大家在設(shè)置博客頁面模板時(shí)選擇“禁用模板CSS”.
OK，剩下的事情就是大家充分發(fā)揮自己的想象力，通過我們自己的JS，打造我們自己的界面結(jié)構(gòu)，并通過自己的CSS和圖片進(jìn)行界面裝飾了。
我會(huì)在后續(xù)文章中陸續(xù)跟大家分享一些技術(shù)細(xì)節(jié)。也歡迎大家留言告訴我大家有哪些想知道的技術(shù)細(xì)節(jié)。
來自:http://www.cnblogs.com/laynelin
在博客園中的博客頁面中引用外部JS的方法：
進(jìn)入博客設(shè)置頁面->設(shè)置->子標(biāo)題，在這里，你可以輸入你博客的一些子標(biāo)題的內(nèi)容，同時(shí)，你其實(shí)還可以輸入如下html:
<script src="XXXX">
XXXX代表你的JS的絕對(duì)URL地址。
所以接下來要做的事是想辦法找個(gè)地方把你的JS上傳上去，然后得到這個(gè)JS的鏈接。正好博客園可以上傳文件：
進(jìn)入博客設(shè)置頁面->文件
在這個(gè)頁面，我們可以上傳我們自己的JS，然后就可以得到格式為http://files.cnblogs.com/[博客地址]/[文件名]的URL，例如我的博客上實(shí)現(xiàn)UI的核心代碼的URL是http://files.cnblogs.com/laynelin/UI.JS
順便多說一句，實(shí)際上要打造復(fù)雜的界面，你可能需要上傳不只一個(gè)JS。（當(dāng)然你也可以考慮到performance原因，將多個(gè)JS合并成一個(gè)文件，然后再把crunch（壓縮）一把。），而且你還需要上傳CSS和圖片。
CSS也可以用和JS同樣的方案上傳。但至于圖片，強(qiáng)烈建議你用寫文章時(shí)用到的CuteEditor里的圖片上傳功能。在那里，可以給圖片建子目錄，還可以一次上傳任意多個(gè)文件，非常適用于涉及圖片很多的頁面定制需求。
說到CSS，由于我們可能會(huì)需要完全重寫原有的博客頁面樣式，所以墻裂推薦大家在設(shè)置博客頁面模板時(shí)選擇“禁用模板CSS”.
OK，剩下的事情就是大家充分發(fā)揮自己的想象力，通過我們自己的JS，打造我們自己的界面結(jié)構(gòu)，并通過自己的CSS和圖片進(jìn)行界面裝飾了。
我會(huì)在后續(xù)文章中陸續(xù)跟大家分享一些技術(shù)細(xì)節(jié)。也歡迎大家留言告訴我大家有哪些想知道的技術(shù)細(xì)節(jié)。
來自:http://www.cnblogs.com/laynelin
您可能感興趣的文章:
相關(guān)文章
ffmpeg安裝及音頻轉(zhuǎn)換指令應(yīng)用
ffmpeg是一套可以用來記錄、轉(zhuǎn)換數(shù)字音頻、視頻,本文主要介紹了ffmpeg安裝及音頻轉(zhuǎn)換指令應(yīng)用,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02
Blazor實(shí)現(xiàn)組件嵌套傳遞值的示例詳解
這篇文章主要為大家詳細(xì)介紹了Blazor實(shí)現(xiàn)組件嵌套傳遞值的相關(guān)知識(shí)，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的可以了解一下2023-02-02
cnpm不是內(nèi)部命令的解決方案：配置環(huán)境變量【推薦】
這篇文章主要介紹了cnpm不是內(nèi)部命令的解決方案：配置環(huán)境變量的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
淺談vscode中task.json和launch.json的關(guān)系
本文主要介紹了淺談vscode中task.json和launch.json的關(guān)系,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
Visual Studio Code (簡稱 VS Code / VSC) 是一款免費(fèi)開源的現(xiàn)代化輕量級(jí)代碼編輯器，這篇文章主要介紹了vscode安裝使用的詳細(xì)教程,需要的朋友可以參考下2020-08-08
今天給大家介紹的這款網(wǎng)頁調(diào)試工具不僅可以調(diào)試簡單的css、html、腳本等簡單的網(wǎng)頁基本信息，它還可以發(fā)送幾乎所有類型的HTTP請(qǐng)求！Postman在發(fā)送網(wǎng)絡(luò)HTTP請(qǐng)求方面可以說是Chrome插件類產(chǎn)品中的代表產(chǎn)品之一2020-11-11
這篇文章主要介紹了使用curl命令行模擬登錄WordPress的方法，本文通過圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-11-11
踩坑記錄關(guān)于"authentication failed "的解決方法
今天給大家分享我的踩坑記錄關(guān)于報(bào)錯(cuò) authentication failed，這個(gè)報(bào)錯(cuò)的原因是“身份驗(yàn)證失敗”，本文給大家分享我的解決方法，感興趣的朋友跟隨小編一起看看吧2023-01-01
elasticsearch如何使用Ngram實(shí)現(xiàn)任意位數(shù)手機(jī)號(hào)搜索
Ngram是一種基于統(tǒng)計(jì)語言模型的算法,Ngram基本思想是將文本里面的內(nèi)容按照字節(jié)大小進(jìn)行滑動(dòng)窗口操作,形成長度是N的字節(jié)片段序列,這篇文章主要介紹了elasticsearch使用Ngram實(shí)現(xiàn)任意位數(shù)手機(jī)號(hào)搜索,需要的朋友可以參考下2024-05-05
一個(gè)30多年編程經(jīng)驗(yàn)的程序員總結(jié)
這篇文章主要介紹了一個(gè)30多年編程經(jīng)驗(yàn)的程序員總結(jié),在我30多年的程序員生涯里,我學(xué)到了不少有用的東西,下面是我這些年積累的經(jīng)驗(yàn)精華,需要的朋友可以參考下2014-09-09