gridea search

Plug-in de thème de recherche d'articles client de site statique Gridea

Aperçu : https://kytrun.com, ou téléchargez ce projet, placez example/ dans le chemin des thèmes de Gridea et exécutez Gridea vous-même.

Il ne convient qu'aux développeurs de thèmes Gridea ayant une base en programmation frontale ; les thèmes utilisant grinda-search peuvent être consultés ici .

Caractéristiques:

• Pages de résultats de recherche autonomes et liens Web
• Les développeurs de thèmes peuvent réutiliser les modèles existants dans une large mesure
• Étendre l'utilisation de l'API officielle, sans frais d'apprentissage supplémentaires
• Charger uniquement les ressources requises à l'aide de la recherche
• Personnalisation du style de support
• bonne compatibilité

Démarrage rapide :

1. Prenez le modèle de développement de thème officiel comme exemple et ajoutez de nouveaux fichiers basés sur celui-ci :

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

2. Modifiez les fichiers suivants

(1) ./templates/api.ejs

Le modèle qui génère l'API au format JSON Afin de réduire au maximum le temps de transmission réseau, certains attributs sont initialement annotés. Vous pouvez annuler les annotations correspondantes si nécessaire.

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

Modèle public, ajoutez un champ de recherche à l'emplacement approprié pour référence par d'autres pages :

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

La pièce existante ne peut pas être modifiée, d'autres attributs tels que la classe ou le style peuvent être ajoutés.

(3) ./templates/search.ejs

La page de recherche peut être modifiée en fonction d'autres pages, puis ajouter des nœuds de rendu des résultats de recherche et des scripts dépendants.

• Le script dépendant <script> doit être placé avant </body> . Ne modifiez pas l'ordre arbitrairement pour éviter les erreurs de chargement.

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

Le modèle de liste des résultats de recherche est analysé côté navigateur et essentiellement réutilisé ./templates/includes/post-list.ejs, mais le contenu récapitulatif <%- post.abstract %> est modifié en <%- post.searchedPreview %> , en utilisant Aperçu des résultats de recherche contenant des mots-clés.

• La liste des résultats de recherche n'a pas encore de fonction de pagination, veuillez ne pas utiliser le champ pagination .

Personnalisation du style :

1. Afficher les résultats de recherche et aucun résultat de recherche

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

• Conservez les attributs existants tels que la classe, l'identifiant, etc., et ajoutez de nouveaux attributs, icônes ou animations.

2. Zone de saisie de recherche

• Conservez les attributs existants, ajoutez de nouveaux attributs et ajoutez des icônes ou des animations.

3. Mise en évidence des mots clés

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

autre:

• Sujets utilisant Gridea-Search

• Structure du répertoire officiel et description des variables de page

• Bibliothèques tierces :

  • Recherche floue frontale - Fuse.js : https://github.com/krisk/fuse

  • Analyse de modèles - EJS : https://github.com/mde/ejs

• Licence open source : MIT

• Articles connexes :

  • Ajouter une fonction de recherche au blog Gridea