Web-Frontend
js-Tutorial
Schneller Tipp: So stylen Sie die benutzerdefinierte Suche in Google manuell
Schneller Tipp: So stylen Sie die benutzerdefinierte Suche in Google manuell
Feb 17, 2025 am 09:42 AM
Kernpunkte
- Durch manuelles Rendern von Suchformularen (ohne spezielle GCSE -Tags) k?nnen Sie die benutzerdefinierte Suchmaschine (GCSE) manuell stylen, wodurch Sie eine bessere Kontrolle über die Sucheingabefelder erhalten und sie einfacher aussehen lassen.
- GCSE -Rückruffunktion stellt sicher, dass die Eingabe vor dem ?ndern der Eingangseigenschaften geladen wird. Diese Methode ist zuverl?ssiger als die Verwendung der
setTimeout-Methode. - Die Google -Such -API kann zum Erstellen von Suchfeldern und Ergebnisfeldern verwendet werden. Wenn eine aktive Abfrage vorliegt, wird auch ein Ergebnisbox erstellt. Andere Anpassungen k?nnen durch die Nachahmung des Dokuments erreicht werden.
- Benutzerdefinierte Stilfunktionen k?nnen der Suchdiv für eine weitere Anpassung hinzugefügt werden. Diese Funktion kann verwendet werden, um Platzhalter zu ?ndern, Hintergründe zu l?schen und Ereignisse hinzuzufügen, die Hintergründe entfernen, wenn sie au?erhalb des Fokus stehen.
Dieser Artikel wurde von Mark Brown überprüft. Vielen Dank an alle Peer -Rezensenten bei SitePoint für die Erh?hung der Inhalte von SitePoint -Inhalten!
Website-Eigentümer verwenden h?ufig die Suche nach Google Custom Suchmaschine (GCSE), um nach ihren Inhalten zu suchen, anstatt integrierte und/oder benutzerdefinierte Suchfunktionen zu verwenden. Der Grund ist einfach - viel weniger Arbeit und kann in den meisten F?llen den Zweck erreichen. Wenn Sie keine erweiterten Filter oder benutzerdefinierten Suchparameter ben?tigen, ist GCSE für Sie.
In diesem schnellen Tipp zeige ich Ihnen, wie das Suchformular manuell (keine speziellen GCSE -Tags verwenden) und Ergebnisfelder manuell rendern, die eine feinere Steuerung und eine sauberere Sucheingabemethode erm?glichen.
Frage
Normalerweise ist das Hinzufügen von GCSE zu Ihrer Website so einfach wie Kopierkripte und benutzerdefinierte HTML-Tags auf Ihre Website. Wo Sie das spezielle GCSE -Tag platzieren, wird ein Eingabesuchfeld gerendert. Geben Sie die Suche in diesem Feld ein und starten Sie eine Google -Suche basierend auf zuvor konfigurierten Parametern (beispielsweise nur sepoint.com).Eine h?ufige Frage ist: "Wie kann man den Platzhalter für das GCSE -Eingabefeld ver?ndern?". Leider ist die vorgeschlagene Antwort normalerweise falsch, da die unzuverl?ssige
-Methode verwendet wird, um auf den Ajax Call of GCSE abzuschlie?en (stellen Sie sicher, dass die Eingabe an die DOM angeh?ngt ist) und dann die Eigenschaften über JavaScript zu ?ndern. setTimeout
setTimeout()
Suchmaschine ist online vollst?ndig konfiguriert. Der erste Schritt besteht darin, zur GCSE -Website zu gehen und auf Hinzufügen zu klicken. Folgen Sie dem Assistenten, um den Domain -Namen auszufüllen, nach dem Sie suchen m?chten (normalerweise Ihre Website -URL). Jetzt k?nnen Sie alle erweiterten Einstellungen ignorieren.
Nach dem Klicken auf "Finish" sehen Sie drei Optionen:
- "Code erhalten", wodurch Sie durch das führen, was Sie kopieren müssen und wo Sie ihn platzieren müssen, damit die Suche auf Ihrer Website angezeigt wird.
- "?ffentliche URL" zeigt Ihnen eine Arbeitsvorschau der festgelegten Suche
- "Bedienfeld" wird verwendet, um Suchvorg?nge
Gehen Sie zum Bedienfeld, klicken Sie auf Suchmaschinen -ID und beachten Sie diesen Wert für die sp?tere Verwendung.
HTML -Einstellungen
Um es auszuprobieren, erstellen wir einen grundlegenden Index.html mit der erforderlichen HTML sowie eine App.js -Datei, die die für das Rendern und benutzerdefinierten Suche erforderlichen Funktionen enth?lt.
Erstellen Sie weiterhin eine grundlegende HTML -Datei mit:
<!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>
<div> Wir haben zwei
Manuelle Rendering -Funktion
Geben Sie jetzt Ihre App.js -Datei ein und fügen Sie Folgendes hinzu:
var config = {
gcseId: '006267341911716099344:r_iziouh0nw', // 替換為您的搜索引擎ID
resultsUrl: 'http://localhost:8080', // 替換為您的本地服務(wù)器地址
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);
})();
gcseId Erstens deklarieren wir einige Variablen für die Konfiguration. Geben Sie die ID, die Sie zuvor geschrieben haben, in das Feld resultsUrl konfiguriert. Legen Sie die URL der lokalen Index.html -Datei in das Feld
renderSearchForms queryAndRender() Funktionsprüfungen Wenn die Seite geladen ist und sie geladen ist, ist die Rückruffunktion für die Wiedergabe von
queryAndRender renderSearch() Funktion Abfragen Sie das DOM mit Elementen der in der Konfiguration bereitgestellten Klasse. Wenn die Wrapper Div gefunden wird, werden renderResults() und
renderSearch
google.search.cse.element Wir verwenden die Google -Search -API (weitere Dokumentation hier, um das Objekt
Die Funktion div Render akzeptiert mehr Parameter als in diesem Beispiel. überprüfen Sie daher die Dokumentation, wenn eine weitere Anpassung erforderlich ist. Der Parameter tag akzeptiert tats?chlich die ID des DIV, die wir rendern werden, und der Parameter zeigt an ).
findet au?erdem das Datenattribut des Wrapper-Elements, und wenn das Attribut
angegeben ist, wird nach dem Funktionsnamen im Bereich des Geltungsbereichs gesucht und auf das Element angewendet . Dies ist unsere Chance, das Element zu stylen. renderSearch()
In diesem Code -Snippet setzen wir eine Rückrufvariable im globalen Bereich, damit GCSE diese Variable intern verwenden und die Rückruffunktion nach Abschluss des Ladens ausführen kann. Dies macht diese Methode viel besser, als die
window.__gcse = {
parsetags: 'explicit',
callback: renderSearchForms
};
setTimeout() Testlauf
Bisher haben wir alles aufgenommen, was wir brauchen, um das Suchfeld und die Ergebnisse zu rendern. Wenn Sie Node.js installiert haben, gehen Sie zum Ordner, in dem die Dateien index.html und app.js platziert sind, und führen Sie den Befehl http-server aus. Standardm??ig liefert dies den Inhalt im Ordner auf Port 8080 auf Localhost.
Stilfunktion
Jetzt werden wir der Suchdiv benutzerdefinierte Stilfunktionen hinzufügen. Return index.html und fügen Sie ein #searchForm -Merkmals auf das 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>
Gehen Sie nun zu App.js oben in der Datei unter der Erkl?rung der Konfigurationsvariablen eine neue Funktion:
var config = {
gcseId: '006267341911716099344:r_iziouh0nw', // 替換為您的搜索引擎ID
resultsUrl: 'http://localhost:8080', // 替換為您的本地服務(wù)器地址
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);
})();
Versuchen Sie nun erneut, die Testseite zu laden, und Sie sehen den richtigen Platzhalter.
Schlussfolgerung
google benutzerdefinierte Suchmaschinen sind sehr effektiv für die schnelle Einrichtung einfacher Suchanfragen, insbesondere wenn die Website nur statisches HTML ist. Mit nur einer kleinen Menge JavaScript -Code k?nnen Sie Suchformulare und Ergebnisseiten anpassen, um den Benutzern ein nahtloseres Erlebnis zu bieten.
Verwenden Sie GCSE oder haben Sie eine bessere L?sung gefunden? Bitte kommentieren Sie unten!
FAQ beim Einstellen von Google benutzerdefinierten Suchstilen
Wie passen Sie das Erscheinungsbild der benutzerdefinierten Suchmaschine von Google an?
Passen Sie das Erscheinungsbild benutzerdefinierter Google -Suchmaschinen an, die die Verwendung von CSS (Cascading -Stylesheets) beinhalten. CSS ist eine Stylesheet -Sprache, die das Erscheinungsbild und die Formatierung von Dokumenten in HTML beschreibt. Sie k?nnen die Farbe, Schriftart, Gr??e und andere Elemente von Suchmaschinen ?ndern. Zu diesem Zweck müssen Sie auf die API für programmierbare Suchelemente -Steuerelemente zugreifen, mit der Sie Suchelemente anpassen k?nnen. Sie k?nnen dann dem richtigen Abschnitt CSS hinzufügen, um das Aussehen der Suchmaschine zu ?ndern.
Kann ich meiner Website eine benutzerdefinierte Suche von Google hinzufügen?
Ja, Sie k?nnen Ihre Website benutzerdefinierte Suchanfragen hinzufügen. Google bietet eine benutzerdefinierte Such -JSON -API, mit der Sie GET -Anfragen senden k?nnen. Diese API gibt Suchergebnisse im JSON -Format zurück. Sie k?nnen diese Ergebnisse dann verwenden, um eine benutzerdefinierte Suchmaschine auf Ihrer Website zu erstellen. Auf diese Weise k?nnen Ihre Benutzer nach Ihrer Website oder anderen von Ihnen angegebenen Websites suchen.
Wie implementieren Sie das Suchfeld mithilfe von Google Custom Search?
Implementieren eines Suchfelds mit Google Custom Search beinhaltet das Erstellen einer Suchmaschinen -ID, die Sie auf einer programmierbaren Suchmaschinen -Website durchführen k?nnen. Sobald Sie die ID haben, k?nnen Sie die Custom Suchelement Control -API verwenden, um ein Suchfeld zu erstellen. Sie k?nnen dieses Suchfeld dann mit CSS anpassen.
Was ist die Programmabteilung für programmierbare Suchelemente?
Die von Google bereitgestellte Funktionen für programmierbare Suchelemente -Steuerelemente ist eine Reihe von Funktionen, mit denen Sie programmierbare Suchmaschinen anpassen k?nnen. Dazu geh?rt das Erstellen von Suchfeldern, das Anpassen des Aussehens von Suchmaschinen und die Steuerung von Suchergebnissen.
So steuern Sie die Suchergebnisse bei der benutzerdefinierten Google -Suche?
Sie k?nnen mit der programmierbaren Suchelement -Steuerelement -API die Suchergebnisse bei den benutzerdefinierten Suchanfragen von Google steuern. Diese API bietet Funktionen, mit denen Sie die von Ihnen gesuchte Website, die Anzahl der zurückgegebenen Ergebnisse und die Reihenfolge angeben k?nnen, in der die Ergebnisse angezeigt werden.
Kann ich Google Custom Search nach kommerziellen Zwecken verwenden?
Ja, Sie k?nnen Google Custom -Suche nach kommerziellen Zwecken verwenden. Sie müssen jedoch die Nutzungsbedingungen verstehen. Sie k?nnen beispielsweise keine Suchmaschinen verwenden, um Inhalte für Erwachsene anzuzeigen oder illegale Aktivit?ten zu f?rdern.
Wie ?ndere ich die Farbe der Suchergebnisse bei der benutzerdefinierten Google -Suche?
Sie k?nnen CSS verwenden, um die Farbe der Suchergebnisse bei der benutzerdefinierten Suche von Google zu ?ndern. Sie müssen auf die API für programmierbare Suchelemente -Steuerelemente zugreifen und dem richtigen Abschnitt CSS hinzufügen. Sie k?nnen die Farben von Text-, Hintergrund- und anderen Suchergebniselementen ?ndern.
Kann ich Google zur benutzerdefinierten Suche auf meinem Mobilger?t verwenden?
Ja, Sie k?nnen die Suche mit Google auf Ihrem mobilen Ger?t anpassen. Die programmierbare Suchmaschine ist so konzipiert, dass sie reaktionsschnell ist, was bedeutet, dass sie sich an die Bildschirmgr??e des von ihm angezeigten Ger?ts anpasst. Sie k?nnen auch CSS verwenden, um das Aussehen der Suchmaschine anzupassen, um sie mobiler zu gestalten.
Wie füge ich ein Logo in meine benutzerdefinierte Suchmaschine von Google hinzu?
Sie k?nnen mit CSS Logos in meiner benutzerdefinierten Suchmaschine von Google hinzufügen. Sie müssen auf die API für programmierbare Suchelemente -Steuerelemente zugreifen und dem richtigen Abschnitt CSS hinzufügen. Sie k?nnen dann eine Bild -URL hinzufügen, die Sie als Logo anzeigen k?nnen.
Kann ich Google zur benutzerdefinierten Suche ohne Codierungswissen verwenden?
W?hrend Sie Google verwenden k?nnen, um Suchvorg?nge ohne Codierungskenntnisse anzupassen, wird empfohlen, dass Sie ein gewisses Verst?ndnis von HTML und CSS haben, um Ihre Suchmaschine vollst?ndig anzupassen. Google bietet jedoch detaillierte Dokumentationen und Tutorials, um Ihnen den Einstieg zu erleichtern.
Das obige ist der detaillierte Inhalt vonSchneller Tipp: So stylen Sie die benutzerdefinierte Suche in Google manuell. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Hei?e Themen
Java vs. JavaScript: Die Verwirrung beseitigen
Jun 20, 2025 am 12:27 AM
Java und JavaScript sind unterschiedliche Programmiersprachen, die jeweils für verschiedene Anwendungsszenarien geeignet sind. Java wird für die Entwicklung gro?er Unternehmen und mobiler Anwendungen verwendet, w?hrend JavaScript haupts?chlich für die Entwicklung von Webseiten verwendet wird.
JavaScript -Kommentare: Kurzer Erl?uterung
Jun 19, 2025 am 12:40 AM
JavaScriptComents AreseessentialFormaintaining, Lesen und GuidingCodeexexecution.1) einzelne Linecommments Arequickickexplanationen.2) Multi-LindexplainComproxlogicorProvedetailedDocumentation.3) InlinecommentsclarifyspecificPartsosensofCode.BestPracticic
Wie arbeite man mit Daten und Zeiten in JS?
Jul 01, 2025 am 01:27 AM
Die folgenden Punkte sollten bei der Verarbeitung von Daten und Zeiten in JavaScript festgestellt werden: 1. Es gibt viele M?glichkeiten, Datumsobjekte zu erstellen. Es wird empfohlen, ISO -Format -Zeichenfolgen zu verwenden, um die Kompatibilit?t sicherzustellen. 2. Die Zeitinformationen erhalten und festlegen k?nnen und setzen Sie Methoden fest, und beachten Sie, dass der Monat mit 0 beginnt. 3. Die manuell formatierende Daten sind Zeichenfolgen erforderlich, und auch Bibliotheken von Drittanbietern k?nnen verwendet werden. 4. Es wird empfohlen, Bibliotheken zu verwenden, die Zeitzonen wie Luxon unterstützen. Das Beherrschen dieser wichtigen Punkte kann h?ufige Fehler effektiv vermeiden.
Warum sollten Sie Tags am Ende des platzieren?
Jul 02, 2025 am 01:22 AM
PlatztagsattheBottomofabogpostorwebpageServeSpracticalPurposesforseo, Usexperience und design.1ithelpswithseobyallowingEnginestoaccessKeyword-relevantTagswithoutClutteringHemainContent.2.
JavaScript vs. Java: Ein umfassender Vergleich für Entwickler
Jun 20, 2025 am 12:21 AM
JavaScriptispreferredforwebdevelopment,whileJavaisbetterforlarge-scalebackendsystemsandAndroidapps.1)JavaScriptexcelsincreatinginteractivewebexperienceswithitsdynamicnatureandDOMmanipulation.2)Javaoffersstrongtypingandobject-orientedfeatures,idealfor
JavaScript: Datentypen zur effizienten Codierung untersuchen
Jun 20, 2025 am 12:46 AM
JavaScripthassevenfundamentaldatatypes:number,string,boolean,undefined,null,object,andsymbol.1)Numbersuseadouble-precisionformat,usefulforwidevaluerangesbutbecautiouswithfloating-pointarithmetic.2)Stringsareimmutable,useefficientconcatenationmethodsf
Was sprudelt und f?ngt Ereignis im Dom?
Jul 02, 2025 am 01:19 AM
Ereigniserfassung und Blase sind zwei Phasen der Ereignisausbreitung in DOM. Die Erfassung erfolgt von der oberen Schicht bis zum Zielelement, und die Blase ist vom Zielelement bis zur oberen Schicht. 1. Die Ereigniserfassung wird implementiert, indem der UseCapture -Parameter von AddEventListener auf true festgelegt wird. 2. Ereignisblase ist das Standardverhalten, Uscapture ist auf false oder weggelassen. 3. Die Ereignisausbreitung kann verwendet werden, um die Ereignisausbreitung zu verhindern. 4. Event Bubbling unterstützt die Ereignisdelegation, um die Effizienz der dynamischen Inhaltsverarbeitung zu verbessern. 5. Capture kann verwendet werden, um Ereignisse im Voraus abzufangen, wie z. B. Protokollierung oder Fehlerverarbeitung. Das Verst?ndnis dieser beiden Phasen hilft dabei, das Timing und die Reaktion von JavaScript auf Benutzeroperationen genau zu steuern.
Was ist der Unterschied zwischen Java und JavaScript?
Jun 17, 2025 am 09:17 AM
Java und JavaScript sind verschiedene Programmiersprachen. 1.Java ist eine statisch typisierte und kompilierte Sprache, die für Unternehmensanwendungen und gro?e Systeme geeignet ist. 2. JavaScript ist ein dynamischer Typ und eine interpretierte Sprache, die haupts?chlich für die Webinteraktion und die Front-End-Entwicklung verwendet wird.
