2016年1月8日

Blogger 最強搜尋框工具﹍(1) 自製搜尋頁面

A+
blogger-search-box-page-layout-Blogger 最強搜尋框工具﹍(1) 自製搜尋頁面過去曾介紹讀者使用「Google 自訂搜尋」來當作站內搜尋的工具,其原因在「取代 Blogger 搜尋小工具﹍Google 自訂搜尋」說明得很詳細,主要是「Google 自訂搜尋(以下簡稱 CSE: Custom Search Engine)」可動態載入搜尋結果、執行速度快,能給訪客很友善的使用體驗,快速找到需要的資料。

該篇文章最近有讀者留言,表示:"google 自訂搜尋
為什麼永遠都是要等整頁全部內容load完之後, 搜尋列才會顯示出來...我的網誌經常被人說沒有搜尋列"。我的回答是:"這是正確的網頁程式設計,將不重要的工具延後載入,讓網頁重要的文章內容先顯示...讓網頁內容載入時不至於塞車"。

雖是如此,這件事其實不斷有使用者提出,且長久以來我一直有個構想要解決這件事、但遲未動手。最近剛好在進行加快網頁速度的計畫,準備減少外部連結的讀取,例如不使用圖示:「圖示字型 Font Awesome 使用方式整理」,同時也會減少外掛的使用,所以 CSE 也是開刀對象之一。

最後我做出了這個更強大的搜尋框工具,功能、介面與 CSE 差不多,執行速度甚至可更快,不需外掛連結,算是我心目中最佳的 Blogger 搜尋工具了。

以下先分享原理、製作方式,共分上下兩篇,想直接安裝可跳至「二、自訂搜尋頁面」,想先測試效果可前往展示網站,操作右邊側邊欄的搜尋框:



(圖片出處: pixabay.com)


一、製作原理


1. 官方導覽列搜尋框

blogger-nav-search-box-Blogger 最強搜尋框工具﹍(1) 自製搜尋頁面

上圖紅框就是 "Blogger 官方導覽列搜尋框",使用者多半將官方導覽列隱藏,因此用不到這個搜尋框。

前面提到的「取代 Blogger 搜尋小工具__Google 自訂搜尋」→「一、Blogger 各種搜尋方案比較」→「1. 導覽列搜尋框」,介紹過他的優點:"保證可以搜尋到部落格每一篇文章的內容";但是他的缺點很致命:"每次搜尋都需要重整頁面",等待時間長是個不好的使用者體驗。

不過話說回來,這個搜尋框如果能夠改成 Ajax 動態載入的話,那麼他的功能將會勝過 CSE。


2. Google 自訂搜尋的缺點

如了文章開頭使用者反應的 "頁面全部載入後,搜尋框才會出現" 之外,CSE 另外一個大缺陷就是,網站文章沒被 Google 搜尋引擎收錄的話,就搜尋不到了

這件事其實並不少見,WFU 常看到使用者反應搜尋不到自己的文章,所以寫了這篇「Google 網站管理員的活用方法﹍我的例行待辦事項」。如果搜尋不到文章,那麼網站裝了 CSE 也是沒用的。

因此對於站齡不長、網站權威度不夠、流量不多的網站,安裝 CSE 可能會遇上麻煩。

另外,用「Chrome 開發人員工具」檢查網路傳輸狀態,發現所有 CSE 會用到的外連 JS + CSS 檔,加總大約要傳輸 100k,算是滿龐大的數字。不過對於網路慣用者,瀏覽器應該會有這些檔案的快取。


3. 改造方法

google-custom-search-result-Blogger 最強搜尋框工具﹍(1) 自製搜尋頁面

上圖為 CSE 的搜尋結果版面,而「官方導覽列搜尋框」搜尋結果的版面,跟我們網站的首頁是一樣的,因此我依據上圖進行了這些步驟的改造:

  • 版面編排參考 CSE 的優點,去除不太必要的部分(例如不顯示網址)。
  • 增加縮圖顯示
  • 搜尋字串改為一律標記紅色
  • 文章摘要之前加入發佈日期
  • 將 "重整頁面" 改為 "Ajax 動態載入",可立即看到搜尋結果。
  • 將「官方導覽列搜尋框」改為側邊欄小工具。



二、自訂 Blogger 搜尋頁面


根據以上的改造流程,我們首先要進行 "搜尋結果" 的版面改造。參考「Blogger 七種頁面形態判斷語法詳解」→「二、各種索引頁面」→「3. 搜尋頁面」,可瞭解到 "站內搜尋" 的頁面,官方稱為 "搜尋頁面" (searchQuery)。

我們現在要動手修改範本中的 "搜尋頁面",其實這是有點危險的事,在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。


1. 搜尋頁面 CSS

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<!--搜尋頁面-->
<style>
.searchPage_Post {
margin: 10px 0;
overflow: auto;
}

.searchPage_Post h3 {
margin: 5px 0;
}

.searchPage_Post img {
float: left;
max-width: 50px;
max-height: 50px;
border: 1px solid #e2e2e2;
}

.searchPage_snippet {
margin-left: 60px;
}
</style>
<!-- -->

如果熟悉 CSS 的話,可自行修改版面效果。


2. 搜尋頁面 HTML

接著在範本中搜尋這個字串:

<b:include data='post' name='post'/>
應該只會有一個搜尋結果,然後將這一行字串,置換為以下程式碼:

<!--搜尋頁面 start-->
<b:if cond='data:blog.searchQuery'>
<div class='searchPage_Post'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:if cond='data:post.thumbnailUrl'>
<img expr:src='data:post.thumbnailUrl' />
<b:else/>
<img src='http://2.bp.blogspot.com/-nEPh_CvgECk/VhiRpiuYUHI/AAAAAAAAMqM/HdjiVlRXC6U/s72-c/wfublog-comment.jpg' />
</b:if>
<div class='searchPage_snippet'>
<b:if cond='data:post.dateHeader'>
<data:post.dateHeader/> <span class='red'>...</span>
</b:if>
<data:post.snippet/>
</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!--搜尋頁面 end, designed by WFU BLOG-->

  • 主要可修改的內容為綠色字串,這是文章無縮圖時的替代圖片,可改為自訂網址。
  • 這部分所有的程式碼,就是 "搜尋頁面" 的版面配置,如果想要自行調整版面的話,建議非常熟悉 Blogger 語法再來,否則很可能引起災難


3. 隱藏預設文章日期

事情還沒完,先別存檔,進行完上一點後,在範本中往上個 7 行左右,會看到以下程式碼:

<b:if cond='data:post.dateHeader'>
將這行程式碼置換為以下內容:

<b:if cond='data:post.dateHeader and !data:blog.searchQuery'>
這樣子可以隱藏 "搜尋頁面" 的文章發佈日期,版面會比較簡潔好看。

到此可以存檔,完成第一階段。



三、測試效果


想要先看一下自己網站 "搜尋頁面" 的版面效果,可以在網址輸入以下字串:

http://你的網址.blogspot.com/search?q=搜尋字串

或者也可看這個展示頁面,是搜尋 "blogger" 字串結果的畫面:



如果版面沒什麼問題的話,下一篇我們將安裝搜尋框在側邊欄 + Ajax 動態載入的效果:



更多 Blogger 搜尋工具:

3 則留言:

  1. 你好,這篇文章的教學步驟我都已經完成,也在測試的網頁中成功搜尋到文章。

    這應該是代表這一篇文章的教學我有做到了吧?

    不過,不知道為什麼系統會通知為存檔?? 謝謝

    (我要確認是否有存檔成功,所以按下存檔之後退到後台時系統告知未存檔)

    https://wanghenrytw.blogspot.com/

    回覆刪除
    回覆
    1. 補充:發現問題點是在去除日期的那一個動作,但第二次複製貼上之後存檔就成功了。

      這狀況不知道是否有遇過呢? 謝謝~

      PS: 搜尋過後要跳回到部落格的"顯示所有文章"的字體大小、以及中文字是否能替換或是調整呢?謝謝~

      刪除
    2. 請參考下面的留言注意事項,CSS 相關問題要請自行研究喔~
      至於你說的改文字,目前沒有修改這方面的計畫。

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。