Comment fournir automatiquement des suggestions de contenu enrichi lors d'une recherche dans Google AMP ?

Pour mettre en œuvre des suggestions automatiques de contenu riche à l'utilisateur lors de la saisie dans le champ de saisie, nous utiliserons le script « amp-autocomplete » du framework Google AMP. Les champs de saisie à saisie semi-automatique signifient suggérer un contenu pertinent à l'utilisateur lorsqu'il commence à taper.

Discutons de cette approche avec un exemple comme indiqué ci-dessous −

Méthode

Nous utiliserons le script « amp-autocomplete » pour ajouter des suggestions automatiques de contenu riche à nos pages Web. Nous utiliserons également le script "amp-form" du framework Google AMP afin d'utiliser son composant amp-form et de l'afficher dans l'interface utilisateur, et "amp-mustache" pour nous fournir des modèles à utiliser dans nos pages Web.

La traduction chinoise de

Scripts utilisés ici

est :

Scripts utilisés ici

• Chargez le script d'amp-autocomplete −

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

Ce script est utilisé pour charger la fonction amp-autocomplete, qui peut nous aider à ajouter des suggestions automatiques de contenu riche sur les pages Web.

• Script pour charger la forme d'ampli −

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

Ce script est utilisé pour charger le composant amp-form du framework Google AMP, que nous pouvons utiliser dans notre application

• Charger le script d'amp-project −

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

Ce script est utilisé pour charger amp-project, nous permettant d'utiliser différentes fonctionnalités du framework Google AMP.

• Charger le script d'amp-moustache −

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

Ce script est utilisé pour charger des modèles amp-moustache, ce qui nous permet d'utiliser des modèles dans des fichiers HTML.

Nous utiliserons l'objet JSON ci-dessous comme exemple de données complexes et utiliserons ces données pour les transmettre à amp-autocomplete afin de fournir des résultats suggérés.

Utilisation des objets JSON -

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

Nous utiliserons ensuite le composant amp-form et lui transmettrons un objet JSON pour nous donner les résultats auto-suggérés. Nous utiliserons le format de modèle de moustache AMP du formulaire -

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

Exemple

Notre fichier index.html ressemblera à ceci −

Nom du fichier : index.html

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


   

      
         Enter content to get auto-suggest results
         
            
            
            
         
      
   

Conclusion

Dans cet article, nous avons découvert ce qu'est Google AMP et nous l'utilisons pour utiliser différents scripts dans Google AMP comme "amp-autocomplete", "amp-form", "amp-mustache" et "amp -project") pour automatiquement proposer un contenu riche.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!