好吃！
文字無法表達這有多美味！
正面 Patrick食譜
簡介
這是一篇範例食譜 AMP 文章，示範如何使用 JSON+LD 表達機器可讀的食譜資料。它使用了適用於食譜文章的 AMP 元件：amp-carousel (圖片庫、評論輪播)、amp-social-share 和 amp-list (相關文章)。此外還有星級評分，目前為唯讀（請參閱此 GitHub 問題）。
設定
額外使用的 AMP 元件必須在標頭中匯入。首先是社群分享按鈕，匯入 amp-social-share。
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
對於輪播，我們需要 amp-carousel
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
對於相關食譜列表。我們需要 amp-list。
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
除此之外，我們使用 amp-mustache...
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
...以及 amp-analytics
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
元數據
如果存在 schema.org 元數據，Google 搜尋可以使用食譜複合式資訊卡顯示食譜資料。
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Recipe",
"mainEntityOfPage": "https://amp.dev.org.tw/documentation/examples/news-publishing/recipe/preview/",
"name": "Garlic-Studded Roast Lamb",
"@id": "12345",
"image": {
"@type": "ImageObject",
"url": "/static/samples/img/lamb-garlic-done.jpg",
"height": 1280,
"width": 479
},
"author": {
"@type": "Person",
"name": "Dan Dascalescu"
},
"datePublished": "2016-06-12",
"dateModified": "2016-06-12",
"description": "This is a traditional Romanian lamb recipe, with the subtle taste of garlic deeply permeating the meat.",
"prepTime": "PT30M",
"cookTime": "PT1H45M",
"totalTime": "PT2H15M",
"recipeYield": "1 tray (4 servings)",
"nutrition": {
"@type": "NutritionInformation",
"servingSize": "1 piece",
"calories": "500 kcal",
"carbohydrateContent": "5g",
"fatContent": "30g",
"proteinContent": "60g"
},
"recipeIngredient": [
"lamb",
"4 cloves of garlic",
"1 sprig of rosemary",
"4 chopped tomatoes",
"1 tbsp olive oil",
"1 carrot",
"1 cup wine",
"peppercorn to taste"
],
"recipeInstructions": "1. Heat oven to 350F / 180C.\n2. Prepare the meat by washing and removing the silverskin.\n3. Peel and cut each garlic clove into several slices.\n4. Make incisions in the meat and insert the garlic slices.\n5. Place lamb in baking dish, drizzle with olive oil, and add wine.\n6. Add chopped tomatoes and carrot.\n7. Cut lemon into quarters, remove seeds, squeeze juice over meat and leave wedges among the meat pieces.\n8. Finely mince rosemary and sprinkle over lamb, along with paprika, salt and peppercorns to taste.\n9. Roast for approximately 1 hr 45 mins, turning the lamb halfway through.",
"publisher": {
"@type": "Organization",
"name": "Google",
"logo": {
"@type": "ImageObject",
"url": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_116x41dp.png",
"width": 116,
"height": 41
}
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.5",
"bestRating": "5",
"ratingCount": "3",
"reviewCount": "3"
},
"review": [{
"@type": "Review",
"name": "Yum!",
"reviewBody": "Words cannot express how delicious this tastes!",
"reviewRating": {
"@type": "Rating",
"ratingValue": "5"
},
"author": "Positive Patrick"
}, {
"@type": "Review",
"name": "Not bad, but prep is laborious",
"reviewBody": "Tastes really good, but cutting the silverskin takes a while. Try asking your butcher if they can do it, since they have specialized tools and skills!",
"reviewRating": {
"@type": "Rating",
"ratingValue": "4"
},
"author": "Negative Nancy"
}, {
"@type": "Review",
"name": "Unexpected side effects",
"reviewBody": "After taking it out of the oven, I left this dish to cool off next to my pet lizard, unfortunately now he's 350ft tall now and is currently destroying Tokyo, Japan.",
"reviewRating": {
"@type": "Rating",
"ratingValue": "4"
},
"author": "Lawrence Gonzalez"
}]
}
</script>
amp-carousel amp-img > img { object-fit: contain; } 規則可保留輪播中的圖片長寬比。請參閱此 GitHub 問題以瞭解在此範例發布後建議的可能更好的方法。
<style amp-custom>
amp-carousel amp-img > img {
object-fit: contain;
}
amp-carousel figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 8px;
background: rgba(0, 0, 0, 0.6); /* translucent black */
color: #ddd;
font-size: smaller;
max-height: 30%;
}
amp-carousel .review {
width: 25em;
vertical-align: top;
overflow: auto;
margin: 0;
padding: 16px;
height: 80%; /* TODO easy way to ensure the bottom shadow is visible */
white-space: normal; /* the enclosing div generated by amp-carousel sets it to nowrap */
}
amp-carousel .review:nth-child(even) {background: #FFFFFF}
amp-carousel .review:nth-child(odd) {background: #94C2F9}
amp-carousel .review h1 {
font-size: larger;
padding: 0;
}
amp-carousel .review p {
padding: 0;
}
amp-carousel .review address:before {
content: '-- ';
}
ul, ol {
padding: 0 16px;
}
/* Unicode-based stars and half-star credit: amoniker, https://coderwall.com/p/iml9ka/star-ratings-in-css-utf8 */
.star-icon {
color: #ddd;
font-size: 34px;
position: relative;
}
.star-icon.full:before {
color: #FDE16D;
content: '\2605'; /* Full star in UTF8 */
position: absolute;
left: 0;
text-shadow: 0 0 2px rgba(0,0,0,0.7);
}
.star-icon.half:before {
color: #FDE16D;
content: '\2605'; /* Full star in UTF8 */
position: absolute;
left: 0;
width: 50%;
overflow: hidden;
text-shadow: 0 0 2px rgba(0,0,0,0.7);
}
.logo {
background-position: left 16px center;
background-repeat: no-repeat;
background-image: -webkit-image-set(
url(/static/samples/img/ic_menu_white_1x_web_24dp.png) 1x,
url(/static/samples/img/ic_menu_white_2x_web_24dp.png) 2x
);
background-color: #333;
text-align: left;
padding: 16px;
padding-left: 72px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
.logo > a {
font-size: 16px;
font-weight: 500;
color: white;
text-transform: uppercase;
}
.heading {
padding-bottom: 8px;
}
.heading > #summary {
font-weight: 500;
}
.heading > small {
color: #656565;
}
.related {
background-color: #f5f5f5;
margin: 16px 16px;
display: block;
color: #111;
height: 75px;
padding: 0;
}
.related > span {
font-size: 16px;
line-height: 75px;
font-weight: 400;
vertical-align: top;
margin: 8px;
}
.related:hover {
background-color: #ccc;
}
</style>
基本用法
我們將從食譜文章的標題開始，接著展示令人垂涎三尺的準備過程照片庫。
香蒜烤羊腿
這是一篇範例食譜 AMP 文章，示範如何使用 JSON+LD 表達機器可讀的食譜資料。它使用了適用於食譜文章的 AMP 元件：amp-carousel (圖片庫、評論輪播)、amp-social-sharing 和 amp-list (相關文章)。此外還有星級評分，目前為唯讀（請參閱此 GitHub 問題）。
作者：Dan Dascalescu
發布日期：2016 年 6 月 12 日
<div class="heading">
<h1>Garlic-Studded Roast Lamb</h1>
<p id="summary">This is a sample recipe AMP article demonstrating how to express machine-readable recipe data using JSON+LD. It uses AMP components that work well for recipe articles: amp-carousel (image gallery, reviews carousel), amp-social-sharing, and amp-list (related articles). There are also star ratings, read-only for now (see <a href="https://github.com/ampproject/amphtml/issues/2691">this GitHub issue</a>).</p>
<p><small>By Dan Dascalescu<br>
Published: June 12, 2016</small></p>
</div>
社群分享
Social Share 擴充功能為分享按鈕提供通用介面。深入瞭解 amp-social-share。
<p class="heading">
<amp-social-share type="twitter" data-param-text="Amazing recipe that my friend made" width="45" height="33"></amp-social-share>
<amp-social-share type="facebook" width="45" height="33" data-attribution="254325784911610"></amp-social-share>
<amp-social-share type="gplus" width="45" height="33"></amp-social-share>
<amp-social-share type="email" width="45" height="33"></amp-social-share>
<amp-social-share type="pinterest" width="45" height="33"></amp-social-share>
</p>
圖片庫
使用 amp-carousel 建立圖片庫。在此範例中，我們以響應式方式顯示不同長寬比的圖片。深入瞭解如何在 AMP 中建立圖片庫。
<amp-carousel width="1280" height="970" layout="responsive" type="slides">
<figure>
<amp-img src="/static/samples/img/meat-silverskin-cutting.jpg" width="401" height="542" layout="fill" attribution="Scott Phillips"></amp-img>
<figcaption>Prepare the meat by washing and removing the silverskin.</figcaption>
</figure>
<figure>
<amp-img src="/static/samples/img/garlic.jpg" width="1280" height="960" layout="fill" attribution="Wikipedia"></amp-img>
<figcaption>Prepare the garlic.</figcaption>
</figure>
<figure>
<amp-img src="/static/samples/img/lamb-with-garlic-slivers.jpg" width="1021" height="763" layout="fill" attribution="Kara / EatDrinkAdventure"></amp-img>
<figcaption>Insert slivers of garlic into the meat; the deeper the better.</figcaption>
</figure>
<figure>
<amp-img src="/static/samples/img/tomatoes-cut.jpg" width="720" height="720" attribution="CC0 - https://pixabay.com/en/chopped-tomatoes-tomato-food-red-1375892/" layout="fill"></amp-img>
<figcaption>Cut the tomatoes.</figcaption>
</figure>
<figure>
<amp-img src="/static/samples/img/lamb-garlic-ready-for-oven.jpg" width="1280" height="1703" attribution="Dan Dascalescu" layout="fill"></amp-img>
<figcaption>The garlic lamb roast is ready for baking.</figcaption>
</figure>
</amp-carousel>
正在開發 AMP 星級評分元件。
(3 則評論)
準備時間：30 分鐘
烹飪時間：1 小時 45 分鐘
總時間：2 小時 15 分鐘
份量：4 人份
每份卡路里：500 大卡
每份脂肪：30 克
碳水化合物：5 克
蛋白質：60 克
材料
- 羊肉：4 磅 / 1.8 公斤
- 大蒜：4 瓣，對切
- 迷迭香：1 枝，剁碎
- 橄欖油：2 湯匙
- 紅蘿蔔：1 根
- 番茄：3 顆，切塊
- 檸檬：1 顆
- 白酒：1 杯
- 紅椒粉：1 湯匙
- 黑胡椒粒和鹽適量
步驟
- 將烤箱預熱至 350°F / 180°C。
- 清洗並去除銀皮，準備肉品。
- 將每瓣大蒜去皮並切成薄片。
- 在肉上劃切口，然後插入蒜片。（為了獲得最佳風味，請在前一天執行此步驟，並在冰箱中冷藏過夜。但不要啟動烤箱。:)
- 將羊肉放入烤盤中，淋上橄欖油，然後加入白酒。
- 加入切塊的番茄和紅蘿蔔。
- 將檸檬切成四等份，去除種子，將汁擠在肉上，然後將檸檬角留在肉塊中。
- 將迷迭香切碎，然後與紅椒粉、鹽和黑胡椒粒一起撒在羊肉上，調味。
- 烘烤約 1 小時 45 分鐘，中途將羊肉翻面。
<p><span class="star-rating">
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon half">☆</span>
</span> (3 reviews)</p>
<p>Prep time: 30 min</p>
<p>Cook time: 1 hour 45 minutes</p>
<p>Total time: 2 hours 15 minutes</p>
<p>Yield: 4 servings<br>
Calories per serving: 500 kcal <br>
Fat per serving: 30g<br>
Carbs: 5g<br>
Protein: 60g<br>
</p>
<h1>Ingredients</h1>
<ul>
<li>Lamb meat: 4lbs / 1.8kg</li>
<li>Garlic: 4 cloves, halved</li>
<li>Rosemary: 1 sprig, minced</li>
<li>Olive oil: 2 tbsp</li>
<li>Carrot: 1 </li>
<li>Tomatoes: 3, chopped</li>
<li>Lemon: 1</li>
<li>Dry white wine: 1 cup</li>
<li>Paprika: 1 tbsp</li>
<li>Peppercorns and salt to taste</li>
</ul>
<h2>Directions</h2>
<ol>
<li>Heat oven to 350F / 180C.</li>
<li>Prepare the meat by washing and removing the silverskin.</li>
<li>Peel and cut each garlic clove into several slices.</li>
<li>Make incisions in the meat and insert the garlic slices. (For the most delicious results, perform this step the day before cooking and leave overnight in the refrigerator. Don't start the oven though. :)</li>
<li>Place lamb in baking dish, drizzle with olive oil, and add wine.</li>
<li>Add chopped tomatoes and carrot.</li>
<li>Cut lemon into quarters, remove seeds, squeeze juice over meat and leave wedges among the meat pieces.</li>
<li>Finely mince rosemary and sprinkle over lamb, along with paprika, salt and peppercorns to taste.</li>
<li>Roast for approximately 1 hr 45 mins, turning the lamb halfway through.</li>
</ol>
除了圖片之外，amp-carousel 也支援任何內容。在此範例中，我們將顯示評論。
評論
<h2>Reviews</h2>
address 標籤最適合表達作者資訊。
對於垂直方向無法容納的長文字，評論將顯示垂直捲軸。另一種替代方案是使用多行文字省略符號。
還不錯，但準備工作很費力
味道真的很好，但去除銀皮需要一些時間。試著詢問你的肉販是否可以幫忙，因為他們有專門的工具和技巧！
負面 Nancy意想不到的副作用
從烤箱取出後，我將這道菜放在我的寵物蜥蜴旁邊冷卻，不幸的是，牠現在長到 350 英尺高，目前正在摧毀日本東京。
Lawrence Gonzalez<amp-carousel width="1280" height="400" layout="responsive" type="carousel">
<article class="review">
<div class="star-rating">
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
</div>
<h1 class="name">Yum!</h1>
<p class="reviewBody">Words cannot express how delicious this tastes!</p>
<address class="author">Positive Patrick</address>
</article>
<article class="review">
<div class="star-rating">
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon">☆</span>
</div>
<h1 class="name">Not bad but prep is laborious</h1>
<p class="reviewBody">Tastes really good, but cutting the silverskin takes a while. Try asking your butcher if they can do it, since they have specialized tools and skills!</p>
<address class="author">Negative Nancy</address>
</article>
<article class="review">
<div class="star-rating">
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon full">☆</span>
<span class="star-icon">☆</span>
</div>
<h1 class="name">Unexpected side effects</h1>
<p class="reviewBody">After taking it out of the oven, I left this dish to cool off next to my pet lizard, unfortunately now he's 350ft tall now and is currently destroying Tokyo, Japan.</p>
<address class="author">Lawrence Gonzalez</address>
</article>
</amp-carousel>
社群分享按鈕的底部副本
<p class="heading">
<amp-social-share type="twitter" data-param-text="Amazing recipe that my friend made" width="45" height="33"></amp-social-share>
<amp-social-share type="facebook" width="45" height="33" data-attribution="254325784911610"></amp-social-share>
<amp-social-share type="gplus" width="45" height="33"></amp-social-share>
<amp-social-share type="email" width="45" height="33"></amp-social-share>
<amp-social-share type="pinterest" width="45" height="33"></amp-social-share>
</p>
嵌入相關內容
相關食譜
<h2>Related Recipes</h2>
建議向讀者推薦相關內容是個好主意。使用 amp-list 可以將個人化內容動態地加入您的 AMP 中。最好連結到相關內容的 AMP 版本，以便讓使用者保持在快速的 AMP 世界中。深入瞭解 amp-list
<amp-list width="300" height="75" layout="responsive" src="/static/samples/json/related_articles.json" binding="no">
<template type="amp-mustache">
<a class="card related" href="{{url}}"><amp-img width="101" height="75" src="{{thumbnail}}"></amp-img><span>{{title}}</span></a>
</template>
</amp-list>
使用者分析
分析功能必須在 <body> 中設定。在此範例中，我們使用 Google Analytics (分析) 追蹤網頁瀏覽量。
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-73836974-1"
},
"triggers": {
"default pageview": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "{{title}}"
}
}
}
}
</script>
</amp-analytics>
需要進一步說明嗎？
如果此頁面上的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。
前往 Stack Overflow 未說明的特色功能？AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題做出一次性貢獻。
在 GitHub 上編輯範例-