In einem Thema suchen

Fügen Sie ` paligo_search_box() ` an der Stelle ein, an der das Suchfeld erscheinen soll:

{{ paligo_search_box() }}

Standardmäßig werden die Ergebnisse während der Eingabe des Lesers unterhalb des Feldes angezeigt, zusammen mit einem Link, über den alle Ergebnisse aufgerufen werden können. Für die Suchergebnisseite verwenden Sie paligo_search_box('page'), wodurch die Ergebnisse auf der Seite aufgelistet werden, die Suche in der Seitenadresse beibehalten wird und Taxonomie-Filter angezeigt werden, sofern diese im Layout aktiviert sind.

{# templates/search.html.twig #}
{% extends 'base.html.twig' %}
{% block content %}
    <main>
        <h1>{{ page.title }}</h1>
        {{ paligo_search_box('page') }}
    </main>
{% endblock %}

Wenn das Layout keine Suchmaschine enthält, liefert paligo_search_box() keine Ausgabe, und es wird keine Suchseite veröffentlicht.

Das Suchfeld und seine Ergebnisse verwenden folgende Klassen:

Das hervorgehobene Ergebnis hat die Klasse is-active.

Sie können den HTML-Code für das Suchfeld selbst schreiben, um beispielsweise ein eigenes Symbol oder eine eigene Schaltfläche hinzuzufügen oder es in eine andere Struktur einzubinden. Das Suchskript von Paligo findet jedes Element mit der Klasse site-search auf der Seite, verbindet es mit der Suchmaschine des Layouts und füllt die Ergebnisse ein. Ihr Markup muss lediglich die Klassennamen verwenden, nach denen das Skript sucht.

In diesem Beispiel wird das Suchfeld einmal als Makro erstellt und an zwei Stellen verwendet: als Dropdown-Menü in der Kopfzeile jeder Seite und als umfassende Suche auf der Suchergebnisseite.

templates/partials/search-box.html.twig:

{% macro box(mode, id, placeholder, strings) %}
<div class="site-search" data-search-mode="{{ mode }}">
  <form class="site-search__form" role="search" method="get" action="search.html">
    <input class="site-search__input" type="search" name="q" autocomplete="off"
        placeholder="{{ placeholder }}" aria-label="{{ placeholder }}"
        {%- if mode == 'dropdown' %} role="combobox" aria-expanded="false" aria-controls="{{ id }}-panel" aria-autocomplete="list"{% endif %}>
    <button type="button" class="site-search__clear" hidden aria-label="{{ strings.clearSearch|default('Clear search') }}">&times;</button>
  </form>
  <div class="site-search__panel" id="{{ id }}-panel"{% if mode == 'dropdown' %} hidden{% endif %}>
    <p class="site-search__status" role="status" aria-live="polite"></p>
    <ul class="site-search__results"></ul>
    {% if mode == 'dropdown' %}
      <a class="site-search__all" hidden></a>
    {% else %}
      <button type="button" class="site-search__more" hidden>{{ strings.searchMore|default('Load more results') }}</button>
    {% endif %}
  </div>
  {% if mode == 'page' %}
    <div class="site-search__facets" hidden></div>
  {% endif %}
</div>
{% endmacro %}

Das Makro benötigt den Modus (dropdown oder page), eine auf der Seite eindeutige ID, den Platzhaltertext und die Texte des Themes. Die ID verknüpft das Textfeld mit seinen Ergebnissen, sodass Screenreader diese ansagen können.

templates/base.html.twig, wobei die Kopfzeilensuche in einem eigenen Block steht:

{% import 'partials/search-box.html.twig' as search %}
<!doctype html>
<html lang="{{ site.lang }}"{% if site.dir %} dir="{{ site.dir }}"{% endif %}>
<head>
    <meta charset="utf-8">
    <title>{% block title %}{{ page.title }} | {{ site.title }}{% endblock %}</title>
    {{ paligo.head }}
</head>
<body>
    <header>
        {% block header_search %}
            {% if site.search.backend|default('none') != 'none' %}
                {{ search.box('dropdown', 'header-search', site.strings.searchPlaceholder|default('Search'), theme.strings) }}
            {% endif %}
        {% endblock %}
        {% include 'partials/language-menu.html.twig' %}
    </header>
    {% block content %}{% endblock %}
    {{ paligo.foot }}
</body>
</html>

templates/search.html.twig, wodurch die Suche in der Kopfzeile deaktiviert wird, da die Seite über eine eigene verfügt:

{% extends 'base.html.twig' %}
{% import 'partials/search-box.html.twig' as search %}
{% block header_search %}{% endblock %}

{% block content %}
    <main>
        <h1>{{ page.title }}</h1>
        {{ search.box('page', 'search-page', site.strings.searchPlaceholder|default('Search'), theme.strings) }}
    </main>
{% endblock %}

Die Suchergebnisseite verwendet die Adresse search.html, die der action des Formulars entspricht. Auch wenn der Leser keine Skripte ausführen kann, öffnet das Formular dennoch die Suchergebnisseite.

Paligo aktiviert das Kontrollkästchen Suche eines Themes, wenn das Theme hochgeladen wird:

Die Suchtexte sind auf Englisch, es sei denn, die Übersetzungsdateien Ihres Themes enthalten diese Schlüssel. Siehe Ein Theme übersetzen.

Nexus Search indexiert die gesamte Seite. Um einen Teil der Seite, wie beispielsweise ein Navigationsmenü oder eine Fußzeile, aus dem Index auszuschließen, fügen Sie dort data-pagefind-ignore hinzu:

<nav class="sidebar" data-pagefind-ignore>…</nav>