Как я могу реализовать окно поиска в теме Hugo Dot? - PullRequest
Новая
       86

Как я могу реализовать окно поиска в теме Hugo Dot?

0 голосов
/ 08 ноября 2019

Я должен создать сайт Гуго для документации. я использую 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 }}

При использовании этого отображения отображаются только основные заголовки, чтобы отображать заголовки внутренних страниц?

1 Ответ

0 голосов
/ 08 ноября 2019

Это руководство проведет вас через шаги, чтобы включить поиск с помощью Lunr на вашем сайте Hugo. Он включает в себя скрипт Grunt для индексирования, поэтому он довольно прост.

Если вы хотите, чтобы ваш поиск работал по-другому (например, через Elasticsearch), документация Hugo по поиску объясняетдругие варианты.

...