Suchfunktion in Templates
Mit CrispyCMS können Sie eine dynamische Suchfunktion direkt in Ihre Twig-Templates integrieren, ohne komplexe Backend-Logik schreiben zu müssen. Dies ermöglicht es Ihnen, Inhalte basierend auf Benutzereingaben flexibel darzustellen und die Benutzererfahrung durch relevante Ergebnisse zu verbessern.
Hierfür steht Ihnen die zentrale Twig-Funktion performSearchQuery zur Verfügung. Diese Funktion agiert als Schnittstelle zwischen Ihrem Frontend und dem Suchindex von CrispyCMS.
Die Suche erfolgt immer im expliziten Frontend-Kontext. [cite_start]Das bedeutet, dass administrative Daten oder unveröffentlichte Inhalte automatisch aus den Suchergebnissen ausgeschlossen werden, um die Datensicherheit zu gewährleisten[cite: 48, 50, 52].
Implementierung
Die Funktion performSearchQuery akzeptiert einen Suchbegriff als String und liefert eine Liste von ScoredSearchEntry-Objekten zurück. Um die Übersichtlichkeit zu wahren, können wir die Logik und die Datenstruktur getrennt betrachten.
Das folgende Beispiel zeigt, wie Sie eine einfache Liste von Suchergebnissen rendern, sofern Ergebnisse vorhanden sind.
{% set results = performSearchQuery(GET.q) %}
{% if results is not empty %}
<ul class="search-results">
{% for entry in results %}
<li>
<a href="{{ entry.url }}">{{ entry.title }}</a>
<span class="score">Relevanz: {{ entry.score|number_format(2) }}</span>
<div class="snippet">{{ entry.snippet }}</div>
</li>
{% endfor %}
</ul>
{% else %}
<p>Keine Ergebnisse gefunden.</p>
{% endif %}Jedes Suchergebnis ist ein Objekt mit spezifischen Eigenschaften, die Sie im Template abrufen können.
{
"title": "Seitentitel",
"snippet": "Kurzbeschreibung oder Auszug",
"url": "/seite-url",
"source": "Suchquelle",
"createdAt": "2025-09-15 12:34:56",
"updatedAt": "2025-09-15 12:34:56",
"score": 0.98
}Datenfelder im Detail
Jedes Element im Rückgabe-Array enthält detaillierte Informationen, die Sie zur Gestaltung der Suchergebnisse nutzen können. Hier ist eine Aufschlüsselung der verfügbaren Felder:
| Feld | Typ | Beschreibung |
|---|---|---|
| title | String | Der Titel des gefundenen Dokuments oder der Seite. |
| snippet | String | Ein automatisch generierter Auszug oder eine Kurzbeschreibung des Inhalts, ideal für Vorschauen. |
| url | String | Der relative Pfad zum Suchergebnis. |
| score | Float | Ein numerischer Wert, der die Relevanz des Ergebnisses angibt. Je höher der Wert, desto relevanter ist das Ergebnis bezüglich der Suchanfrage. |
| source | String | Gibt die Quelle des Ergebnisses an (z.B. “Blog”, “Page”). |
| createdAt | Timestamp | Zeitstempel der Erstellung. |
| updatedAt | Timestamp | Zeitstempel der letzten Aktualisierung. |
Vollständiges Beispiel: Suchformular mit Ergebnissen
Für eine vollständige Integration benötigen Sie oft sowohl das Eingabeformular als auch die Ergebnisanzeige auf derselben Seite. Das folgende Muster prüft, ob ein Suchparameter (q) in der URL vorhanden ist, und führt erst dann die Suche aus.
{# 1. Das Suchformular #}
<form method="get" action="" class="search-form">
<input type="text" name="q" value="{{ GET.q }}" placeholder="Suchbegriff eingeben...">
<button type="submit">Suchen</button>
</form>
{# 2. Die Verarbeitung der Ergebnisse #}
{% if GET.q is not empty %}
{% set results = performSearchQuery(GET.q) %}
<div class="search-header">
<h2>Suchergebnisse für "{{ GET.q }}"</h2>
<Badge variant="secondary">{{ results|length }} Treffer</Badge>
</div>
<ul class="results-list">
{% for entry in results %}
<li class="result-item">
<a href="{{ entry.url }}" class="result-title">{{ entry.title }}</a>
{# Anzeige des Relevanz-Scores für Debugging oder Transparenz #}
<small class="text-muted">Score: {{ entry.score|number_format(2) }}</small>
<p>{{ entry.snippet }}</p>
</li>
{% endfor %}
</ul>
{% endif %}