我們先來看基本的架構，這是在"展開小裝置範本"前，通常這就是最基本的狀態，在還沒有加入任何widget小元件的原始模樣，如下圖，
大 致分為out-wrapper(整個頁面)、header-wrapper(標頭區)、content-wrapper(主要內容區)、main- wrapper(主文區)、sidebar-wrapper(邊欄區)及footer-wrapper(頁尾區)六大部分，其中content- wrapper是包含了main及sidebar兩區塊，你想在哪個地方插入語法，記得在相對應的部分插入，而勾選展開小裝置範本之後，就會展開全部網站 的html語法架構圖，有興趣的人可以慢慢研究。
初學者如果想認識這一塊，首先要知道的就是
<div id='content'>
程式碼
</div>div 就是division(部分)的簡寫，代表的就是一個區塊，而content就是這個區塊的名稱定義，而且要以</div>代表這個區塊的結 束，一定要兩者並存，你可以看到上圖content-wrapper的結束</div>是在sidebar-wrapper下方，才代表這個 區塊的結束，如果沒有對對配合，少一個或是多一個，都會造成版面的錯亂，讓你無法儲存template，顯示錯誤訊息。
而這個區塊裡面，通常你會看到會裝一些基本的元素，標頭、文章、邊欄、頁尾等等，語法如下：
<b:section class='header' id='header'>指的就是網頁元素，這就是區塊內的配置， 通常最後會搭配一個</b:section>來結束語法，而在這裡面的
<b:widget>， 這是網頁元素裡包裹的小裝置，比如上圖main-wrapper裡的widget就是這個網頁元素的小裝置，就是你的文章，或是一般我們加到邊欄 （sidebar）的東西，比如最新文章或是最新回應等元件，這裡同樣也會需要相對應的結束語法</b:widget>，而這個widget 是可以拖曳的。
像上面footer-wrapper並沒有看到</b:section>，但是我們展開小裝置範本後就會看到。
所以可以了解html語法是以層層包裹的型態為主，一直漸漸往外擴大，構成了一個網頁的產生，這個專有名稱稱為"巢狀結構"。
以標頭區舉例來說明，
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Google Maps (HEAD)' type='Header'/>
</b:section>
</div>先以header-wrapper定義這個div的部份，然後裡面是放header這個網頁元素，裡面放的小裝置就是Header1，同樣的展開小裝置後才會看到結束語法，如</b:widget>。
其實這些相關語法在Blogger官方的說明裡面都有詳細的解說，
可以參考
版面配置的網頁元素標記(介紹section、widget用法)
以下兩篇較高階，建議有基礎後再來研究
版面配置的小裝置標記
版面配置資料標記
而作者通常會修改這個地方，是因為下列幾項原因：
‧ 在每篇文章上放上書籤等收藏的貼紙連結
‧ 相關文章Hacks的使用
‧ 回應區，作者與網友回應顏色或字體的區別
‧ 拿掉原始模版裡的廣告或是貼紙連結
‧ 在展開文章後插入AdSense廣告碼
‧ 放上Google Analystic的程式碼(有人是以新增小工具完成，我是直接加在html裡)
‧ 加上自己設計的區塊
這篇大概到這裡完成，介紹基本架構，較詳細的細節下篇再介紹了。
加入書籤 :
0 意見:
張貼留言