資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 Google AMP 搜尋中自動建議豐富的內容？
為了在使用者輸入欄位鍵入過程中實現對豐富內容的自動建議，我們將使用 Google AMP 框架中的“amp-autocomplete”指令碼。自動完成輸入欄位意味著在使用者開始鍵入時向用戶建議相關內容。
讓我們用下面的示例討論這種方法：
方法
我們將使用“amp-autocomplete”指令碼在我們的網頁上新增豐富內容的自動建議。我們還將使用 Google AMP 框架中的“amp-form”指令碼，以便使用其 amp-form 元件並在 UI 中顯示它，並使用“amp-mustache”為我們提供在網頁中使用的模板。
此處使用的指令碼
載入 amp-autocomplete 的指令碼：
<script async custom-element="amp-autocomplete" src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"> </script>
此指令碼用於載入 amp-autocomplete 功能，這有助於我們在網頁上新增豐富內容的自動建議。
載入 amp-form 的指令碼：
<script async custom-element="amp-form"src="https://cdn.ampproject.org/v0/amp-form-0.1.js"> </script>
此指令碼用於載入 Google AMP 框架的 amp-form 元件，然後我們可以在我們的應用程式中使用該元件。
載入 amp-project 的指令碼：
<script async src="https://cdn.ampproject.org/v0.js"></script>
此指令碼用於載入 amp-project，它允許我們使用 Google AMP 框架的不同功能。
載入 amp-mustache 的指令碼：
<script async custom-template="amp-mustachesrc="https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
此指令碼用於載入 amp-mustache 模板，它允許我們在 HTML 檔案中使用模板。
我們將採用複雜的資料示例，例如下面的 JSON 物件，並使用此資料將其傳遞給 amp-autocomplete 以給出建議的結果。
使用的 JSON 物件：
{
"items": [
{
"name": "Luffy",
"country": "India"
},{
"name": "Nami",
"country": "USA"
},{
"name": "Zoro",
"country": "Canada"
}
]
}
然後，我們將使用 amp-form 元件並將 JSON 物件饋送到那裡以提供自動建議的結果。我們將使用如下所示的 AMP mustache 模板格式：
<template type="amp-mustache" id="amp-template-custom">
<div data-value="{{name}}, {{country}}">
{{name}}, {{country}}
</div>
</template>
示例
我們的 index.html 檔案如下所示：
檔名：index.html
<!DOCTYPE html>
<html amp>
<head>
<script async custom-element="amp-autocomplete" src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"></script>
<script async custom-element="amp-form" src= "https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<title>How to auto suggest rich contents while searching in Google AMP?</title>
</head>
<body>
<form>
<label>
<span>Enter content to get auto-suggest results</span>
<amp-autocomplete
filter="token-prefix"
filter-value="name"
min-characters="0">
<input type="search" name="name" />
<script type="application/json">
{
"items": [
{
"name": "Luffy",
"country": "India"
},{
"name": "Nami",
"country": "USA"
},{
"name": "Zoro",
"country": "Canada"
}
]
}
</script>
<template type="amp-mustache" id="amp-template-custom">
<div data-value="{{name}}, {{country}}">
{{name}}, {{country}}
</div>
</template>
</amp-autocomplete>
</label>
</form>
</body>
</html>
結論
在本文中，我們學習了什麼是 Google AMP，並使用它透過 Google AMP 框架中的“amp-autocomplete”、“amp-form”、“amp-mustache”和“amp-project”等不同指令碼在 Google AMP 搜尋中自動建議豐富的內容。
82 次瀏覽
