Suche

Standardmäßig enthalten Websites, die Starlight verwenden, eine Volltextsuche mit Pagefind, einem schnellen, bandbreitenarmen Suchwerkzeug für statische Websites.

Es ist keine Konfiguration erforderlich, um die Suche zu aktivieren. Erstelle und implementiere deine Website und benutze dann die Suchleiste im Kopfbereich der Website, um nach Inhalten zu suchen.

Inhalte in den Suchergebnissen ausblenden

Eine Seite ausschließen

Um eine Seite aus deinem Suchindex auszuschließen, füge pagefind: false zum Frontmatter der Seite hinzu:

src/content/docs/not-indexed.md

---
title: Inhalt, der vor der Suche verborgen werden soll.
pagefind: false
---

Einen Teil einer Seite ausschließen

Pagefind ignoriert den Inhalt innerhalb eines Elements mit dem Attribut data-pagefind-ignore.

Im folgenden Beispiel wird der erste Absatz in den Suchergebnissen angezeigt, aber der Inhalt von <div> wird nicht angezeigt:

src/content/docs/partially-indexed.md

---
title: Seite teilweise indiziert
---

Dieser Text kann über die Suche gefunden werden.

<div data-pagefind-ignore>

Dieser Text wird von der Suche ausgeblendet.

</div>

Alternatives Suchsystem

Algolia DocSearch

Wenn du Zugang zum Algolia DocSearch-Programm hast und es anstelle von Pagefind verwenden möchtest, kannst du das offizielle DocSearch-Plugin von Starlight verwenden.

1. Installiere @astrojs/starlight-docsearch:

   npm

   npm install @astrojs/starlight-docsearch

   pnpm

   pnpm add @astrojs/starlight-docsearch

   Yarn

   yarn add @astrojs/starlight-docsearch

2. Füge DocSearch zu deiner Starlight-Konfiguration plugins in der Datei astro.config.mjs hinzu und gib deine appId, apiKey und indexName von Algolia an:

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   import starlight from '@astrojs/starlight';
   import starlightDocSearch from '@astrojs/starlight-docsearch';
   
   export default defineConfig({
     integrations: [
       starlight({
         title: 'Website mit DocSearch',
         plugins: [
           starlightDocSearch({
             appId: 'YOUR_APP_ID',
             apiKey: 'YOUR_SEARCH_API_KEY',
             indexName: 'YOUR_INDEX_NAME',
           }),
         ],
       }),
     ],
   });

Mit dieser aktualisierten Konfiguration öffnet die Suchleiste deiner Website nun ein Algolia-Modal anstelle des Standardmodals.

DocSearch Konfiguration

Das Starlight DocSearch Plugin unterstützt auch die Anpassung der DocSearch Komponente mit den folgenden zusätzlichen Optionen:

• maxResultsPerGroup: Begrenzt die Anzahl der Ergebnisse, die für jede Suchgruppe angezeigt werden. Der Standardwert ist 5.
• disableUserPersonalization: Verhindere, dass DocSearch die letzten Suchen und Favoriten eines Nutzers im lokalen Speicher speichert. Der Standardwert ist false.
• insights: Aktiviere das Algolia Insights Plugin und sende Suchereignisse an deinen DocSearch-Index. Der Standardwert ist false.
• searchParameters: Ein Objekt, das die Algolia Search Parameters anpasst.

Die Benutzeroberfläche von DocSearch übersetzen

DocSearch stellt standardmäßig nur englische Benutzeroberflächen-Strings zur Verfügung. Füge mithilfe des in Starlight integrierten Internationalisierungssystems Übersetzungen der Benutzeroberfläche der Modale für deine Sprache hinzu.

1. Erweitere die Definition der Starlight-Inhaltssammlung i18n um das DocSearch-Schema in src/content.config.ts:

   src/content.config.ts

   import { defineCollection } from 'astro:content';
   import { docsLoader, i18nLoader } from '@astrojs/starlight/loaders';
   import { docsSchema, i18nSchema } from '@astrojs/starlight/schema';
   import { docSearchI18nSchema } from '@astrojs/starlight-docsearch/schema';
   
   export const collections = {
     docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
     i18n: defineCollection({
       loader: i18nLoader(),
       schema: i18nSchema({ extend: docSearchI18nSchema() }),
     }),
   };

2. Füge Übersetzungen zu deinen JSON-Dateien in src/content/i18n/ hinzu.

   Hier sind die englischen Standardwerte, die von DocSearch verwendet werden:

   src/content/i18n/en.json

   {
     "docsearch.searchBox.resetButtonTitle": "Clear the query",
     "docsearch.searchBox.resetButtonAriaLabel": "Clear the query",
     "docsearch.searchBox.cancelButtonText": "Cancel",
     "docsearch.searchBox.cancelButtonAriaLabel": "Cancel",
     "docsearch.searchBox.searchInputLabel": "Search",
   
     "docsearch.startScreen.recentSearchesTitle": "Recent",
     "docsearch.startScreen.noRecentSearchesText": "No recent searches",
     "docsearch.startScreen.saveRecentSearchButtonTitle": "Save this search",
     "docsearch.startScreen.removeRecentSearchButtonTitle": "Remove this search from history",
     "docsearch.startScreen.favoriteSearchesTitle": "Favorite",
     "docsearch.startScreen.removeFavoriteSearchButtonTitle": "Remove this search from favorites",
   
     "docsearch.errorScreen.titleText": "Unable to fetch results",
     "docsearch.errorScreen.helpText": "You might want to check your network connection.",
   
     "docsearch.footer.selectText": "to select",
     "docsearch.footer.selectKeyAriaLabel": "Enter key",
     "docsearch.footer.navigateText": "to navigate",
     "docsearch.footer.navigateUpKeyAriaLabel": "Arrow up",
     "docsearch.footer.navigateDownKeyAriaLabel": "Arrow down",
     "docsearch.footer.closeText": "to close",
     "docsearch.footer.closeKeyAriaLabel": "Escape key",
     "docsearch.footer.searchByText": "Search by",
   
     "docsearch.noResultsScreen.noResultsText": "No results for",
     "docsearch.noResultsScreen.suggestedQueryText": "Try searching for",
     "docsearch.noResultsScreen.reportMissingResultsText": "Believe this query should return results?",
     "docsearch.noResultsScreen.reportMissingResultsLinkText": "Let us know."
   }