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

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

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

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

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

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

點此看範例網頁

(圖片出處: pixabay.com)

一、製作原理

1. 官方導覽列搜尋框



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

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

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


2. Google 自訂搜尋的缺點

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

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

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

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


3. 改造方法



上圖為 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/AVvXsEhj5LcLrwMGe37Vlg3_4bMrLVkzfMjYw_QkeW3idVlcuAcTE4amiKnX4_n8m4A6gzdNVI31weBNdkBgR4aZfKsOskPEks1_Q3afwsN-MSC-gVfLnuIOx9daZ9A6qgqJBKgsu6uMkLebyYgI/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 最強搜尋框工具﹍(2) 安裝 Ajax 動態載入

更多 Blogger 搜尋工具：