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
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 id="GCSE-test">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', // 替换为您的本地服务器地址
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 id="GCSE-test">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', // 替换为您的本地服务器地址
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
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
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
1666
14
1426
52
1328
25
1273
29
1254
24
JavaScript -Engines: Implementierungen vergleichen
Apr 13, 2025 am 12:05 AM
Unterschiedliche JavaScript -Motoren haben unterschiedliche Auswirkungen beim Analysieren und Ausführen von JavaScript -Code, da sich die Implementierungsprinzipien und Optimierungsstrategien jeder Engine unterscheiden. 1. Lexikalanalyse: Quellcode in die lexikalische Einheit umwandeln. 2. Grammatikanalyse: Erzeugen Sie einen abstrakten Syntaxbaum. 3. Optimierung und Kompilierung: Generieren Sie den Maschinencode über den JIT -Compiler. 4. Führen Sie aus: Führen Sie den Maschinencode aus. V8 Engine optimiert durch sofortige Kompilierung und versteckte Klasse.
Python vs. JavaScript: Die Lernkurve und Benutzerfreundlichkeit
Apr 16, 2025 am 12:12 AM
Python eignet sich besser für Anfänger mit einer reibungslosen Lernkurve und einer kurzen Syntax. JavaScript ist für die Front-End-Entwicklung mit einer steilen Lernkurve und einer flexiblen Syntax geeignet. 1. Python-Syntax ist intuitiv und für die Entwicklung von Datenwissenschaften und Back-End-Entwicklung geeignet. 2. JavaScript ist flexibel und in Front-End- und serverseitiger Programmierung weit verbreitet.
Von C/C nach JavaScript: Wie alles funktioniert
Apr 14, 2025 am 12:05 AM
Die Verschiebung von C/C zu JavaScript erfordert die Anpassung an dynamische Typisierung, Müllsammlung und asynchrone Programmierung. 1) C/C ist eine statisch typisierte Sprache, die eine manuelle Speicherverwaltung erfordert, während JavaScript dynamisch eingegeben und die Müllsammlung automatisch verarbeitet wird. 2) C/C muss in den Maschinencode kompiliert werden, während JavaScript eine interpretierte Sprache ist. 3) JavaScript führt Konzepte wie Verschlüsse, Prototypketten und Versprechen ein, die die Flexibilität und asynchrone Programmierfunktionen verbessern.
JavaScript und das Web: Kernfunktionalität und Anwendungsfälle
Apr 18, 2025 am 12:19 AM
Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.
JavaScript in Aktion: Beispiele und Projekte in realer Welt
Apr 19, 2025 am 12:13 AM
Die Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.
Verständnis der JavaScript -Engine: Implementierungsdetails
Apr 17, 2025 am 12:05 AM
Es ist für Entwickler wichtig, zu verstehen, wie die JavaScript -Engine intern funktioniert, da sie effizientere Code schreibt und Leistungs Engpässe und Optimierungsstrategien verstehen kann. 1) Der Workflow der Engine umfasst drei Phasen: Parsen, Kompilieren und Ausführung; 2) Während des Ausführungsprozesses führt die Engine dynamische Optimierung durch, wie z. B. Inline -Cache und versteckte Klassen. 3) Zu Best Practices gehören die Vermeidung globaler Variablen, die Optimierung von Schleifen, die Verwendung von const und lass und die Vermeidung übermäßiger Verwendung von Schließungen.
Python gegen JavaScript: Community, Bibliotheken und Ressourcen
Apr 15, 2025 am 12:16 AM
Python und JavaScript haben ihre eigenen Vor- und Nachteile in Bezug auf Gemeinschaft, Bibliotheken und Ressourcen. 1) Die Python-Community ist freundlich und für Anfänger geeignet, aber die Front-End-Entwicklungsressourcen sind nicht so reich wie JavaScript. 2) Python ist leistungsstark in Bibliotheken für Datenwissenschaft und maschinelles Lernen, während JavaScript in Bibliotheken und Front-End-Entwicklungsbibliotheken und Frameworks besser ist. 3) Beide haben reichhaltige Lernressourcen, aber Python eignet sich zum Beginn der offiziellen Dokumente, während JavaScript mit Mdnwebdocs besser ist. Die Wahl sollte auf Projektbedürfnissen und persönlichen Interessen beruhen.
Python vs. JavaScript: Entwicklungsumgebungen und Tools
Apr 26, 2025 am 12:09 AM
Sowohl Python als auch JavaScripts Entscheidungen in Entwicklungsumgebungen sind wichtig. 1) Die Entwicklungsumgebung von Python umfasst Pycharm, Jupyternotebook und Anaconda, die für Datenwissenschaft und schnelles Prototyping geeignet sind. 2) Die Entwicklungsumgebung von JavaScript umfasst Node.JS, VSCODE und WebPack, die für die Entwicklung von Front-End- und Back-End-Entwicklung geeignet sind. Durch die Auswahl der richtigen Tools nach den Projektbedürfnissen kann die Entwicklung der Entwicklung und die Erfolgsquote der Projekte verbessert werden.
