Wie kann ich bei der Suche in Google AMP automatisch Rich-Content-Vorschläge bereitstellen?

Um dem Benutzer automatische Vorschläge für Rich Content zu implementieren, während er in das Eingabefeld tippt, verwenden wir das „amp-autocomplete“-Skript aus dem Google AMP-Framework. Durch die automatische Vervollständigung von Eingabefeldern werden dem Benutzer relevante Inhalte vorgeschlagen, während er mit der Eingabe beginnt.

Lassen Sie uns diesen Ansatz anhand eines Beispiels diskutieren, wie unten gezeigt −

Methode

Wir werden das „amp-autocomplete“-Skript verwenden, um unseren Webseiten automatische Vorschläge für Rich Content hinzuzufügen. Wir werden auch das „amp-form“-Skript des Google AMP-Frameworks verwenden, um dessen amp-form-Komponente zu verwenden und in der Benutzeroberfläche anzuzeigen, und „amp-mustache“, um uns Vorlagen zur Verwendung auf unseren Webseiten bereitzustellen.

Hier verwendete Skripte

Hier verwendete Skripte

• Laden Sie das Skript von amp-autocomplete −

<script async custom-element="amp-autocomplete" src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js">
</script>

Dieses Skript wird zum Laden der amp-autocomplete-Funktion verwendet, die uns dabei helfen kann, automatische Vorschläge für Rich Content auf Webseiten hinzuzufügen.

• Skript zum Laden von amp-form −

<script async custom-element="amp-form"src="https://cdn.ampproject.org/v0/amp-form-0.1.js">
</script>

Mit diesem Skript wird die amp-form-Komponente des Google AMP-Frameworks geladen, die wir in unserer Anwendung verwenden können

• Laden Sie das Skript von amp-project −

<script async src="https://cdn.ampproject.org/v0.js"></script>

Dieses Skript wird zum Laden von amp-project verwendet, sodass wir verschiedene Funktionen des Google AMP-Frameworks nutzen können.

• Laden Sie das Skript von amp-mustache −

<script async custom-template="amp-mustachesrc="https://cdn.ampproject.org/v0/amp-mustache-0.2.js">

Dieses Skript wird zum Laden von Amp-Mustache-Vorlagen verwendet, wodurch wir Vorlagen in HTML-Dateien verwenden können.

Wir werden das JSON-Objekt unten als Beispiel für komplexe Daten verwenden und diese Daten verwenden, um sie an amp-autocomplete zu übergeben, um vorgeschlagene Ergebnisse bereitzustellen.

JSON-Objektnutzung -

{
   "items": [
      {
         "name": "Luffy",
         "country": "India"
      },{
         "name": "Nami",
         "country": "USA"
      },{
         "name": "Zoro",
         "country": "Canada"
      }
   ]
}

Wir verwenden dann die amp-form-Komponente und übergeben ihr ein JSON-Objekt, um uns die automatisch vorgeschlagenen Ergebnisse zu liefern. Wir werden das AMP-Schnurrbart-Vorlagenformat des Formulars verwenden –

<template type="amp-mustache" id="amp-template-custom">
   <div data-value="{{name}}, {{country}}">
      {{name}}, {{country}}
   </div>
</template>

Beispiel

Unsere index.html-Datei wird so aussehen −

Dateiname: index.html

   
   
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   
   



   

      
         Enter content to get auto-suggest results
         
            
            
            
         
      
   

Fazit

In diesem Beitrag haben wir erfahren, was Google AMP ist und wir verwenden es, um verschiedene Skripte in Google AMP wie „amp-autocomplete“, „amp-form“, „amp-mustache“ und „amp -project“) automatisch zu verwenden Schlagen Sie reichhaltige Inhalte vor.

Das obige ist der detaillierte Inhalt vonWie kann ich bei der Suche in Google AMP automatisch Rich-Content-Vorschläge bereitstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!