2016年1月1日 星期五

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

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

Wayne Fu 0 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp4ReK8tjvFN8EXsGsHJyjs1xFqLt1M7KNz2Y850U9nmN_3BoBbtz6USAoRI1Gd4fyrwuB0v6ZzThZaLhL8a5rvF1Vs1ghjLNnFi5a4uTBkgqWx0iNkYpS_xjf5DQwWAkuzL1nXRWtV8yq/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 搜尋工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP