HugoにGoogleカスタム検索エンジンを組み込んでみた
HugoにはよくあるCMSのサイト検索機能が実装されていないようです
サイト検索機能
コンテンツの全文検索機能を実装する
Hugoは静的サイトジェネレータなので、サーバーサイドの全文検索は行なえません
そのため全文検索をするためには、クライアント側にインデックスファイルをダウンロードして、ブラウザ内で全文検索を行う処理を書く必要があります
Googleのカスタム検索エンジンを利用する
もう面倒なことはGoogleにおまかせ
今回はこの方法を使います
Googleのカスタム検索エンジンを組み込む
Googleカスタム検索エンジンに登録する
Googleカスタム検索エンジンサイトにアクセスする
[カスタム検索エンジンの作成]ボタンをクリックする
必要な情報を入力して[作成]ボタンをクリックする
[コードを取得]ボタンをクリックする
これでページに貼るべきコードが取得できた
取得したコードをHugoに取り込む
今回はWidgetを作成して対応してみた
nano partials/widgets/search.html
search.htmlの中身はこんな感じ
{{ if .Site.Params.widgets.search }}
<div class="widget-search widget">
<script>
(function() {
var cx = '000000000000000000000:rlfdsffo-oo';
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>
<div id="g-cse">
<gcse:search />
</div>
</div>
{{ end }}
取得したコードをコピペするだけのの簡単な作業です
作成したWidgetをサイドバーに表示させてみた
nano layouts/partials/content/sidebar.html
sidebar.htmlの中身はこんな感じ
<div class="sidebar">
{{ partial "widgets/search" . }}
{{ partial "widgets/tag_cloud" . }}
</div>
竹内電設は、大阪府下を中心に中小規模の組織がITシステムを効果的に活用するための、お手伝いをさせていただいております
© 2023 竹内電設; all rights reserved.