Web-Frontendjs-TutorialSchneller 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 hinzugefügt und spezielle Klassen verwendet, um Elemente zu identifizieren, bei denen das Suchformular und die Ergebnisse vorgestellt werden sollten. <p>
<strong> </strong> Manuelle Rendering -Funktion </p> <p>
</p> Geben Sie jetzt Ihre App.js -Datei ein und fügen Sie Folgendes hinzu: <pre class='brush:php;toolbar:false;'>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);
})();
</pre>
<p>
<code>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!
Ersetzen Sie Stringzeichen in JavaScriptMar 11, 2025 am 12:07 AMDetaillierte Erläuterung der Methode für JavaScript -Zeichenfolge und FAQ In diesem Artikel werden zwei Möglichkeiten untersucht, wie String -Zeichen in JavaScript ersetzt werden: Interner JavaScript -Code und interne HTML für Webseiten. Ersetzen Sie die Zeichenfolge im JavaScript -Code Die direkteste Möglichkeit ist die Verwendung der Ersatz () -Methode: str = str.replace ("find", "ersetzen"); Diese Methode ersetzt nur die erste Übereinstimmung. Um alle Übereinstimmungen zu ersetzen, verwenden Sie einen regulären Ausdruck und fügen Sie das globale Flag G hinzu:: STR = Str.Replace (/fi
Erstellen Sie Ihre eigenen AJAX -WebanwendungenMar 09, 2025 am 12:11 AMHier sind Sie also bereit, alles über dieses Ding namens Ajax zu lernen. Aber was genau ist das? Der Begriff AJAX bezieht sich auf eine lose Gruppierung von Technologien, mit denen dynamische, interaktive Webinhalte erstellt werden. Der Begriff Ajax, ursprünglich von Jesse J geprägt
10 JQuery Fun- und Games -PluginsMar 08, 2025 am 12:42 AM10 Fun JQuery Game -Plugins, um Ihre Website attraktiver zu machen und die Stickinität der Benutzer zu verbessern! Während Flash immer noch die beste Software für die Entwicklung von lässigen Webspielen ist, kann JQuery auch überraschende Effekte erzielen und zwar nicht mit reinen Action -Flash -Spielen vergleichbar sind, aber in einigen Fällen können Sie auch einen unerwarteten Spaß in Ihrem Browser haben. JQuery Tic Toe Game Die "Hello World" der Game -Programmierung hat jetzt eine Jquery -Version. Quellcode JQuery Crazy Word Kompositionsspiel Dies ist ein Spiel mit der Füllung, und es kann einige seltsame Ergebnisse erzielen, da das Wort nicht kennt. Quellcode JQuery Mine Sweeping Game
Wie erstelle ich meine eigenen JavaScript -Bibliotheken?Mar 18, 2025 pm 03:12 PMIn Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.
JQuery Parallax Tutorial - Animated Header HintergrundMar 08, 2025 am 12:39 AMDieses Tutorial zeigt, wie ein faszinierender Parallaxen -Hintergrundeffekt mit JQuery erstellt wird. Wir werden ein Header -Banner mit geschichteten Bildern bauen, die eine atemberaubende visuelle Tiefe erzeugen. Das aktualisierte Plugin funktioniert mit JQuery 1.6.4 und später. Laden Sie die herunter
Wie optimiere ich den JavaScript -Code für die Leistung im Browser?Mar 18, 2025 pm 03:14 PMIn dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.
Erste Schritte mit Matter.js: EinführungMar 08, 2025 am 12:53 AMMatter.js ist eine in JavaScript geschriebene 2D -Motorhilfe -Physik -Engine. Diese Bibliothek kann Ihnen helfen, die 2D -Physik in Ihrem Browser problemlos zu simulieren. Es bietet viele Merkmale, wie die Möglichkeit, starre Körper zu erstellen und physikalische Eigenschaften wie Masse, Fläche oder Dichte zuzuweisen. Sie können auch verschiedene Arten von Kollisionen und Kräften simulieren, wie z. B. die Schwerkraft Reibung. Matter.js unterstützt alle Mainstream -Browser. Darüber hinaus ist es für mobile Geräte geeignet, da es Berührungen erkennt und reagiert. Alle diese Funktionen machen es Ihre Zeit wert, zu lernen, wie man die Engine benutzt. In diesem Tutorial werde ich die Grundlagen dieser Bibliothek, einschließlich ihrer Installation und Nutzung, behandeln und a bereitstellen
Automatische Aktualisierung der Div -Inhalte mit JQuery und AjaxMar 08, 2025 am 12:58 AMDieser Artikel zeigt, wie Sie den Inhalt eines DIV automatisch alle 5 Sekunden mit JQuery und Ajax aktualisieren können. Das Beispiel holt und zeigt die neuesten Blog -Beiträge aus einem RSS -Feed zusammen mit dem letzten Aktualisierungstempel. Ein Ladebild ist Optiona
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
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Herunterladen der Mac-Version des Atom-Editors
Der beliebteste Open-Source-Editor
Dreamweaver Mac
Visuelle Webentwicklungstools
Sicherer Prüfungsbrowser
Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.
DVWA
Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software
mPDF
mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),
