如何使用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?