Points de base
setTimeout. Cet article a été examiné par Mark Brown. Merci à tous les pairs examinateurs de SitePoint pour avoir obtenu le contenu de SitePoint à son meilleur!
Les propriétaires de sites Web choisissent souvent d'utiliser le moteur de recherche personnalisé Google (GCSE) pour rechercher leur contenu au lieu d'utiliser des fonctionnalités de recherche intégrées et / ou personnalisées. La raison est simple - beaucoup moins de travail et dans la plupart des cas, elle peut atteindre le but. Si vous n'avez pas besoin de filtres avancés ou de paramètres de recherche personnalisés, GCSE est pour vous.
Dans cette astuce rapide, je vais vous montrer comment rendre manuellement le formulaire de recherche (pas besoin d'utiliser des balises GCSE spéciales) et des boîtes de résultats, qui permettent un contrôle plus fin et une méthode de réglage de style de champ de saisie de recherche plus propre.
Question
Habituellement, l'ajout de GCSE à votre site Web est aussi simple que des scripts de copie et des balises HTML personnalisées à votre site Web. Lorsque vous placez la balise GCSE spéciale, un champ de recherche d'entrée sera rendu. Type and Start Search à partir de ce champ effectuera une recherche Google basée sur des paramètres précédemment configurés (par exemple, la recherche uniquement SitePoint.com).Une question courante est "Comment changer l'espace réservé pour le champ de saisie du GCSE?". Malheureusement, la réponse suggérée est généralement erronée, car elle utilise la méthode non fiable
pour attendre que l'appel AJAX de GCSE se termine (assurez-vous que l'entrée est attachée au DOM), puis modifiez les propriétés via JavaScript. setTimeout
, ce qui garantira que l'entrée est chargée. setTimeout()
Créer un compte GCSE
Le moteur de recherche est entièrement configuré en ligne. La première étape consiste à aller sur le site Web de GCSE et à cliquer sur Ajouter. Suivez l'assistant pour remplir le nom de domaine que vous souhaitez rechercher (généralement URL de votre site Web). Vous pouvez maintenant ignorer tous les paramètres avancés.Après avoir cliqué sur "Finition", vous verrez trois options:
Accédez au panneau de configuration, cliquez sur l'ID de la recherche du moteur et notez cette valeur pour une utilisation ultérieure.
Paramètres HTML
Pour l'essayer, nous créerons un index.html de base avec le HTML requis, ainsi qu'un fichier app.js qui contient les fonctions requises pour le rendu et la recherche personnalisée.
Continuez à créer un fichier HTML de base avec:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GCSE test</title>
</head>
<body>
<h1>GCSE test</h1>
<div id="searchForm" class="gcse-search-wrapper"></div>
<div id="searchResults" class="gcse-results-wrapper"></div>
<🎜>
</body>
</html> Nous avons ajouté deux <div> et utilisé des classes spéciales pour identifier les éléments où le formulaire de recherche et les résultats doivent être présentés.
Fonction de rendu manuel
Entrez maintenant votre fichier app.js et ajoutez ce qui suit:
var config = {
gcseId: '006267341911716099344:r_iziouh0nw', // 替换为您的搜索引擎ID
resultsUrl: 'http://localhost:8080', // 替换为您的本地服务器地址
searchWrapperClass: 'gcse-search-wrapper',
resultsWrapperClass: 'gcse-results-wrapper'
};
var renderSearchForms = function () {
if (document.readyState == 'complete') {
queryAndRender();
} else {
google.setOnLoadCallback(function () {
queryAndRender();
}, true);
}
};
var queryAndRender = function() {
var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass);
var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass);
if (gsceSearchForms.length > 0) {
renderSearch(gsceSearchForms[0]);
}
if (gsceResults.length > 0) {
renderResults(gsceResults[0]);
}
};
var renderSearch = function (div) {
google.search.cse.element.render(
{
div: div.id,
tag: 'searchbox-only',
attributes: {
resultsUrl: config.resultsUrl
}
}
);
if (div.dataset &&
div.dataset.stylingFunction &&
window[div.dataset.stylingFunction] &&
typeof window[div.dataset.stylingFunction] === 'function') {
window[div.dataset.stylingFunction](div); // 传递div而不是form
}
};
var renderResults = function(div) {
google.search.cse.element.render(
{
div: div.id,
tag: 'searchresults-only'
});
};
window.__gcse = {
parsetags: 'explicit',
callback: renderSearchForms
};
(function () {
var cx = config.gcseId;
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
Tout d'abord, nous déclarons quelques variables pour la configuration. Mettez l'ID que vous avez rédigé auparavant dans le champ gcseId de configuration. Mettez l'URL du fichier index.html local dans le champ resultsUrl. C'est là que la recherche sera redirigée après que l'utilisateur soumet la requête. De plus, GCSE s'attendra à rendre le champ de résultats sur l'URL fournie.
renderSearchForms Fonction vérifie si la page est chargée, et si elle est chargée, la fonction de rappel sera responsable du rendu queryAndRender(); Plus tard après le chargement du document.
queryAndRender Fonction Interroge le DOM avec des éléments de la classe fournie dans la configuration. Si le div wrapper est trouvé, renderSearch() et renderResults() sont appelés respectivement pour rendre les champs de recherche et de résultats.
renderSearch Les fonctions sont là où la magie réelle se produit.
Nous utilisons l'API de recherche Google (plus de documentation ici sur la façon d'utiliser l'objet google.search.cse.element) pour créer la zone de recherche et s'il existe une requête active (résultat), la zone de résultat est créée.
Render accepte plus de paramètres que ce qui est fourni dans cet exemple, alors assurez-vous de vérifier la documentation si une personnalisation supplémentaire est requise. Le paramètre div accepte en fait l'ID de la div que nous allons rendre, et le paramètre tag indique ce que nous allons rendre exactement ( Résultats ou Rechercher ou les deux ).
De plus, renderSearch() trouve l'attribut de données de l'élément de wrapper, et si l'attribut de style de style , il recherchera le nom de la fonction dans la portée et l'appliquera à l'élément . C'est notre chance de coiffer l'élément.
window.__gcse = {
parsetags: 'explicit',
callback: renderSearchForms
}; Dans cet extrait de code, nous définissons une variable de rappel dans la portée globale afin que GCSE puisse utiliser cette variable en interne et exécuter la fonction de rappel une fois le chargement terminé. Cela rend cette méthode beaucoup mieux que d'utiliser la solution setTimeout() pour modifier l'espace réservé (ou autre chose) du champ de saisie.
Test Run
Jusqu'à présent, nous avons inclus tout ce dont nous avons besoin pour rendre la zone de recherche et les résultats. Si vous avez installé Node.js, accédez au dossier où les fichiers index.html et app.js sont placés et exécutez la commande http-server. Par défaut, cela fournira le contenu dans le dossier du port 8080 sur localhost.
Fonction de style
Maintenant, nous allons ajouter des fonctions de style personnalisé à la recherche de recherche. Return index.html et ajouter un attribut #searchForm sur le styling-function div:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GCSE test</title>
</head>
<body>
<h1>GCSE test</h1>
<div id="searchForm" class="gcse-search-wrapper"></div>
<div id="searchResults" class="gcse-results-wrapper"></div>
<🎜>
</body>
</html>Accédez maintenant à app.js, en haut du fichier, dans la déclaration de la variable de configuration, ajoutez une nouvelle fonction:
var config = {
gcseId: '006267341911716099344:r_iziouh0nw', // 替换为您的搜索引擎ID
resultsUrl: 'http://localhost:8080', // 替换为您的本地服务器地址
searchWrapperClass: 'gcse-search-wrapper',
resultsWrapperClass: 'gcse-results-wrapper'
};
var renderSearchForms = function () {
if (document.readyState == 'complete') {
queryAndRender();
} else {
google.setOnLoadCallback(function () {
queryAndRender();
}, true);
}
};
var queryAndRender = function() {
var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass);
var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass);
if (gsceSearchForms.length > 0) {
renderSearch(gsceSearchForms[0]);
}
if (gsceResults.length > 0) {
renderResults(gsceResults[0]);
}
};
var renderSearch = function (div) {
google.search.cse.element.render(
{
div: div.id,
tag: 'searchbox-only',
attributes: {
resultsUrl: config.resultsUrl
}
}
);
if (div.dataset &&
div.dataset.stylingFunction &&
window[div.dataset.stylingFunction] &&
typeof window[div.dataset.stylingFunction] === 'function') {
window[div.dataset.stylingFunction](div); // 传递div而不是form
}
};
var renderResults = function(div) {
google.search.cse.element.render(
{
div: div.id,
tag: 'searchresults-only'
});
};
window.__gcse = {
parsetags: 'explicit',
callback: renderSearchForms
};
(function () {
var cx = config.gcseId;
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
Essayez maintenant de charger à nouveau la page de test et vous verrez l'espace réservé.
Conclusion
Les moteurs de recherche personnalisés Google sont très efficaces pour une configuration rapide de recherches simples, en particulier lorsque le site Web est juste un HTML statique. Avec juste une petite quantité de code JavaScript, vous pouvez personnaliser les formulaires de recherche et les pages de résultats pour fournir aux utilisateurs une expérience plus transparente.
utilisez-vous GCSE, ou avez-vous trouvé une meilleure solution? Veuillez commenter ci-dessous!
FAQ sur la définition des styles de recherche personnalisés de Google
Personnaliser l'apparence de moteurs de recherche Google personnalisés impliquant l'utilisation de CSS (Cascading Styleshets). CSS est une langue de feuille de style qui décrit l'apparence et la mise en forme de documents écrits en HTML. Vous pouvez modifier la couleur, la police, la taille et d'autres éléments des moteurs de recherche. Pour ce faire, vous devez accéder à l'API de contrôle d'élément de recherche programmable, qui vous permet de personnaliser les éléments de recherche. Vous pouvez ensuite ajouter CSS à la bonne section pour modifier l'apparence du moteur de recherche.
Oui, vous pouvez ajouter des recherches personnalisées Google à votre site Web. Google fournit une API JSON Rechercher personnalisée que vous pouvez utiliser pour envoyer des demandes GET. Cette API renvoie les résultats de recherche au format JSON. Vous pouvez ensuite utiliser ces résultats pour créer un moteur de recherche personnalisé sur votre site Web. Cela permet à vos utilisateurs de rechercher votre site Web ou d'autres sites Web que vous spécifiez.
L'implémentation d'une zone de recherche avec Google Custom Recherche implique la création d'un ID de moteur de recherche, que vous pouvez faire sur un site Web de moteur de recherche programmable. Une fois que vous avez l'ID, vous pouvez utiliser l'API de contrôle des éléments de recherche personnalisée pour créer une zone de recherche. Vous pouvez ensuite personnaliser cette zone de recherche à l'aide de CSS.
L'API de contrôle d'élément de recherche programmable est un ensemble de fonctions fournies par Google qui vous permet de personnaliser les moteurs de recherche programmables. Cela comprend la création de cases de recherche, la personnalisation de l'apparence des moteurs de recherche et le contrôle des résultats de recherche.
Vous pouvez utiliser l'API de contrôle d'élément de recherche programmable pour contrôler les résultats de recherche dans les recherches personnalisées de Google. Cette API fournit des fonctions qui vous permettent de spécifier le site Web que vous avez recherché, le nombre de résultats renvoyés et l'ordre dans lequel les résultats sont affichés.
Oui, vous pouvez utiliser les recherches personnalisées Google à des fins commerciales. Cependant, vous devez comprendre les conditions d'utilisation. Par exemple, vous ne pouvez pas utiliser les moteurs de recherche pour afficher le contenu des adultes ou promouvoir des activités illégales.
Vous pouvez utiliser CSS pour modifier la couleur des résultats de recherche dans la recherche personnalisée de Google. Vous devez accéder à l'API de contrôle d'élément de recherche programmable et ajouter CSS à la section correcte. Vous pouvez modifier les couleurs du texte, de l'arrière-plan et d'autres éléments de résultat de recherche.
Oui, vous pouvez personnaliser les recherches à l'aide de Google sur votre appareil mobile. Le moteur de recherche programmable est conçu pour être réactif, ce qui signifie qu'il s'ajustera pour s'adapter à la taille de l'écran de l'appareil qu'elle affiche. Vous pouvez également utiliser CSS pour personnaliser l'apparence du moteur de recherche pour le rendre plus convivial.
Vous pouvez ajouter des logos dans mon moteur de recherche personnalisé Google à l'aide de CSS. Vous devez accéder à l'API de contrôle d'élément de recherche programmable et ajouter CSS à la section correcte. Vous pouvez ensuite ajouter une URL d'image à afficher comme logo.
Bien que vous puissiez utiliser Google pour personnaliser les recherches sans connaissance de codage, il est recommandé d'avoir une certaine compréhension de HTML et CSS pour personnaliser pleinement votre moteur de recherche. Cependant, Google fournit une documentation détaillée et des tutoriels pour vous aider à démarrer.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment vérifier la mémoire vidéo de Win11
Tutoriel du portefeuille Eou web3
Comment définir un écran large ppt
Que diriez-vous de l'échange MEX
Comment résoudre l'erreur 504 dans CDN
Utilisation de strncpy
Auto-apprentissage pour débutants en langage C sans fondement
commande de capture de paquets Linux
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
