Blogger 標頭判斷標記資料整理

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

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

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

Blogger 標頭判斷標記資料整理_001



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

Blogger 標頭判斷標記資料整理_002



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

Blogger 標頭判斷標記資料整理_003



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

Blogger 標頭判斷標記資料整理_004



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/> 網誌說明」,測試在網站前台的「標頭」區段是否會顯示中繼說明

Blogger 標頭判斷標記資料整理_101



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



技巧小貼士:
後台 ( 設定 / 基本 ) 中的「詳細介紹」為網誌說明,後台 ( 設定 / 搜尋偏好設定 ) 中的「詳細介紹」為中繼標記。

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

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

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

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

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



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

Blogger 標頭判斷標記資料整理_102



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 行動版電腦版文章標題判斷標記資料整理


留言

  1. 技研可樂 你好。 問你個問題,我的行動版是默認的,雖然我在桌機版的標頭已經設置了背景圖片,但是行動版卻沒有顯示圖片(現在是默認一片橘色的) 我現在想在行動版標頭設置一個背景圖片,要怎麼做?

    回覆刪除
    回覆
    1. 可以試著在標頭程式代碼區段,找到
      <b:if cond='data:mobile'>

      並將它下方的
      <div id='header-inner'>

      更替為以下代碼
      <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'>

      注意:上方代碼中有笑臉的部份,如下
      &quot;\&quot;);



      笑臉的部份,代碼請更改為『; )』,『「;」到「)」之間不需要有空格』
      &quot;\&quot; );


      不好意思最近較為繁忙,現在才看到留言。
      可以先試著使用以上方法,不成功的話,可能得等有空閒的時候,才能幫忙了 @@"

      刪除
    2. 顯示出來了,而且我加了一個自適應的CSS樣式。 不過目前不太完滿的就是,行動版的背景圖片,和網誌標題,說明(這兩個字組)重疊在一起了(影響部分的視線和美觀)。 因為我想盡量讓網頁版和行動版的圖片是一樣的,所以目前沒有頭緒針對重疊在一起的部分要怎麼辦了? 如果你有好的建議或想法,可以告訴我。 https://hexiezuo.blogspot.com 附帶個網誌,有時間歡迎來參觀下!

      刪除
    3. 剛觀察您的網誌,發現在電腦裝置上,「電腦版」與「行動版」網頁,在『"網誌標題" 與 "網誌說明"』和『網誌標頭背景圖片』重疊後,不會有文字與台灣圖樣旁邊的白色區塊,色彩重疊的情況。

      在較小比例螢幕的智慧型行動裝置上,才會有『"網誌標題" 與 "網誌說明"』和『網誌標頭背景圖片』重疊後,文字與台灣圖樣旁邊的白色區塊,色彩重疊的情形。

      也可以發現,由於在螢幕比例較小的智慧型行動裝置上觀察,「網誌標題」由於有設置 CSS 文字陰影,所以文字的部份還不致於看不到完整的「網誌標題」文字訊息。但「網誌說明」在沒設置 CSS 文字陰影的情形下,「網誌說明」文字的部份,就會與台灣圖樣旁邊的白色區塊,色彩重疊在一起了 (看不到「網誌說明」的後段文字)。

      建議,可以試著為「網誌標題」與「網誌說明」使用 CSS 加強調整文字陰影厚度,這樣應該就沒有問題了。

      刪除
    4. 加陰影後,OK,現在看起來比較順眼很多了! 謝謝。

      刪除
◎ 留言板中提問「代碼」問題,可至『留言代碼轉換器』轉換代碼。

張貼留言

繼續閱讀:

這個網誌中的熱門文章

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] 使用 PuTTYgen 產生 SSH 連線 RSA、DSA 公鑰與私鑰

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[教學] Blogger 自訂網址綁定自有域名

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰