[Hugo] Googleカスタム検索を追加する方法

front-matter部分の設定がtranquilpeakテーマ固有なのかどうかを把握してないが、とりあえず下記のやり方でできたので備忘録として残す。

content/search/index.htmlに下記を追加(scriptはGoogleのカスタム検索から取得)して

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
---
title: ""
showTags: false
showPagination: false
showSocial: false
showDate: false
showMeta: false
showActions: false
---

<script async src="https://cse.google.com/cse.js?cx=xxxxxxx"></script>
<div class="gcse-searchbox-only"></div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('#gitalk').style.display = 'none'; // gitalkを使用している場合
  });
</script>

config.tomlでmenuに追加

1
2
3
4
5
6
[[menu.main]]
  weight = 2
  identifier = "search"
  name = "search"
  pre = "<i class=\"sidebar-button-icon fas fa-lg fa-search\" aria-hidden=\"true\"></i>"
  url = "/search"