如何使用hugo搭建個人部落格（五）：添加站內搜尋（gcse）

這是一個建立於 的文章，其中的資訊可能已經有所發展或是發生改變。

站內搜尋推薦使用google custom search engine(gsce)
gcse的使用方法強烈推薦閱讀：Hexo部落格最佳化配置之–為自己部落格添加站內搜尋

關鍵區段：

下面介紹如何在crisp的側邊欄中添加search box1.在以下github 倉庫中擷取search.html檔案，存放到本地header.html所在的目錄。https://github.com/penn201500/hugo-crisp-theme-for-blog/blob/master/mysite/themes/crisp/layouts/partials/search.html2.修改hearder.html：

        <header id="header">           <!--            <a id="logo" href="{{ .Site.BaseURL }}"><img src="https://www.gravatar.com/avatar/1a2807faf3cca1667ff6f04bf5886eff.png" alt="{{ .Site.Title }}" /></a>            -->            <h1><a href="{{.Site.BaseURL}}">{{.Site.Title}}</a></h1>            <p>{{.Description}}</p>            {{ partial "follow.html" . }}            {{ partial "navigation.html" . }}            {{ partial "tags.html" . }}            {{ partial "search.html" . }}     <!--這裡添加search box-->               </header>

3.在crisp主題下建立search檔案夾，從https://github.com/penn201500/hugo-crisp-theme-for-blog/blob/master/mysite/themes/crisp/search/index.html 擷取index.html放到search檔案夾中。
將從google search engine中得到的搜尋結果代碼粘貼到index.html中的script部分：

    <h1 class="post-title">Search Results</h1>    <script>  (function() {    var cx = '009059558632698478175:4wpqidijmx4';    var gcse = document.createElement('script');    gcse.type = 'text/javascript';    gcse.async = true;    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;    var s = document.getElementsByTagName('script')[0];    s.parentNode.insertBefore(gcse, s);  })();</script><gcse:searchresults-only></gcse:searchresults-only>

此時在側邊欄能看到search box但是不能搜尋到結果:

4.產生public並發布到伺服器

hugo -t crisp

在mysite目錄執行以上命令，產生public目錄。將public目錄發布到伺服器即可。

如果是發布到github-pages，可以參考：
http://www.liuhaihua.cn/archives/133615.html
https://www.zhihu.com/question/20962496

參考：

Hexo部落格最佳化配置之–為自己部落格添加站內搜尋

Hexo部落格第四站：搜尋引擎+小外掛程式+配置結構分析

How do I use Google Custom Search on my website?