Bagaimanakah cara untuk memberikan cadangan kandungan kaya secara automatik apabila mencari dalam Google AMP?

Untuk melaksanakan auto-cadangan kandungan kaya kepada pengguna semasa menaip dalam medan input, kami akan menggunakan skrip "amp-autolengkap" daripada rangka kerja AMP Google. Medan input autolengkap bermaksud mencadangkan kandungan yang berkaitan kepada pengguna semasa mereka mula menaip.

Mari kita bincangkan pendekatan ini dengan contoh seperti yang ditunjukkan di bawah −

Kaedah

Kami akan menggunakan skrip "amp-autocomplete" untuk menambah auto-cadangan kandungan kaya pada halaman web kami. Kami juga akan menggunakan skrip "amp-form" rangka kerja Google AMP untuk menggunakan komponen amp-formnya dan memaparkannya dalam UI, dan "amp-misai" untuk memberikan kami templat untuk digunakan dalam halaman web kami.

Terjemahan bahasa Cina bagi

Skrip Digunakan Di Sini

ialah:

Skrip digunakan di sini

• Muat skrip amp-autolengkap −

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

Skrip ini digunakan untuk memuatkan fungsi amp-autocomplete, yang boleh membantu kami menambah cadangan automatik untuk kandungan kaya pada halaman web.

• Skrip untuk memuatkan amp-form −

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

Skrip ini digunakan untuk memuatkan komponen amp-form rangka kerja AMP Google, yang boleh kami gunakan dalam aplikasi kami

• Muat skrip amp-project −

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

Skrip ini digunakan untuk memuatkan amp-project, membolehkan kami menggunakan ciri berbeza rangka kerja AMP Google.

• Muat skrip amp-misai −

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

Skrip ini digunakan untuk memuatkan templat amp-misai, yang membolehkan kami menggunakan templat dalam fail HTML.

Kami akan menggunakan objek JSON di bawah sebagai contoh data kompleks dan menggunakan data ini untuk menghantarnya ke amp-autolengkap untuk memberikan hasil yang dicadangkan.

Penggunaan objek JSON -

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

Kami kemudian akan menggunakan komponen amp-form dan memberikannya objek JSON untuk memberikan kami hasil yang dicadangkan secara automatik. Kami akan menggunakan format templat misai AMP dalam borang -

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

Contoh

Fail index.html kami akan kelihatan seperti ini −

Nama fail: index.html

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


   

      
         Enter content to get auto-suggest results
         
            
            
            
         
      
   

Kesimpulan

Dalam siaran ini, kami mempelajari tentang apa itu Google AMP dan kami menggunakannya untuk menggunakan skrip berbeza dalam AMP Google seperti "amp-autolengkap", "amp-form", "amp-misai" dan "amp -project") untuk secara automatik cadangkan kandungan yang kaya.

Atas ialah kandungan terperinci Bagaimanakah cara untuk memberikan cadangan kandungan kaya secara automatik apabila mencari dalam Google AMP?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!