如何在雨果点主题中实现搜索框？

Question

我必须创建一个Hugo网站以获取文档。我正在使用dot-hugo-documentation-theme。如何在该主题中实现搜索框？

<div class="container">
    <div class="row">
    <div class="col-lg-8 text-center mx-auto">
    <h1 class="text-white mb-3">{{ .Site.Params.banner.title }}</h1>
    <p class="text-white mb-4">{{ .Site.Params.banner.description }}</p>
        <div class="position-relative">
        <input id="search" class="form-control" placeholder="{{ .Site.Params.banner.placeholder }}">
        <!-- Javascript -->
        <script>
            $(function() {
            var projects = [
                {{ range.Data.Pages }}
                {
                    // value: "{{ .Title }}",
                    label: "{{ .Title }}",

                    url:"{{ .Permalink }}"
                },
                {{ end }}
            ];
            $( "#search" ).autocomplete({
                minLength: 0,
                source: projects,
                focus: function( event, ui ) {
                    $( "#search" ).val( ui.item.label );
                    return false;
                },
                select: function( event, ui ) {
                    $( "#search" ).val( ui.item.label );
                    $( "#project-id" ).val( ui.item.value );
                    return false;
                }
            })
            .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li>" )
                .append( "<a href=" + item.url + " + \" &quot;\" +  >" + item.label + "</a>" )
                .appendTo( ul );
            };
            });
        </script>
        </div>
    </div>
    </div>
</div>
{{ "<!-- /banner -->" | safeHTML }}

使用此仅显示主要标题，我必须显示内部页面标题吗？

Answer 1

This guide将引导您完成在Hugo网站上启用Lunr支持的搜索的步骤。它包括一个Grunt脚本来为您做索引，因此非常简单。