hugo search fuse js

Hugo Live-Suche mit Fuse.js und Mark.js

Dies ist kein eigenständiges Thema. Dies ist eine Komponente des Hugo-Themas.

Um diese Komponente zu verwenden,

1. Fügen Sie Folgendes zur TOML-Konfigurationsdatei Ihrer Site hinzu:

   [ module ]
     [[ module . imports ]]
       path = " github.com/kaushalmodi/hugo-search-fuse-js "

2. Führen Sie hugo mod tidy in Ihrem Hauptverzeichnis Ihrer Website aus. Das Haupt-Site-Repo muss ebenfalls ein Hugo-Modul sein (es muss über ein eigenes go.mod verfügen). Um dies zu erreichen, führen Sie hugo mod init <your site url or any unique string> in Ihrem Site-Repository aus, bevor Sie diesen Schritt ausführen.

3. Erstellen Sie content/search.md mit layout „search“ und dem output „ ["html", "json"] . Der Inhalt oder Text dieser search.md wird nicht von der search.html Vorlage verwendet, die Teil dieser Designkomponente ist.

   Hier ist ein Beispiel für search.md :

    +++
   title = " Search "
   layout = " search "
   outputs = [ " html " , " json " ]
   [ sitemap ]
     priority = 0.1
   +++

Anforderungen

Sie müssen die neueste Version von Go von https://go.dev/doc/install installieren, da diese Theme-Komponente hugo mod .. Befehle benötigt, um zu funktionieren.

Dieses Update zur Umstellung auf die Verwendung von Hugo-Modulen wurde zuletzt mit Hugo v0.92.0 getestet.

1. Ihr Hauptthema muss mithilfe einer Basisvorlage und Blöcken strukturiert sein
2. Die base muss main und footer definieren (siehe vorheriger Link).

Wenn das Hauptthema diese Anforderungen nicht erfüllt, müssen Sie den Teil search.html bearbeiten, damit die Suche funktioniert. Sie finden es unter layouts/_default/search.html in dieser Komponente.

Was ist, wenn das Hauptthema nicht über baseof.html verfügt?

Sie haben zwei Möglichkeiten:

1. Bearbeiten Sie die search.html damit sie zu Ihrem Thema passt.
2. Aktualisieren Sie das Theme, um den neuen Ansatz „Basisvorlage und Blöcke“ zu verwenden.

Was passiert, wenn das Hauptthema baseof.html enthält, aber nicht über die main und/oder footer ?

Es ist sehr einfach, diese Blöcke hinzuzufügen, ohne Ihr bestehendes Theme zu beschädigen.

Um den main hinzuzufügen, fügen Sie diesen an der entsprechenden Stelle zu Ihrer baseof.html hinzu:

 {{ block "main" . }}{{ end }}

Und fügen Sie auf ähnliche Weise Folgendes hinzu, wenn der footer fehlt:

 {{ block "footer" . }}{{ end }}

Ein Beispiel finden Sie im Snippet baseof.html in der Hugo-Dokumentation.

Credits

• Suchfunktion nach Fuse.js.
• Keyword-Hervorhebung durch mark.js.
• Erste Hugo-Implementierung von @eddiewebb in diesem Kern.
• Hugo-Themenkomponentenverpackung von @kaushalmodi.
• jQuery-Entfernung und IE-Polyfill-Integration durch @lpar.
• IE-Kompatibilitätspolyfills:
  • Versprechen
  • Bringen
  • URLSearchParams
  • Vorlagen- und Fragment-API
  • Node.remove