在前面兩篇分別介紹過<head>、<b:section>和<b:widget>後,接下來我們要開始進入<b:widget>中元素的講解了,但是海芋還是希望慢慢帶領大家,所以每一篇大家大概只能得到一、兩樣東西,敬請見諒喔!

 

在講完廢話之後,接下來,我們就開始把滑鼠往下捲,開始我們的課程囉!

首先,我們先來複習一下,<b:widget>可以寫成以下型態:

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

 

但是,亦可以寫成以下型態:

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

 

而海芋在上一篇,亦曾說過<b:widget>是我們的小元素所在的集合,而他的屬性可以分為如下:

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

 

因為<b:widget>是小元素,在每個小元素都有他的內容及標題,所以我們必須每個小元素都必須要有東西將這些資訊記錄下來,因此blogger多提供了一個標記,叫做<b:includable>,而小元素的所有資訊,都必須包含在這裡面。

 

以一小段程式碼舉例:

<b:widget id='HTML2' locked='false' title='Hello' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

 

在這段程式碼中,我們可以看到的資訊有很多項目,但海芋在這裡就慢慢介紹,首先我們先看到下段程式碼:

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

 

在這裡,先介紹一下<b:includable>的屬性,可以很明顯地看到他有「id」和「var」這兩個屬性值,在blogger help中,一樣有介紹了這兩個屬性值。

  • id: (必要) 獨一無二且由字母和數字組成的識別碼。
  • var: (選用) 字母和數字組成的識別碼,用來參照此區段中的資料 (請參閱以下的資料區段)。

 

而每個<b:widget>中,都至少需要有一個<b:includable id=’main’>,這包含了這個widget要顯示的內容,我想既然你加上了widget,總不會不希望他的內容不顯示吧!

 

接著,我們再來介紹一下,「<b:include name=’quickedit’/>」這是在幹麼!?

 

前面曾經提到說,blogger提供了名為<b:includable>的標記,而小元素的所有資訊,都必須包含在這裡面。那麼,我們如何再利用我們之前寫過的程式碼呢?答案很簡單,假設我們目前定義了一個<b:includable id=’new’>的標記,那麼我們可以呼叫「<b:include name=’new’ /> 」,這樣就相當於使用<b:includable id=’new’>標記所描述的項目。

 

而「<b:include name=’quickedit’/>」則是blogger預先設定好的定義項目,他是顯示「快速編輯」的圖案,所以每個元件都會有。

 

不免俗的,我們還是要看看google help所提供的提供的「<b:include>」
<b:include name=’???’ data=’???’/>其中,屬性值代表的意義如下:

  • name: (必要) 獨一無二且由字母和數字組成的識別碼。 必須符合相同的小裝置中現有 b:includable 的 ID。
  • data:  (選用) 傳送至 [可納入項目(<b:includable>)] 區段的運算式或資料片段。 此屬性會成為可納入項目中 var 屬性的值。

 

話說到這,或許您已經頭頂滿星星了,不過簡單來說,<b:widget>像是一台古老的印表機,那台印表機需要連接到電腦才能印,所以就有了<b:includable>的產生,而因為印表機只有一個USB,所以要連接到主電腦才行,所以「id=’main’」才能顯示。但是,隨著科技的進步,您可以遠端遙控主電腦,所以您必須要使用<b:include>來遙控主電腦,因為IP對應才能遙控,所以必須電腦們必須要有先其「id」,<b:include>才能用「name」這個屬性來找到對應的方式。

 

或許,比喻得不倫不類,但是我已經很認真了,Orz….,至於其它項目,就下篇以後再來深談吧!

版面配置的小裝置標記

Written by 

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

發表迴響