Rapport de recherche sur l'état de la recherche sur site dans l'enseignement supérieur avec The Chronicle of Higher Education | Télécharger le rapport
Annexe A Démo
Rapport de recherche sur l'état de la recherche sur site dans l'enseignement supérieur avec The Chronicle of Higher Education | Télécharger le rapport
Barre de menu
Fermer

16 novembre 2023

Tyler Huff

|

7 min de lecture

Créez une recherche de site attrayante avec SearchStax Site Search et notre nouveau kit d'interface de recherche. Découvrez comment créer des interfaces de recherche dynamiques dans Vue qui s'intègrent parfaitement à la conception, à la technologie et au processus de diffusion de votre site.

Dans l'environnement numérique actuel, la recherche n'est pas seulement un atout, mais un incontournable. Qu'il s'agisse des systèmes de santé souhaitant offrir un accès rapide aux ressources destinées aux patients, des plateformes d'enseignement supérieur devant parcourir de vastes ressources pédagogiques ou des portails gouvernementaux nécessitant une recherche efficace de documents publics, la recherche est au cœur de l'expérience utilisateur.

SearchStax Site Search inclut désormais le Kit d'interface utilisateur de recherche – un ensemble de composants front-end personnalisables, d'expériences de recherche prédéfinies et d'API pour créer des front-ends dynamiques et headless dans des frameworks populaires comme Vue. Si vous avez une implémentation Drupal headless, SearchStudio-UX-Vue est la bibliothèque qui répond efficacement à ces besoins.

Recherche de chantier avec une application Vue

L’objectif principal de la Pack SearchStudio-UX-Vue simplifie le développement d'interfaces de recherche dans les applications Vue.js. Il gère les complexités du front-end et de l'interface utilisateur, ainsi que l'authentification et les requêtes API. Vous pouvez ainsi vous concentrer sur une expérience utilisateur exceptionnelle, parfaitement intégrée à la conception et à la technologie de votre site. Grâce à une gamme de composants Vue préconçus, tels que les champs de recherche, les filtres et les affichages de résultats, vous pouvez facilement créer des interfaces sophistiquées. accessible interfaces de recherche en tant que page de recherche autonome propulsée par Vue ou dans le cadre d'une application headless Vue plus vaste.

Caractéristiques principales

  • Intégration complète avec SearchStax Site Search – Tirez parti de puissantes fonctionnalités de recherche telles que la tolérance aux fautes de frappe, les synonymes et les facettes sans vous plonger dans les complexités de la mise en œuvre de l'interface utilisateur.
  • Composants prêts à l'emploi – Utilisez des composants Vue prédéfinis qui sont à la fois performants et accessibles prêts à l’emploi.
  • Personnalisable – Ajustez les styles et les comportements pour que ces composants soient vraiment les vôtres, en les alignant parfaitement avec l’identité de votre marque.

Pourquoi utiliser SearchStudio-UX-Vue ?

  • Performance – Les composants sont optimisés pour des performances à grande vitesse, garantissant une expérience utilisateur fluide.
  • Accessibilité – Conçu dans un souci d’accessibilité, garantissant la conformité aux normes clés.
  • Vitesse de développement – Pourquoi construire à partir de zéro alors que vous pouvez assembler une interface utilisateur de recherche puissante en quelques minutes ?
  • Compatibilité Vue.js – Si vous travaillez déjà avec Vue.js, intégrer SearchStudio-UX-Vue est un jeu d'enfant.

Installation des composants de l'interface utilisateur de recherche pour Vue

Commencer avec SearchStudio-UX-Vue C'est incroyablement simple. Vous pouvez ajouter des composants d'interface utilisateur de recherche à une application Vue existante ou nouvelle grâce à NPM.

				
					npm install --save @searchstax-inc/searchstudio-ux-vue

Configuration dans un projet Vue

Pour utiliser les composants d'interface utilisateur de recherche dans Vue, vous devrez importer les composants et interfaces requis, puis les enregistrer globalement dans votre application Vue.js.

				
					importer { SearchstaxWrapper, SearchstaxInputWidget } depuis '@searchstax-inc/searchstudio-ux-vue'; Vue.component('SearchstaxWrapper', SearchstaxWrapper); Vue.component('SearchstaxInputWidget', SearclhstaxInputWidget);

Personnalisation des composants de l'interface utilisateur de recherche

Le RechercheStaxWrapper Ce composant gère la configuration, les connexions API et la gestion des états pour votre expérience de recherche. Les composants de recherche individuels devront être inclus dans ce composant. RechercheStaxWrapper pour répondre aux actions des utilisateurs et recevoir les données des résultats de recherche.

				
					<SearchstaxWrapper> <!-- Autres composants de recherche de site SearchStax ici --> </SearchstaxWrapper>

Configuration et initialisation

Avant de pouvoir vous lancer dans la création de votre interface de recherche, vous devrez configurer les champs de recherche dans SearchStax Site Search et incluez vos points de terminaison de compte et vos jetons dans votre application Vue.

Vous pouvez accéder à vos API de recherche de site SearchStax et à vos jetons d'authentification en vous connectant à SearchStax Site Search et en accédant à 'Paramètres' Pour votre application de recherche. De là, vous pouvez accéder aux URL des points de terminaison et aux jetons d'authentification des API de recherche, de découverte et d'analyse. Utilisez uniquement des jetons en lecture seule dans votre interface, car ils seront exposés dans votre code source et dans toutes les requêtes de l'API de recherche.

				
					<SearchstaxWrapper :language="sampleConfig.language" :searchURL="sampleConfig.searchURL" :suggesterURL="sampleConfig.suggesterURL" :trackApiKey="sampleConfig.trackApiKey" :searchAuth="sampleConfig.searchAuth" :authType="sampleConfig.authType" :router="sampleConfig.router" :beforeSearch="sampleConfig.hooks.beforeSearch" :afterSearch="sampleConfig.hooks.afterSearch" > </SearchstaxWrapper>

Exemple d'initialisation

				
					sampleConfig = { language: "en", searchURL: "", // SearchStax Site Search API Select endpoint suggesterURL: "", // SearchStax Site Search Search API Auto-Suggest endpoint, trackApiKey: "", // SearchStax Site Search Analytics API token authType: "token", router: { enabled: true, routeName: "searchstax", title: (result: ISearchObject) => { return "Résultats de la recherche pour: " + result.query; }, ignoredKeys: [], }, hooks: { beforeSearch: function (props: ISearchObject) { const propsCopy = { ...props }; return propsCopy; }, afterSearch: function (results: ISearchstaxParsedResult[]) { const copy = [...results]; return copy; }, } };
L'objet d'initialisation doit être de type : ISearchStasxConfig
				
					interface ISearchstaxConfig { language: string; // code de langue. Exemple: 'en' searchURL: string; // SearchStudio select endpoint suggesterURL: string; // SearchStudio suggest endpoint trackApiKey: string; // Clé API utilisée pour le suivi des événements searchAuth: string; // Valeur d'authentification. basée sur authType, c'est soit une valeur de jeton, soit une valeur d'authentification de base authType: "token" | "basic"; // Type d'authentification autoCorrect?: boolean; // si défini sur true, il corrigera automatiquement les mots mal orthographiés. La valeur par défaut est false router?: IRouterConfig; // objet facultatif contenant les paramètres du routeur hooks?: { // objet facultatif qui fournit diverses options de hook beforeSearch?: (props: ISearchObject) => ISearchObject | null; // cette fonction est appelée avant de lancer la recherche. Les searchProps sont transmises en tant que propriété et peuvent être modifiées. Si elles sont transmises, une recherche ultérieure s'exécutera avec des propriétés modifiées. Si null est renvoyé, l'événement est annulé et la recherche ne se déclenche jamais. afterSearch?: (results: ISearchstaxParsedResult[]) => ISearchstaxParsedResult[]; // Cette fonction est appelée après le lancement de la recherche et avant le rendu. Elle doit renvoyer un tableau de résultats, modifiés ou non. }; }

Ajout de composants

Créer une interface utilisateur de recherche est aussi simple que d'inclure les composants souhaités dans vos modèles Vue.js.
				
					<SearchstaxWrapper> <SearchstaxInputWidget /> <SearchstaxResultsWidget /> <!-- Autres composants --> </SearchstaxWrapper>
Les composants peuvent être personnalisés avec des fonctionnalités et un style supplémentaires selon vos besoins. Vous pouvez également créer plusieurs implémentations des composants d'interface de recherche individuels pour différentes expériences de recherche, modèles et styles.

Style

Pour ceux qui cherchent à personnaliser davantage l'aspect visuel, la bibliothèque fournit des CSS facilement importables.
				
					@import '@searchstax-inc/searchstudio-ux-vue/dist/styles/mainTheme.css';
Vous pouvez également utiliser vos propres bibliothèques de composants et de styles afin que vos composants de recherche suivent les mêmes conventions de style que les autres composants de votre application Vue tout en utilisant la même interface, le même thème ou le même processus de style.

Intégration Drupal - Application Vue autonome ou entièrement headless

Vous pouvez utiliser les composants d'interface utilisateur de recherche pour créer une application Vue autonome dans Drupal ou aller entièrement sans têteUne application Vue autonome de base peut fournir une page de recherche réactive et interactive sans avoir besoin de modifier le reste de votre site Drupal.

Grâce aux récentes améliorations apportées à l'API JSON de Drupal, telles qu'une pagination optimisée et un filtrage avancé, l'intégration de fonctionnalités de recherche de pointe est plus fluide que jamais. SearchStudio-UX-Vue complète ces avancées en fournissant des composants Vue.js prêts à l'emploi qui gèrent une multitude de fonctionnalités de recherche. Résultat : une expérience utilisateur plus interactive et efficace, ce qui en fait un complément idéal aux configurations Drupal de différents secteurs.

Recherche de site Stax pour Drupal

Les composants d'interface utilisateur de recherche offrent à votre équipe front-end et de développement la flexibilité nécessaire pour créer et déployer des recherches sur site dans différents environnements et processus de déploiement. Vous pouvez utiliser Vue pour gérer toutes les expériences front-end ou combiner Vue avec d'autres CMS et workflows de rendu de contenu.

  • Entièrement sans tête – Les composants de l'interface utilisateur de recherche peuvent être utilisés dans une configuration entièrement sans tête et découplée avec votre application Vue déployée et servie à partir de son propre environnement (par exemple, une instance EC2 multirégionale sur AWS)
  • Hybride sans tête – L’expérience de recherche et d’autres fonctionnalités d’application dynamiques peuvent être hébergées dans une application Vue avec du contenu statique fourni par Drupal ou un autre CMS
  • Application intégrée – Créez une application Vue autonome qui inclut des composants d’interface utilisateur de recherche et intégrez l’application Vue et les ressources externes associées (JavaScript, CSS, etc.) dans une page ou un module Drupal (voir le Démo SearchStax DrupalCon Lille sur Github pour un exemple)

Comparaison avec d'autres bibliothèques

Bien qu'il existe de nombreuses bibliothèques d'interface utilisateur de recherche, SearchStudio-UX-Vue se distingue par son intégration complète avec les fonctionnalités de SearchStudio, sa simplicité d'utilisation et sa flexibilité. Elle offre le meilleur des deux mondes en combinant les puissantes capacités back-end de SearchStudio avec la réactivité front-end de Vue.js.

Conclusion

Si vous recherchez une solution d'interface utilisateur de recherche rapide, conviviale et facile à mettre en œuvre, ne cherchez pas plus loin que SearchStudio-UX-Vue. Alors, n'hésitez plus, testez-la et améliorez votre expérience utilisateur de recherche.
Qu'est-ce que Vue ?

Vue est un framework front-end optimisé par JavaScript. Vue permet aux développeurs front-end de créer des interfaces utilisateur dynamiques et réactives avec des composants réutilisables.

Quels sont les avantages de SearchStax Site Search ?

SearchStax Studio permet une indexation de contenu simplifiée grâce à une intégration native au CMS, des API et des robots d'exploration. SearchStax Studio inclut également des fonctionnalités de personnalisation de la recherche avec modélisation de la pertinence, facettage, suggestion automatique, recherches associées et analyses.

Quel système CMS dois-je utiliser avec Vue ?

Vue n'est lié à aucun système de gestion de contenu spécifique, vous pouvez donc créer une application Vue intégrée à votre CMS ou créer une expérience sans tête à l'aide de Vue et des API de contenu dans votre CMS.

Qu'est-ce qu'un système CMS headless ?

Un système CMS sans tête est un système de gestion de contenu qui dissocie le contenu de la couche de présentation, ce qui signifie que vous pouvez stocker votre contenu en un seul endroit et le diffuser sur n'importe quelle plate-forme ou appareil via une API.

Quels sont les avantages d’un système CMS headless par rapport à un CMS traditionnel ?

Un système CMS headless présente de nombreux avantages par rapport à un système CMS traditionnel :

  • Vous permet d'utiliser n'importe quel framework ou technologie front-end, y compris Vue, React, Angular ou HTML et CSS simples
  • Vous permet de diffuser votre contenu sur plusieurs canaux
  • Améliore les performances du site Web en réduisant la charge du serveur et en ne fournissant que le contenu nécessaire à chaque demande
  • Améliore la sécurité de votre site Web en minimisant la « surface d'attaque »

Par Tyler Huff

Ingénieur solutions en pré/post-vente

« Vous pouvez utiliser les composants d'interface utilisateur de recherche pour créer une application Vue autonome dans Drupal ou opter pour une application entièrement headless… »

Recevez notre newsletter

The Stack est livré tous les deux mois avec des tendances du secteur, des informations, des produits et plus encore

Vous aimerez peut-être aussi :

La société d'expérience de recherche
G2 Enterprise Search Reviews for SearchStax

Produits

Tarification

Ressources

Services

Ressources

Tarification

Entreprise

Planifier une démonstration
© 2025 SearchStax, Inc. Tous droits réservés. Conditions d'utilisation | politique de confidentialité
fr_CAFrançais du Canada
en_USEnglish fr_CAFrançais du Canada