>웹 프론트엔드 >CSS 튜토리얼 >Google AMP에서 검색할 때 리치 콘텐츠 제안을 자동으로 제공하는 방법은 무엇입니까?

Google AMP에서 검색할 때 리치 콘텐츠 제안을 자동으로 제공하는 방법은 무엇입니까?

WBOY
WBOY앞으로
2023-09-06 21:49:021135검색

如何在Google AMP中搜索时自动提供丰富的内容建议?

입력 필드에 입력하는 동안 사용자에게 리치 콘텐츠 자동 제안을 구현하기 위해 Google AMP 프레임워크의 'amp-autocomplete' 스크립트를 사용합니다. 자동 완성 입력 필드는 사용자가 입력을 시작할 때 관련 콘텐츠를 제안하는 것을 의미합니다.

아래 예시를 통해 이 접근 방식을 논의해 보겠습니다. −

방법

"amp-autocomplete" 스크립트를 사용하여 웹페이지에 리치 콘텐츠 자동 제안을 추가하겠습니다. 또한 amp-form 구성요소를 사용하고 이를 UI에 표시하기 위해 Google AMP 프레임워크의 'amp-form' 스크립트를 사용하고, 웹페이지에서 사용할 템플릿을 제공하기 위해 'amp-mustache'를 사용할 것입니다.

여기에 사용된 스크립트

의 중국어 번역은 다음과 같습니다.

여기에 사용된 스크립트

  • amp-autocomplete 스크립트 로드 −

으아아아

이 스크립트는 웹페이지의 풍부한 콘텐츠에 대한 자동 제안을 추가하는 데 도움이 되는 amp-autocomplete 기능을 로드하는 데 사용됩니다.

  • amp-form을 로드하는 스크립트 −

으아아아

이 스크립트는 애플리케이션에서 사용할 수 있는 Google AMP 프레임워크의 amp-form 구성 요소를 로드하는 데 사용됩니다

  • amp-project 스크립트 로드 −

으아아아

이 스크립트는 amp-project를 로드하는 데 사용되므로 Google AMP 프레임워크의 다양한 기능을 사용할 수 있습니다.

  • amp-mustache 스크립트 로드 −

으아아아

이 스크립트는 amp-mustache 템플릿을 로드하는 데 사용되며 이를 통해 HTML 파일에서 템플릿을 사용할 수 있습니다.

복합 데이터의 예로 아래 JSON 개체를 사용하고 이 데이터를 사용하여 제안 결과를 제공하기 위해 amp-autocomplete에 전달합니다.

JSON 객체 사용법 -

으아아아

그런 다음 amp-form 구성 요소를 사용하고 JSON 개체를 전달하여 자동 제안 결과를 제공합니다. 우리는 다음과 같은 AMP 콧수염 템플릿 형식을 사용할 것입니다 -

으아아아

index.html 파일은 다음과 같습니다 −

파일 이름: index.html

으아아아

결론

이 게시물에서 우리는 Google AMP가 무엇인지 알아보고 이를 사용하여 Google AMP에서 "amp-autocomplete", "amp-form", "amp-mustache" 및 "amp -project"와 같은 다양한 스크립트를 사용하여 자동으로 풍부한 콘텐츠를 제안해 보세요.

위 내용은 Google AMP에서 검색할 때 리치 콘텐츠 제안을 자동으로 제공하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제