2010年12月24日 星期五

-步驟-Blogger 調整文章導覽連結的位置,前一篇與下一篇移到頁首,分類標籤移到文章內容上方
change Blogger pager links and labels position - my Blogger template tweak, using Picture Window

Blogger 的文章導覽,功能該有的都有,但介面上我覺得不是很滿意。

首先,它有「網誌call機」也就是 blog-pager 的功能,可以顯示出「前一篇 / 下一篇」或「前 N 篇 / 下 N 篇」的連結,位置放在頁面的最底下。在 Blogger 樣板之中,它們的名字分別叫做 blog-pager-newer-link 和 blog-pager-older-link。

不過,在網站的設計上,像這類副導覽功能,一般的視覺習慣是在頁面上方,或者是靠近主要按鈕的地方。像這般孤零零的,放在最底下,感覺上不是什麼有親和力的作法,至少我自己就很少去點它。



另一個是「文章標籤」的功能,位置在每篇文章的底下 post-footer 的區域。按下文章標籤,就會顯示出其他同樣是屬於這個標籤的文章。

預設樣板的 post-footer 區域裡面,設計了三行的空間,分別叫做 post-footer-line-1 到 post-footer-line-3 ,專門拿來放這類可以安插在文章中的小外掛。除了文章標籤外,還可以放其他的東西,像是 comments 讀者回應、reactions 讀者評價、share buttons 分享按鈕等功能。在 Blogger 後台的 page elements 頁面元素分頁中,對「網誌文章 blog post」按下「編輯 edit」,就可以打開/關閉這些功能。

順帶一提,我這次把自己的網誌改版,也有一半是衝著這些小外掛而做的,因為,許多功能在舊的樣板裡,並不支援。

總之,這些放在 post-footer 的東西,大多是屬於看完文章後、與讀者互動的功能,這些互動功能,跟 labels 這個網站導覽、為文章下關鍵字的功能,混在一起,且不說實際效果如何,在邏輯上,就讓人覺得不太蘇湖。


樣板功能:把具有導覽效果的 blog-pager 置頂,labels 從 post-footer 移動到 post-header 區域,緊接在文章標題之下


前一篇、下一篇 blog-pager 置頂

文章分類標籤 labels 從 post-footer 區域移動到 post-header 區域,文章內容上方、標題下方


修改 blog-pager 跟 lables 的實作方式,只要在樣板裡面剪下貼上,就可以完成。

  1. 在 Blogger 後台的 Design 設計的 Edit HTML 編輯原始碼頁面中,把 Expand Widget Templates 勾選起來,讓 widget 小工具的細節也秀出來。
     
  2. 按 Ctrl + F 打開瀏覽器的搜尋功能,搜尋 <!-- navigation --> ,可以找到像下面這段文字:

      <!-- navigation -->
      <b:if cond='data:mobile'>
        <b:include name='mobile-nextprev'/>
      <b:else/>
        <b:include name='nextprev'/>
        <!-- feed links -->
        <b:include name='feedLinks'/>
      </b:if>

    把這段文字之中,紅色的部份選起來後,按 Ctrl + X 剪下,此時這些字會暫時放在作業系統的剪貼簿中,因為,下次按 Ctrl + X 或 Ctrl + C 時,剪貼簿的資料就會被覆蓋過去,所以,請先找個純文字的編輯器,例如 Notepad 或 gedit ,把剛才剪下的東西按 Ctrl + V 貼在裡面,以策安全。
     
  3. 再按 Ctrl + F 搜尋 <!-- posts --> ,應該可以找到這段文字:

        <!-- posts -->
        <div class='blog-posts hfeed'>

          <b:include data='top' name='status-message'/>
    ... ... ...
     
  4. 把游標移動到 <!-- posts --> 之前,按下 Ctrl + V 貼上剛才剪下的東西,貼完應該會變成這樣:(紅色的字是貼上的部份)

      <!-- navigation -->
      <b:if cond='data:mobile'>
        <b:include name='mobile-nextprev'/>
      <b:else/>
        <b:include name='nextprev'/>
      </b:if>

        <!-- posts -->
        <div class='blog-posts hfeed'>

          <b:include data='top' name='status-message'/>
    ... ... ...
     
  5. 到這裡,blog-pager 置頂的功能應該就完成了。
     
  6. 接下來按 Ctrl + F 搜尋 <span class='post-labels'> ,應該可以找到類似下面這段文字:

          <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
            <b:if cond='data:post.labels'>
              <data:postLabelsLabel/>
              <b:loop values='data:post.labels' var='label'>
                <a expr:href='data:label.url' rel='tag'>,
              </b:loop>
            </b:if>
          </span> <span class='post-comment-link'>
    ... ... ...

    把紅色的部份選起來,按 Ctrl + X 剪下。
     
  7. 搜尋 post-header-line ,應該會找到:

        <div class='post-header'>
        <div class='post-header-line-1'/>
        </div>

        <div class='post-body entry-content'>
          <data:post.body/>
    ... ... ...
     
  8. 剛才剪下的東西,貼在這裡:(紅字是貼上的部份)

        <div class='post-header-line-1' /><span class='post-labels'>
            <b:if cond='data:post.labels'>
              <data:postLabelsLabel/>
              <b:loop values='data:post.labels' var='label'>
                <a expr:href='data:label.url' rel='tag'>,
              </b:loop>
            </b:if>
          </span>
        </div>

        <div class='post-body entry-content'>
          <data:post.body/>
     
  9. 然後稍做修改,第一處是刪掉 / 字元,第二處則是插入 < /div> 標籤:

        <div class='post-header-line-1' /><span class='post-labels'>
            <b:if cond='data:post.labels'>
              <data:postLabelsLabel/>
              <b:loop values='data:post.labels' var='label'>
                <a expr:href='data:label.url' rel='tag'>,
              </b:loop>
            </b:if>
          </span>
        </div>
        </div>

        <div class='post-body entry-content'>
          <data:post.body/>
     
  10. 到這裡,文章分類標籤應該就成功的移動到文章內容上方、標題下方了。

細看樣板的話,可以發現,常常先出現 <div> ,然後過一陣子,又出現一個一模一樣、只多出一根斜線的 </div> 標籤。但是,有時候又會出現 <div /> 這種斜線放在後面的標籤,像是剛才的 <div class='post-header-line-1' /> 這樣。到底是怎麼回事呢?

這是因為 html 的標籤格式,有統一的規定,每個標籤都要「有頭有尾」,而那根斜線就是標籤尾巴的記號。如果有東西要用標籤包起來,那東西就要放在開頭標籤 <div> 和結尾標籤 </div> 之間;如果這個標籤內暫時沒有要放東西,那可以把頭尾合併,變成 <div />的格式,這樣可以節省一些空間。等到真的要放東西進去,再把頭尾拆開來就好了。

有趣的是,在 Blogger 後台的頁面元素 page elements 裡面,在 posts 網誌文章的小工具,按 edit 編輯,會跳出一個編輯視窗,可以選擇要在文章下面,出現哪些文章外掛。在這裡, Blogger 很貼心的把這些文章外掛的位置視覺化,可以直接用滑鼠拖曳,改變他們的位置,不僅可以在底部三排 post-footer-line 之間拖曳,還可以把文章外掛拖到位於 post title 跟 post body 之間的 post-header-line。

可惜的是,在我這邊這個拖曳功能,只在 post-footer-line 之間有作用,拖曳到 post-header-line 上面時,雖然看起來可以成功,但是實際上是沒有作用的,所以最後,只好還是用手動的方式改 code 了。

以上就是我的導覽改造方式,對於各位讀者來說,瀏覽起來,是否真的有變得比較方便呢?