首先，它有「網誌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 的實作方式，只要在樣板裡面剪下貼上，就可以完成。
- 在 Blogger 後台的 Design 設計的 Edit HTML 編輯原始碼頁面中，把 Expand Widget Templates 勾選起來，讓 widget 小工具的細節也秀出來。
- 按 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 貼在裡面，以策安全。
- 再按 Ctrl + F 搜尋 <!-- posts --> ，應該可以找到這段文字：
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
... ... ...
- 把游標移動到 <!-- 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'/>
... ... ...
- 到這裡，blog-pager 置頂的功能應該就完成了。
- 接下來按 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 剪下。
- 搜尋 post-header-line ，應該會找到：
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<div class='post-body entry-content'>
<data:post.body/>
... ... ...
- 剛才剪下的東西，貼在這裡：（紅字是貼上的部份）
<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/>
- 然後稍做修改，第一處是刪掉 / 字元，第二處則是插入 < /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/>
- 到這裡，文章分類標籤應該就成功的移動到文章內容上方、標題下方了。
細看樣板的話，可以發現，常常先出現 <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 了。
以上就是我的導覽改造方式，對於各位讀者來說，瀏覽起來，是否真的有變得比較方便呢？
沒有留言:
張貼留言