suchen

Heim >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

Jennifer Aniston
Jennifer AnistonOriginal
2025-02-17 09:42:10780Durchsuche

Quick Tip: How to Style Google Custom Search Manually

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

Wir werden auch Elemente abfragen und Attribute mit JS ändern.

setTimeout()

Erstellen Sie ein GCSE -Konto

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:

  1. "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
    2. angezeigt wird.
    3. "öffentliche URL" zeigt Ihnen eine Arbeitsvorschau der festgelegten Suche
    4. "Bedienfeld" wird verwendet, um Suchvorgänge
anzupassen

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: 
<code class="language-html"><!DOCTYPE html>


    <meta charset="UTF-8">
    <title>GCSE test</title>



    <h1>GCSE test</h1>
    <div id="searchForm" class="gcse-search-wrapper"></div>
    <div id="searchResults" class="gcse-results-wrapper"></div>
    


</code>

<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">&lt;code class=&quot;language-javascript&quot;&gt;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 &gt; 0) { renderSearch(gsceSearchForms[0]); } if (gsceResults.length &gt; 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 &amp;&amp; div.dataset.stylingFunction &amp;&amp; window[div.dataset.stylingFunction] &amp;&amp; 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); })(); &lt;/code&gt;</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

ein. Hier wird die Suche nach dem Einreichen der Abfrage nach dem Benutzer umgeleitet. Darüber hinaus wird GCSE erwarten, dass das Ergebnisfeld auf der bereitgestellten URL rendert.

renderSearchForms queryAndRender() Funktionsprüfungen Wenn die Seite geladen ist und sie geladen ist, ist die Rückruffunktion für die Wiedergabe von

verantwortlich. Später nach dem Laden des Dokuments.

queryAndRender renderSearch() Funktion Abfragen Sie das DOM mit Elementen der in der Konfiguration bereitgestellten Klasse. Wenn die Wrapper Div gefunden wird, werden renderResults() und

jeweils aufgerufen, um die Such- und Ergebnisfelder zu rendern.

renderSearch

Funktionen sind dort, wo die tatsächliche Magie passiert.

google.search.cse.element Wir verwenden die Google -Search -API (weitere Dokumentation hier, um das Objekt

zu verwenden), um das Suchfeld zu erstellen, und wenn eine aktive Abfrage (Ergebnis) vorliegt, wird das Ergebnisfeld erstellt.

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

Styling-Funktion

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

-Lösung zu verwenden, um den Platzhalter (oder irgendetwas anderes) des Eingabefeldes zu bearbeiten. 
<code class="language-javascript">window.__gcse = {
  parsetags: 'explicit',
  callback: renderSearchForms
};</code>

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.

Quick Tip: How to Style Google Custom Search Manually

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:

hinzu 
<code class="language-html"><!DOCTYPE html>


    <meta charset="UTF-8">
    <title>GCSE test</title>



    <h1>GCSE test</h1>
    <div id="searchForm" class="gcse-search-wrapper"></div>
    <div id="searchResults" class="gcse-results-wrapper"></div>
    


</code>

Gehen Sie nun zu App.js oben in der Datei unter der Erklärung der Konfigurationsvariablen eine neue Funktion: 

<code class="language-javascript">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);
})();
</code>

Versuchen Sie nun erneut, die Testseite zu laden, und Sie sehen den richtigen Platzhalter.

Quick Tip: How to Style Google Custom Search Manually

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!

JavaScript json css ajax html 回调函数 JS function 对象 作用域 事件 dom 样式表 http 搜索引擎
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Schnelltip: Modal Popup nach Zeitverzögerung anzeigenNächster Artikel：Schnelltip: Modal Popup nach Zeitverzögerung anzeigen

In Verbindung stehende Artikel

Mehr sehen