jekyll tipue search

Jekyll Tipue-Suche

Volltextsuche in Jekyll mit Tipue Search. Kein Plugin notwendig. Vollständig kompatibel mit Github Pages.

Der Suchindex unter tipuesearch/tipuesearch_content.js wird mit Liquid generiert. Das jQuery-Plugin von Tipue Search verwendet Javascript, um den Index zu durchsuchen und eine Ergebnisliste anzuzeigen.

Sehen Sie sich eine Live-Demo auf Github-Seiten an. Der Code und die Konfiguration für die Demo befinden sich im Zweig gh-pages.

Installation

1. Fügen Sie den Ordner assets/tipuesearch und alle Inhalte zu Ihrer Site hinzu.

2. Fügen Sie die Skripte und Stile von Tipue Search zu Ihrem Themenkopf hinzu. Einige dieser Zeilen sind optional. Weitere Informationen finden Sie in den Dokumenten:

 {% if page.tipue_search_active or layout.tipue_search_active %}
<link rel="stylesheet" href="{{ "/assets/tipuesearch/css/normalize.css" | relative_url }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="{{ "/assets/tipuesearch/tipuesearch_content.js" | relative_url }}"></script>
<link rel="stylesheet" href="{{ "/assets/tipuesearch/css/tipuesearch.css" | relative_url }}">
<script src="{{ "/assets/tipuesearch/tipuesearch_set.js" | relative_url }}"></script>
<script src="{{ "/assets/tipuesearch/tipuesearch.min.js" | relative_url }}"></script>
{% endif %}

3. Fügen Sie Ihrer Website das Suchformular, die Ergebnisanzeige und das Skript von Tipue Search hinzu. Verwenden Sie als Referenz die Beispielsuchseite search.html . Setzen Sie tipue_search_active: true im Titelblatt jeder Seite oder jedes Layouts, auf dem Sie Suchergebnisse anzeigen möchten. Informationen zur Konfiguration des Suchformulars und zur Anzeige der Suchergebnisse finden Sie in der Tipue Search-Dokumentation:

 <form action="{{ page.url | relative_url }}">
  <div class="tipue_search_left"><img src="{{ "/assets/tipuesearch/search.png" | relative_url }}" class="tipue_search_icon"></div>
  <div class="tipue_search_right"><input type="text" name="q" id="tipue_search_input" pattern=".{3,}" title="At least 3 characters" required></div>
  <div style="clear: both;"></div>
</form>

<div id="tipue_search_content"></div>

<script>
$(document).ready(function() {
  $('#tipue_search_input').tipuesearch();
});
</script>

Verwendung

Sehen Sie sich die Dokumentation von Tipue Search an und durchsuchen Sie den Code, um zu verstehen, wie Tipue Search funktioniert und wie Sie es am besten in Ihre Website integrieren.

Einschließlich Seiten und Sammlungen

Standardmäßig werden nur Beiträge in den Suchindex aufgenommen. Seiten und Sammlungen sind nicht enthalten.

Fügen Sie Folgendes zu _config.yml hinzu, um Seiten und Sammlungen einzuschließen. collections ist ein Array, das eine Liste der Sammlungen enthält, die Sie einschließen möchten.

 tipue_search:
  include:
    pages: true
    collections: [apples, oranges]

Aus Suchindex ausschließen

Schließen Sie einzelne Dokumente mit einer Frontmatter-Variable aus dem Suchindex aus:

 exclude_from_search: true

Schließen Sie mehrere Dateien, Tags oder Kategorien mithilfe einer Einstellung in _config.yml aus. files ist ein Array, das eine Liste der auszuschließenden Dateipfade enthält. tags und categories sind Arrays mit Listen von Tags und Kategorien, die Sie ausschließen möchten.

 tipue_search:
  exclude:
    files: [search.html, _apples/gragg.md, _oranges/valencia.md]
    tags: [tag1, tag2]
    categories: [category1, category2]