Hugo添加Google Custom Search站内搜索
Hugo没有自带站内搜索, 可以使用Google Custom Search Engine来代替.
注册GCSE
Google Custom Search官网注册帐号, 添加自己网站的链接并记录下cx参数和搜索框代码.
- cx参数
https://cse.google.com/cse?cx=xxx:xxx
- 搜索框代码
<script>
(function() {
var cx = 'xxx:xxx';
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:search></gcse:search>
配置文件中添加GCSE参数
在config.toml配置文件中添加cx参数
[Params]
googleCustomSearch = "xxx:xxx" # Google Custom Search Engine ID
打开搜索框插件, 需要主题支持
[Params.sidebar]
widgets = ["search", "recent", "categories", "taglist", "social"]
新建搜索框插件
如果主题中没有搜索框插件文件或者不喜欢主题搜索框的样式, 可以直接在Google上设置搜索样式并将相应的搜索框代码嵌入到页面div字段中. 由于mainroad主题中有搜索插件, 所以我选择使用主题提供的搜索框样式, 然后在插件文件中加入GCSE参数就行了.
-
新建搜索框文件 Hugo根目录下新建搜索框插件文件(./layouts/partials/widgets/search.html), 并将主题目录下相同路径的search.html文件内容拷贝到新文件中.
-
新增GCSE参数
- action=“https://cse.google.com/cse" 表示使用GCSE搜索
- .Site.Params.googleCustomSearch 将config.toml文件中的googleCustomSearch赋值给cx
<div class="widget-search widget">
<form class="widget-search__form" role="search" method="get" action="https://cse.google.com/cse">
<label>
<input class="widget-search__field" type="search" placeholder="{{ T "search_placeholder" }}" value="" name="q" aria-label="{{ T "search_placeholder" }}">
</label>
<input class="widget-search__submit" type="submit" value="Search">
<input type="hidden" name="cx" value="{{ .Site.Params.googleCustomSearch }}" />
</form>
</div>