..loading
子曰:勿以惡小而不為: 你也可以看懂Blogger的樣版原始碼

2007年8月14日

你也可以看懂Blogger的樣版原始碼


進行Blogger hacks前的必備好習慣

  • 利其器
您可以使用免費的Notepad++,超好用的程式碼撰寫器。會依照屬性的不同自動上色哦。如果你喜歡記事本極致的黑與白,那我也沒有話說。

  • 善用註解
html或是blogger的xml註解可以醬子用
<!-- 像醬子-->

CSS的註解
/* 醬子 */


Javascript更簡單
//醬子

記得,每次做了什麼hack,最好都要在旁邊做上註解。

  • 備份,備份,備份
不僅要備份,最好是開一個測試Blog來搞。



 OK,現在可以開始來讀您的樣版,那麼我以我最新的neotruecolour來做解說。他的樣本原始檔在這裡,請按右鍵下載

 每個樣版都可以分為二部份,head與body。

  • head


 head從<head>開始,至</head>結束(滿北爛的教學)。通常head裡面會有三種東西。
  1. meta:就是開頭一堆囉嗦的xml version="1.0" encoding="UTF-8"什麼鬼的,那通常跟我們沒有關係。
  2. javascript:通常那些偉大的作者都會叫您把他的javascript放在這裡。
  3. sikn:從<b:skin>開始,至</b:skin>結束。這包括了二個,一個是Variable definitions,另一個是CSS。Variable definitions是什麼鬼呢?我稱之「CSS的CSS」,沒錯,該樣版裡CSS的顏色都是在此定義,之後就不用在CSS中定義了。您也可以透過「範本」→「修改字型與顏色」來更改。
 OK,簡單可愛的head部份結束了,接著是邪惡的body部份了。

  • body
 Body裡的東西,就代表了您整個blog的配置,但他用了Blogger特殊的語言,專屬Blogger的XML,所謂的XML就是可延伸的標記語言,換言之要怎麼寫就怎麼寫,因此你會看到一些以前沒看過的東西,譬如:

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Posts' type='HTML'>
<b:includable id='main'>

 如果您看的懂這東西,那您就可以離開了。其實這些東西在Blogger的官方教學都有寫,但好像沒什麼人在看,我這篇文章主要是做個導讀,大家還是要自己去看教學哦,千萬不要丟個網址來,說:我要怎麼改成那樣子。

 首先在hack之前,通常都要展開小裝置範本,這是什麼意思呢?你就把那些東西想成蛤蜊就好,本來蛤蜊是長醬子的<蛤蜊/>,你按一下他就變成醬子<蛤蜊頭></蛤蜊尾>。順便提一下,如果您在hack的過程中出現什麼

我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
XML 錯誤訊息: The element type "b:if" must be terminated by the matching end-tag "".

 那通常都是你少了蛤蜊尾的緣故。

 好低,Blogger的XML主要分為二大類


 小裝置標記的意思,就是指widget以及放widget的地方。
 我稱它為B系列

 B系列的元素有這些。

  • Widget系列。這裡面的東西就是widget的內容。

<b:widget [...屬性...]>
</b:widget>


  • Includable。從字面上來看,就像小叮噹的口袋一樣,所有的widget都要放到Includable裡。

<b:includable id='main' var='thiswidget'>
[在此插入您想要的內容]
</b:includable>



  • Section。有Section,您才可以在修改版面配置裡把widget移來移去的。

<b:section class='sidebar' id='sidebar' preferred='yes'>


  • Loop。在條件下的迴圈,譬如顯示幾篇文章,顯示幾個標籤都是用這個Loop完成。

<b:loop var='i' values='posts'>
<b:include name='post' data='i'/>
</b:loop>


  • Condition。就是if和else。懶的解釋了。

<b:if cond='condition'>
[條件為 true 時要顯示的內容]
<b:else/>
[條件為 false 時要顯示的內容]
</b:if>
 

 上述的B系列是Blog的骨架,而Blog的肉則是由版面配置資料標記Data系列組合起來。

 其中每個Blog一定會有的標記是這個

<data:post.body/>

 這是什麼鬼?您現在看到的這篇文章,就是這個標記產生出來的。您可以在<data:post.body/>前面加一個"hello"(或其它字),您就會發現您blog每篇文章前都會加一個hello(不信你試試)。

 這個data:post.xxx系列是整個Blogger最複雜的地方,也是最好玩的地方。後面的.xxx還可以有什麼呢?

 <data:post.authorLabel/>→這就是"張貼者",如果您不想要用這三個字,您就把這個標記取代成你要的文字。

 最後我們來看這一段標題小裝置的原始碼,首先每個section都要用div包起來,裡面再加上section的記號,加上section後,還要再加includable,裡面才有widget。
 裡面有一段<b:if cond='data:blog.url == data:blog.homepageUrl'>,他的意思是,假如data:blog.url == data:blog.homepageUrl(就是首頁的意思啦),那麼就輸出<data:title/>,這什麼意思呢,就是只顯示標題(但不會有連結)。
 後面又有個<b:else/>,的意思就是,假如不是首頁的話,那就輸出<a expr:href='data:blog.homepageUrl'><data:title/></a>,這是可以連結回首頁的標題。因此我們在看部落格時,首頁的標題沒有連結,但進去其它文章時,又可以按標題回到首頁,就是這樣用的,很簡單吧?
 剩下的都是蛤蜊尾了,就不用理它了。


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='neoTrueColurs (???Y)' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>




 好了,有點懶的寫了,其實Blogger的官方教學都有寫。關於data:post.xxx系列您可以參考這篇文章

 更多資料

 




 



http://ooxxoox.blogspot.com/2007/08/blogger.html

分類標籤:

No comments yet

 
©2007 neoTrueColours by HuiJung and NauticA | Neo Function by Ramani