在看過<head>裡面的包裝後,接下來要看的就是比較複雜的身體了。而這篇起海芋亦慢慢地帶您透視blogger的身體部份,讓您打通任督二脈,輕鬆看懂程式架構。

 

一開始,我們可以把我們的網頁想像成一個畫布,把我們所要的地方切割出來後,我們才比較好對程式下手,如羊男所生產的Gadget,是將畫布切成好幾塊,但這一切還是要看需求而定。

 

但是,我們如何知道要怎樣切比較好呢?一般來說,我們會先將身體切為「頭」、「中」、「尾」這三個大部份,而最外層的,通常都是以「outer-wrapper」這個CSS來包裝,如下程式碼:

<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<div id='header-wrapper'>
<div id='content-wrapper'>
<div id='footer-wrapper'>

 

在這裡,建議大家用Notepad++的原因是,他可以將程式碼收納的很漂亮,這樣我們就能專心地編輯某一個部份了,如下圖:

 

接著,我們開始來講解這三個主要部份。「header-wrapper」通常是指「頭」的部份,而「content-wrapper」則是指身體的中間,至於「footer-wrapper」,則是指身體的腳。

 

我們再看到<div id=’header-wrapper’>這個程式片段,以海芋所套用的blogger預設範本,他是將他寫成以下的片段。

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
</div>

注意,不管是「頭」、「腳」或是「身體」,基本上您如果想要有「元件」,您就必須將元件包在「<b:section>」中,而「<b:section>」中包含了幾個屬性值,以Google官方所出的的blogger help中,有提到如下:

  • id: (必要) 獨一無二的名稱,只包含字母和數字。
  • class – (選用) 意見類別名稱為 navbar、header、main、sidebar 和footer。 如果您在稍後切換範本,這些名稱可協助 Blogger 判別如何以最好的方式來轉移您的內容。 不過,您也可以使用不同的名稱。
  • maxwidgets: (選用) 此區段中允許的小裝置數量上限。 如果未指定,表示沒有限制。
  • showaddelement: (選用) 可以是 yes 或 no,yes 為預設值。 此屬性可判別 [網頁元素] 標籤是否要在此區段中顯示 [新增網頁元素] 連結。
  • growth: (選用) 可以是 horizontal 或 vertical,vertical 為預設值。 此屬性可判別此區段中的小裝置是並排還是堆疊。

 

基本上,海芋是建議依上述的名稱來命名,以免到時後自己錯亂掉,至於要分別何種不同的話,則是可以由不同的id來分辨,為了方便大家好記,我們一樣將「b」看為「blogger」,「section」則是看為「片段」,這只是我們blogger的片段而已。

 

接下來,就要進入更深一層的地方了,如果還沒準備好,就喝杯水再上路吧,但是不要把水吐到您的LCD上喔!

我們再來看到「<b:section>」裡,前面曾經提過,「<b:section>」是將我們的element包起來,在opera、blogger,甚至是yahoo widget中,都稱乎這些小元件為「widget」,所以,想當然爾,我們要有「blogger的widget」,故依我們命名的經驗,可推理得知,應該叫做「b:widget」吧!

 

於是,我們躡手躡腳地翻開了google的程式碼,用我們的眼睛偷看一下,果然是「b:widget」,可惜我們不是在考試,不然一定拿100分,話雖如此,但是還是可以看到,他的程式碼大概是長這樣的:

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:widget id='Header1' locked='true' title='測試網站 (Header)' type='Header'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
</b:section>

 

這裡的每一個「b:widget」,都代表著一個小物件,趁著下課前,我們再將注意力集中至「b:widget」一下下,可以發現他有幾個屬性,而這些屬性,依然可以在blogger help中找到答案,海芋就將他整理如下:

  • id:- (必要) 此屬性只能包含字母與數字,且範本中的每個小裝置 ID 都必須是獨一無二的。 若未刪除小裝置並建立新的小裝置,就無法變更小裝置的 ID。
  • type: (必要) 此屬性代表小裝置的種類,且必須是以下所列的有效小裝置類型之一。
  • locked: (選用) 可以是 yes 或 no,no 為預設值。 您無法從 [網頁元素] 標籤中搬移或刪除已鎖定的小裝置。
  • title: (選用) 小裝置的顯示標題。 如果未指定,則會使用諸如 List1 之類的預設標題。
  • pageType: (選用) 可以是 all、archive、main 或item,all 為預設值。 小裝置只會顯示在您 blog 中的指定網頁 (所有小裝置都會出現在 [網頁元素] 標籤中,無論其 pageType 為何)。

 

每當您新增一個widget,則會多一個「b:widget」,所以才會有blogger無痛換樣版的方法。想必大多數的人看到這裡,都需要時間來消化一下,所以在「b:widget」中的程式碼,就且留到下回再來講解吧!
版面配置的網頁元素標記

Written by 

小小的宅宅電腦工程師,從小就是吃草族,用鍵盤寫下我在電腦上的足跡,用照片記錄下我的生活日常,用文字與大家交朋友~

發表迴響