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
1663
14
1419
52
1313
25
1264
29
1237
24
Entmystifizieren JavaScript: Was es tut und warum es wichtig ist
Apr 09, 2025 am 12:07 AM
JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.
Die Entwicklung von JavaScript: Aktuelle Trends und Zukunftsaussichten
Apr 10, 2025 am 09:33 AM
Zu den neuesten Trends im JavaScript gehören der Aufstieg von Typenkripten, die Popularität moderner Frameworks und Bibliotheken und die Anwendung der WebAssembly. Zukunftsaussichten umfassen leistungsfähigere Typsysteme, die Entwicklung des serverseitigen JavaScript, die Erweiterung der künstlichen Intelligenz und des maschinellen Lernens sowie das Potenzial von IoT und Edge Computing.
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.
JavaScript: Erforschung der Vielseitigkeit einer Websprache
Apr 11, 2025 am 12:01 AM
JavaScript ist die Kernsprache der modernen Webentwicklung und wird für seine Vielfalt und Flexibilität häufig verwendet. 1) Front-End-Entwicklung: Erstellen Sie dynamische Webseiten und einseitige Anwendungen durch DOM-Operationen und moderne Rahmenbedingungen (wie React, Vue.js, Angular). 2) Serverseitige Entwicklung: Node.js verwendet ein nicht blockierendes E/A-Modell, um hohe Parallelitäts- und Echtzeitanwendungen zu verarbeiten. 3) Entwicklung von Mobil- und Desktop-Anwendungen: Die plattformübergreifende Entwicklung wird durch reaktnative und elektronen zur Verbesserung der Entwicklungseffizienz realisiert.
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.
So erstellen Sie eine SaaS-Anwendung mit mehreren Mietern mit Next.js (Frontend Integration)
Apr 11, 2025 am 08:22 AM
Dieser Artikel zeigt die Frontend -Integration mit einem Backend, das durch die Genehmigung gesichert ist und eine funktionale edtech SaaS -Anwendung unter Verwendung von Next.js. erstellt. Die Frontend erfasst Benutzerberechtigungen zur Steuerung der UI-Sichtbarkeit und stellt sicher, dass API-Anfragen die Rollenbasis einhalten
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.
Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)
Apr 11, 2025 am 08:23 AM
Ich habe eine funktionale SaaS-Anwendung mit mehreren Mandanten (eine EdTech-App) mit Ihrem täglichen Tech-Tool erstellt und Sie können dasselbe tun. Was ist eine SaaS-Anwendung mit mehreren Mietern? Mit Multi-Tenant-SaaS-Anwendungen können Sie mehrere Kunden aus einem Sing bedienen
