Blogger 標頭判斷標記資料整理

Blogger 網誌模板範本應用教學：Blogger 標頭區塊包含了「版面配置」頁的小工具、網誌名稱及網誌說明 ( 詳細介紹 ) ，若再加上有幫網誌加上標頭圖片的話，那想在「範本」內的標頭區段做一些更動就顯得複雜。

這裡依「版面配置資料標記」在「範本」中整理出整段標頭區塊的判斷標記資料，如果以後 Blogger 系統在標頭區段有做資料更新時，這邊也留下記錄。

首先依一般的 Blogger 模板來觀察 ( 如下圖 )，從訪客瀏覽我們網站的角度來看，標頭區塊就位在圖中標示的位置

而在 Blogger 後台的「版面配置」頁中，標頭的位置通常位於整個版面的最上方。預設為不可拖動塊 ( 可移動的小工具在底座會有虛線 )，且無 "新增小工具" 底座

點取標頭的【編輯】後，在 [ 設定標題 ] 中可以觀察到這裡有我們平常設置的「網誌標題」及「網誌說明」，在下方也有加入「圖片」的選項

而「網誌說明」與後台 ( 設定 / 基本 ) 中的「詳細介紹」是具有同步性值的，一邊做過更動另一頭也會同步變動。

Blogger「範本」中包含了上方混合在一起的事件，組合起來的判斷標記若沒更動過，應該如下方的程式碼一般 ( 這裡「<!-- 注釋 -->」的中文部份為加上了整理過的解釋片段 )

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><!-- 標頭小工具的底座-小工具數量一個，不顯示新增小工具 -->
        <b:widget id='Header1' locked='true' title='技研可樂 (標頭)' type='Header'><!-- 標頭小工具 -->
          <b:includable id='main'><!-- 小工具的主要內容，可藉由下段「b:includable id=」呼應此內容區塊的「b:include name=」值 -->

  <b:if cond='data:useImage'><!-- 如果以下資料使用圖片的話 -->
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'><!-- 如果圖片位置又在後面當作背景的話 -->
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'><!-- 如果是在手機模板的情況下 -->
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/><!-- 預設顯示標頭 -->
              </h1>
            </div>
            <b:include name='description'/><!-- 預設顯示網誌說明 ( 詳細介紹 ) -->
          </div>
        <b:else/><!-- 手機模板如果以上情況的話 -->
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'><!-- 顯示圖片 -->
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/><!-- 小工具若有設定顯示標頭，則顯示標頭 -->
              </h1>
            </div>
            <b:include name='description'/><!-- 小工具若有設定顯示網誌說明，則顯示網誌說明 ( 詳細介紹 ) -->
          </div>
        </b:if><!-- 如果是在手機模板的情況下 -->
    <b:else/><!-- 如果不在手機模板，於桌機模板的情況下 -->
      <!--Show the image only--><!-- 小工具若有設定圖片當作標頭，則顯示圖片 -->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/><!-- 顯示圖片 -->
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'><!-- 小工具若有設定於圖片之後顯示網誌說明 -->
          <b:include name='description'/><!-- 則顯示網誌說明 ( 詳細介紹 ) -->
        </b:if>
      </div>
    </b:if>
  <b:else/><!-- 如果圖片位置不在後面當作背景的話 -->
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/><!-- 預設顯示標頭 -->
        </h1>
      </div>
      <b:include name='description'/><!-- 預設顯示網誌說明 ( 詳細介紹 ) -->
    </div>
  </b:if>
</b:includable>
          <b:includable id='description'><!-- 以下資料，呼應上一段主要內容區塊「name='description'」中要顯示的網誌描述值 -->
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p><!-- 以網誌說明 ( 詳細介紹 ) 當作網誌描述值 -->
  </div>
</b:includable>
          <b:includable id='title'><!-- 以下資料，呼應上一段主要內容區塊「name='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>
</b:includable>
        </b:widget>
      </b:section>

(* 這整段代碼皆由「<b:widget id='Header1' locked='true' title='網誌名稱 (Header)' type='Header' version='1' visible='true'/>」這個「b:widget」自動生成。)

注意事項：
文中的手機版等於行動版，桌機版等於電腦版。
手機模板等於「範本中的行動版網頁代碼」，桌機模板等於「範本中的電腦版網頁代碼」。

Blogger 標頭判斷標記段落整理

1. 「<b:includable id='main'>」段落
2. 「<b:if cond='data:useImage'>」段落
3. 「行動版」網站標頭段的資料標記
4. 「電腦版」網站標頭段的資料標記

段落整理

Step 1

「<b:includable id='main'>」段落

 試著拆解「widget 小工具」以下的第一層「<b:includable id='main'>」，經過觀察後可以得知以下代碼解釋片段

<b:includable id='main'> 每個小工具都一定要有的主要內容

    <b:include name='title'/> 標頭

    <b:include name='description'/> 網誌說明 ( 詳細介紹 )

</b:includable>
<b:includable id='description'> 「id='description'」對應上段主要內容區塊「<b:include name='description'/>」

此段內容，呼應「id='main'」主要內容區塊「name='description'」中要顯示的網誌描述值

</b:includable>
<b:includable id='title'> 「id='title'」對應上段主要內容區塊「<b:include name='title'/>」

此段內容，呼應「id='main'」主要內容區塊「name='title'」中要顯示的網誌描述值

</b:includable>

這裡做個小試驗，將「data:blog.metaDescription 中繼標記」替換掉「<b:includable id='description'> 區段內」的「<data:description/> 網誌說明」，測試在網站前台的「標頭」區段是否會顯示中繼說明

由上圖的文章內頁可以得知，確實可以直接對應。不過若做此設定後，網站內的「網誌說明」也就無作用了，「標頭」段的前台顯示資料則變成「網誌名稱」加上「中繼資料」

技巧小貼士：

後台 ( 設定 / 基本 ) 中的「詳細介紹」為網誌說明，後台 ( 設定 / 搜尋偏好設定 ) 中的「詳細介紹」為中繼標記。

「網誌說明」與後台 ( 設定 / 基本 ) 中的「詳細介紹」是具有同步性值的，一邊做過更動另一頭也會同步變動。

「中繼標記」能向搜尋引擎提供自己網站的相關資訊，加入的位置在 HTML 網頁的「<head>」部分。

Blogger「<head>」部份的「meta 資料」無法加入「data:description」，只能加入全域性的資料標記，例如帶有「data:blog」的「data:blog.metaDescription 中繼標記」或「data:blog.pageName 頁面名稱」。

「中繼資料 ( 包含：首頁、搜尋頁、標籤頁、網誌存檔 )」設置路徑：Blogger 後台 \ 設定 \ 搜尋偏好設定 \ 中繼標記。

「中繼資料 ( 包含：文章頁、靜態網址頁 )」設置路徑：寫文章時 \ 搜尋說明。

若是直接在「<head>」部份的「meta 資料」中，加入未帶有「data:blog」」的資料標記，則在網站前台會出現錯誤狀況

Step 2

「<b:if cond='data:useImage'>」段落

接著拆開「<b:includable id='main'> 主要內容」內的「<b:if cond='data:useImage'>」區段，可以發現以下代碼解釋片段

  <b:if cond='data:useImage'> 如果以下資料有使用圖片的話 start
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>

如果圖片位置在後面當作背景的話，顯示此段內容。

    </b:if>
  <b:else/> 如果不是的話

    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/> 顯示 h1 標頭
        </h1>
      </div>
      <b:include name='description'/> 顯示網誌說明 ( 詳細介紹 )
    </div>
  </b:if> 如果以下資料有使用圖片的話 end

從上段程式代碼可以得知，在「<b:if cond='data:imagePlacement == &quot;BEHIND&quot;'> ~ <b:else/>」的段落，皆為後台中「版面配置 \ 設定標題」裡設定過圖片當作「網誌名稱」的部份

而第 7 行「<b:else/>」以下的區域則為後台「版面配置 \ 設定標題」小工具中沒有設定圖片當作「網誌名稱」的部份

Step 3

「行動版」網站標頭段的資料標記

接續在 Step2. 「<b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>」以下至第 7 行「<b:else/>」的段落之間，有一段「行動版」網站及半段「桌機版」網站的標頭資料，如下代碼解釋片段

    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'> 如果圖片位置在後面當作背景的話 start

      <b:if cond='data:mobile'> 如果是在行動版網站的情況下 start

          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/> 預設顯示 h1 標頭
              </h1>
            </div>
            <b:include name='description'/> 預設顯示網誌說明 ( 詳細介紹 )
          </div>
    
        <b:else/> 如果不是的話
  
  顯示標頭圖片 ( 圖片不帶 h1 標籤 )
  
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/> 小工具若有設定顯示標頭名稱，則顯示 h1 網誌名稱
              </h1>
            </div>
            <b:include name='description'/> 小工具若有設定顯示網誌說明，則顯示網誌說明 ( 詳細介紹 ) 
          </div>

        </b:if> 如果是在行動版網站的情況下 end

       <b:else/> 如果不在行動版網站
  
               顯示桌機版網站資料

    </b:if> 如果圖片位置在後面當作背景的話 end
  
       <b:else/>

這裡主要觀察第 3 至 26 行「行動版」網站的判斷標記變化，第 5 至 12 行說明標頭沒有加入圖片時，預設顯示網站名稱及網誌說明。第 14 至 24 行則說明在有加入圖片的情況下 ( 於 14 ~ 24 區間 ) 所顯示的資料。

Step 4

「電腦版」網站標頭段的資料標記

接續 Step3. 中第 28 行的「<b:else/>」以下的段落並組合 Step2. 的部份，那於「桌機版」網站的標頭資料，會如下代碼解釋片段

  <b:if cond='data:useImage'> 如果以下資料有使用圖片的話 start
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'> 如果圖片位置在後面當作背景的話 start

       行動版網站的資料標記
  
    <b:else/> 如果不在行動版網站，則顯示以下桌機版網站資料標記
  
      <div id='header-inner'>
        
  顯示標頭圖片 ( 圖片不帶 h1 標籤 )

        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'> 小工具若有設定於圖片之後顯示網誌說明
          <b:include name='description'/> 則於圖片之後顯示網誌說明 ( 詳細介紹 )
        </b:if>
      </div>

    </b:if> 如果圖片位置在後面當作背景的話 end
 
  <b:else/> 如果不顯示圖片的話

    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/> 預設顯示網站 h1 標頭
        </h1>
      </div>
      <b:include name='description'/> 預設顯示網站網誌說明 ( 詳細介紹 )
    </div>

  </b:if> 如果以下資料有使用圖片的話 end

這邊可以觀察第 8 行至 29 行之間「桌機版」網站的變化，從第 2 行至 18 行可以知道這區間的標頭是處於有設置圖片的狀況，所以 ( 8 ~ 16 行 ) 為「桌機版」網站以圖片當作標頭的區段。反之，於第 20 行後則為「桌機版」網站使用文字當作網站名稱時的狀態。

相關文章

Blogger 網站標頭、文章標題 H1、H2、H3 設置 SEO 最佳化

Blogger 行動版電腦版文章標題判斷標記資料整理