gridea search

Gridea-Plug-in für Client-Artikelsuchthemen für statische Websites

Vorschau: https://kytrun.com, oder laden Sie dieses Projekt herunter, platzieren Sie example/ im Themenpfad von Gridea und führen Sie Gridea selbst aus.

Es ist nur für Gridea-Theme-Entwickler mit Kenntnissen in der Frontend-Programmierung geeignet. Themes mit Grinda-Suche können hier eingesehen werden .

Merkmale:

• Eigenständige Suchergebnisseiten und Weblinks
• Theme-Entwickler können vorhandene Vorlagen in hohem Maße wiederverwenden
• Erweitern Sie die Nutzung der offiziellen API, ohne zusätzliche Lernkosten
• Laden Sie mithilfe der Suche nur die erforderlichen Ressourcen
• Unterstützung der Stilanpassung
• gute Verträglichkeit

Schnellstart:

1. Nehmen Sie die offizielle Theme-Entwicklungsvorlage als Beispiel und fügen Sie darauf basierend neue Dateien hinzu:

 ├── assets
 │   └── media
 │       └── gridea-search
 │           └── result-template.ejs - 搜索结果列表模板
 │           └── ejs.min.js - 模板渲染引擎
 │           └── fuse.basic.min.js - 模糊搜索
 │           └── gridea-search.js - 功能入口
 └── templates
     ├── api.ejs - 输出整站 API
     └── search.ejs - 搜索页面

2. Ändern Sie die folgenden Dateien

(1) ./templates/api.ejs

Die Vorlage, die die JSON-Format-API ausgibt, um die Netzwerkübertragungszeit so weit wie möglich zu verkürzen, sind einige Attribute zunächst mit Anmerkungen versehen. Sie können die entsprechenden Anmerkungen nach Bedarf löschen.

(2) ./templates/includes/header.ejs

Öffentliche Vorlage, fügen Sie an der entsprechenden Stelle ein Suchfeld hinzu, damit andere Seiten darauf verweisen können:

 < form id =" gridea-search-form " action =" <%= themeConfig.domain %>/search/ " >
    < input name =" q " />
</ form >

Der vorhandene Teil kann nicht geändert werden, andere Attribute wie Klasse oder Stil können hinzugefügt werden.

(3) ./templates/search.ejs

Die Suchseite kann basierend auf anderen Seiten geändert werden und dann Suchergebnis-Rendering-Knoten und abhängige Skripte hinzugefügt werden.

• Das abhängige Skript <script> muss vor </body> platziert werden. Ändern Sie die Reihenfolge nicht willkürlich, um Ladefehler zu vermeiden.

(4) ./assets/media/gridea-search/result-template.ejs

Die Suchergebnislistenvorlage wird auf der Browserseite analysiert und grundsätzlich wiederverwendet ./templates/includes/post-list.ejs, aber der zusammenfassende Inhalt <%- post.abstract %> wird in <%- post.searchedPreview %> geändert. Verwenden der Vorschau von Suchergebnissen, die Schlüsselwörter enthalten.

• Die Suchergebnisliste verfügt noch nicht über eine Paginierungsfunktion. Bitte verwenden Sie das pagination nicht.

Stilanpassung:

1. Suchergebnisse und keine Suchergebnisse anzeigen

 < div id =" gridea-search-result " data-update =" <%= site.utils.now %> " >
    < div class =" searching " >搜索中...... </ div >
    < div class =" no-result " style =" display:none " >未搜索到相关文章</ div >
</ div >

• Behalten Sie vorhandene Attribute wie Klasse, ID usw. bei und fügen Sie neue Attribute, Symbole oder Animationen hinzu.

2. Eingabefeld „Suche“.

• Behalten Sie vorhandene Attribute bei, fügen Sie neue Attribute hinzu und fügen Sie Symbole oder Animationen hinzu.

3. Keyword-Hervorhebung

 < style >
   .searched-keyword {
     /* <span> 标签支持的所有 CSS 属性 */
    }
</ style > 

andere:

• Themen mit Gridea-Suche

• Offizielle Verzeichnisstruktur und Beschreibung der Seitenvariablen

• Bibliotheken von Drittanbietern:

  • Front-End-Fuzzy-Suche – Fuse.js: https://github.com/krisk/fuse

  • Vorlagenanalyse – EJS: https://github.com/mde/ejs

• Open-Source-Lizenz: MIT

• Verwandte Artikel:

  • Suchfunktion zum Gridea-Blog hinzufügen