加入搜尋框 - Githubissues

Mushiyo commented 8 years ago

加入DuckDuckGo搜尋框到側欄

雖然DuckDuckGo官方有提供嵌入搜尋框的code 但是嵌入後的效果不太理想，因此得自已寫一個可能有用的資料：

Mushiyo commented 8 years ago

[3]中的最後一段程式碼即是使用Bootstrap 3的DuckDuckGo搜尋框一同參考了[3]和[4]之後，最後做出的搜尋框程式碼如下

<form class="form-inline" name="searchForm" action="https://duckduckgo.com/" method="get">
    <div class="form-group input-group">
         <input type="search" name="q" placeholder="search" class="form-control">
         <input type="hidden" name="sites" value="yourWebSite">
         <span class="input-group-btn">
            <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
         </span>
    </div>
 </form>

使用前記得把程式碼中的yourWebSite要改成欲放置搜尋框的網站的網址值得一提的是，sites這個參數在DuckDuckGo官方的參數說明中並沒有出現，有找到一篇StackOverflw說這是隱藏參數，且可以搜尋多個站（以逗號分隔網址）

經過測試後確定搜尋框的功能正常，但是DuckDuckGo在限定網址的情形下，對中文的搜尋結果感覺十分差強人意。因此決定先不用DuckDuckGo，改採其他方案或是等DuckDuckGo有所改進。

Mushiyo commented 8 years ago

由於決定不用DuckDuckGo了，故開始研究其它方案目前考慮中的有：

Google Custom Search Engine：可以設定成直接在網站中顯示搜尋結果（有多種顯示方式可設定），效果還滿好看的。缺點是Google給的程式碼樣式和Bootstrap不相容，搜尋鈕會變成一個灰色小方塊。可能可以透過加入Bootstrap官網上這段中的CSS解決。
Algolia：在別的網站上使用過他們的服務，搜尋體驗還不錯。他們的部落格有一篇寫給Jekyll的教學。JBake是否也能使用這個服務仍有待研究。
直接用Google：把上面搜尋框中action的值改成https://www.google.com.tw/search，sites改成as_sitesearch，這應該是最省事的方案了

Mushiyo / ComputerWorld

加入搜尋框 #1