Как открыть новую страницу с результатами поиска в Jekyll, используя w / Lunr. js? - PullRequest
Новая
       66

Как открыть новую страницу с результатами поиска в Jekyll, используя w / Lunr. js?

1 голос
/ 20 апреля 2020

У меня возникли некоторые проблемы при попытке отобразить результат поиска на новой странице под названием results.html, используя это руководство здесь .

Кажется, что он настроен на отображение результатов на странице, где выполняется поиск, а это не то, что я ищу.

То, что я пытаюсь сделать, это иметь окно поиска в index.html, которое открывает новую страницу после нажатия кнопки, содержащей результаты поиска.

В настоящее время любой поиск, который производится на любой странице, просто показывает результаты там.

_includes/search-lunr.html

<script src="/js/lunr.js"></script>

<script>
{% assign counter = 0 %}
var documents = [{% for page in site.pages %}{% if page.url contains '.xml' or page.url contains 'assets' %}{% else %}{
    "id": {{ counter }},
    "url": "{{ site.url }}{{ page.url }}",
    "title": "{{ page.title }}",
    "body": "{{ page.content | markdownify | replace: '.', '. ' | replace: '</h2>', ': ' | replace: '</h3>', ': ' | replace: '</h4>', ': ' | replace: '</p>', ' ' | strip_html | strip_newlines | replace: '  ', ' ' | replace: '"', ' ' }}"{% assign counter = counter | plus: 1 %}
    }, {% endif %}{% endfor %}{% for page in site.without-plugin %}{
    "id": {{ counter }},
    "url": "{{ site.url }}{{ page.url }}",
    "title": "{{ page.title }}",
    "body": "{{ page.content | markdownify | replace: '.', '. ' | replace: '</h2>', ': ' | replace: '</h3>', ': ' | replace: '</h4>', ': ' | replace: '</p>', ' ' | strip_html | strip_newlines | replace: '  ', ' ' | replace: '"', ' ' }}"{% assign counter = counter | plus: 1 %}
    }, {% endfor %}{% for page in site.posts %}{
    "id": {{ counter }},
    "url": "{{ site.url }}{{ page.url }}",
    "title": "{{ page.title }}",
    "body": "{{ page.date | date: "%Y/%m/%d" }} - {{ page.content | markdownify | replace: '.', '. ' | replace: '</h2>', ': ' | replace: '</h3>', ': ' | replace: '</h4>', ': ' | replace: '</p>', ' ' | strip_html | strip_newlines | replace: '  ', ' ' | replace: '"', ' ' }}"{% assign counter = counter | plus: 1 %}
    }{% if forloop.last %}{% else %}, {% endif %}{% endfor %}];

var idx = lunr(function () {
    this.ref('id')
    this.field('title')
    this.field('body')

    documents.forEach(function (doc) {
        this.add(doc)
    }, this)
});

function lunr_search(term) {
    document.getElementById('lunrsearchresults').innerHTML = '<ul></ul>';
    if(term) {
        document.getElementById('lunrsearchresults').innerHTML = "<p>Search results for '" + term + "'</p>" + document.getElementById('lunrsearchresults').innerHTML;
        //put results on the screen.
        var results = idx.search(term);
        if(results.length>0){
            //console.log(idx.search(term));
            //if results
            for (var i = 0; i < results.length; i++) {
                // more statements
                var ref = results[i]['ref'];
                var url = documents[ref]['url'];
                var title = documents[ref]['title'];
                var body = documents[ref]['body'].substring(0,160)+'...';
                document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML = document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML + "<li class='lunrsearchresult'><a href='" + url + "'><span class='title'>" + title + "</span><br /><span class='body'>"+ body +"</span><br /><span class='url'>"+ url +"</span></a></li>";
            }
        } else {
            document.querySelectorAll('#lunrsearchresults ul')[0].innerHTML = "<li class='lunrsearchresult'>No results found...</li>";
        }
    }
    return false;
}
</script>

<style>
    .lunrsearchresult .title {color: #d9230f;}
    .lunrsearchresult .url {color: silver;}
    .lunrsearchresult a {display: block; color: #777;}
    .lunrsearchresult a:hover, .lunrsearchresult a:focus {text-decoration: none;}
    .lunrsearchresult a:hover .title {text-decoration: underline;}
</style>


<form onSubmit="return lunr_search(document.getElementById('lunrsearch').value);">
    <p><input type="text" class="form-control" id="lunrsearch" name="q" maxlength="255" value="" placeholder="Search via Lunr.js" /></p>
</form>
<div id="lunrsearchresults">
    <ul></ul>
</div>

_layout/index.html

{% include search-lunr.html %}

Единственное, о чем я мог подумать, это добавить в форму действие, которое затем открывается. _layout/results.html, который действительно ничего не меняет.

Любая помощь будет оценена. Спасибо.

1 Ответ

1 голос
/ 22 апреля 2020

Если вы хотите, чтобы результаты поиска были только на отдельной странице, вам нужно, чтобы в форме поиска было действие, которое указывает на нее. Термин будет передан на эту страницу, которая затем может обработать его и отобразить результаты поиска.

Этот шаблон демонстрирует этот точный поток:

Это очень хорошее решение, так как зрители вашего сайта должны загружать и запускать этот код только при выполнении поиск, который может быть существенным сбережением с индексом разумного размера.

Чтобы примерно скопировать его с кодом выше:

  1. Удалите {% include search-lunr.html %} из вашего index.html.

  2. Имейте это на index.html: 

    <form action="{{ site.baseurl }}/search/" method="get">
  <input type="text" name="q">
  <input type="submit" value="Search">
</form>

  3. Затем в вашем search.html: 

    ...
{% include search-lunr.html %}

<script>
  function getQueryVariable(variable) {
    var query = window.location.search.substring(1),
      vars = query.split("&");

    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");

      if (pair[0] === variable) {
        return decodeURIComponent(pair[1].replace(/\+/g, '%20')).trim();
      }
    }
  }

  var query = decodeURIComponent((getQueryVariable("q") || "").replace(/\+/g, "%20"));
  lunr_search(query);
</script>
...
...