你也可以看懂Blogger的樣版原始碼
進行Blogger hacks前的必備好習慣
<!-- 像醬子-->
CSS的註解
/* 醬子 */
Javascript更簡單
//醬子
記得，每次做了什麼hack，最好都要在旁邊做上註解。
OK，現在可以開始來讀您的樣版，那麼我以我最新的neotruecolour來做解說。他的樣本原始檔在這裡，請按右鍵下載。
每個樣版都可以分為二部份，head與body。
head從<head>開始，至</head>結束（滿北爛的教學）。通常head裡面會有三種東西。
如果您看的懂這東西，那您就可以離開了。其實這些東西在Blogger的官方教學都有寫，但好像沒什麼人在看，我這篇文章主要是做個導讀，大家還是要自己去看教學哦，千萬不要丟個網址來，說：我要怎麼改成那樣子。
首先在hack之前，通常都要展開小裝置範本，這是什麼意思呢？你就把那些東西想成蛤蜊就好，本來蛤蜊是長醬子的<蛤蜊/>，你按一下他就變成醬子<蛤蜊頭></蛤蜊尾>。順便提一下，如果您在hack的過程中出現什麼
我們無法剖析您的範本，因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
XML 錯誤訊息： The element type "b:if" must be terminated by the matching end-tag "".
那通常都是你少了蛤蜊尾的緣故。
好低，Blogger的XML主要分為二大類
小裝置標記的意思，就是指widget以及放widget的地方。
我稱它為B系列。
B系列的元素有這些。
上述的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>，這是可以連結回首頁的標題。因此我們在看部落格時，首頁的標題沒有連結，但進去其它文章時，又可以按標題回到首頁，就是這樣用的，很簡單吧？
剩下的都是蛤蜊尾了，就不用理它了。
好了，有點懶的寫了，其實Blogger的官方教學都有寫。關於data:post.xxx系列您可以參考這篇文章。
更多資料
- 利其器
- 善用註解
<!-- 像醬子-->
CSS的註解
/* 醬子 */
Javascript更簡單
//醬子
記得，每次做了什麼hack，最好都要在旁邊做上註解。
- 備份，備份，備份
OK，現在可以開始來讀您的樣版，那麼我以我最新的neotruecolour來做解說。他的樣本原始檔在這裡，請按右鍵下載。
每個樣版都可以分為二部份，head與body。
- head
head從<head>開始，至</head>結束（滿北爛的教學）。通常head裡面會有三種東西。
- meta：就是開頭一堆囉嗦的xml version="1.0" encoding="UTF-8"什麼鬼的，那通常跟我們沒有關係。
- javascript：通常那些偉大的作者都會叫您把他的javascript放在這裡。
- sikn：從<b:skin>開始，至</b:skin>結束。這包括了二個，一個是Variable definitions，另一個是CSS。Variable definitions是什麼鬼呢？我稱之「CSS的CSS」，沒錯，該樣版裡CSS的顏色都是在此定義，之後就不用在CSS中定義了。您也可以透過「範本」→「修改字型與顏色」來更改。
- body
<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系列您可以參考這篇文章。
更多資料
還有一般網頁元素
回覆刪除<h2><data:title/></h2>就是顯示標題的地方 通常錨點都下在這裡...
<div class='widget-content'>就是該網頁元素的內容物..通常Blog存檔的這個部份都很長因為他把三種類型都塞進去了
好複雜>_<
回覆刪除看來blogger之路離我又更遠了一些
我頭暈了...
回覆刪除有看，沒有懂..
非常謝謝校長!!!!
回覆刪除