真好吃！
無法用言語形容有多美味！
正面 Patrick食譜
簡介
這是一個食譜 AMP 文章範例，示範如何使用 JSON+LD 表達機器可讀的食譜資料。它使用了適用於食譜文章的 AMP 元件：amp-carousel (圖片庫、評論輪播)、amp-social-share 和 amp-list (相關的文章)。也有星級評分，目前為唯讀 (請參閱此 GitHub issue)。
設定
另外，必須在標頭中匯入使用的 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>
Metadata
如果存在 schema.org metadata，Google 搜尋可以使用食譜 Rich Cards 顯示食譜資料。
<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 issue 以取得在此範例發布後建議的可能更好的方法。
<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 issue)。
作者：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>
社群分享
社群分享擴充功能為分享按鈕提供通用介面。深入瞭解 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 湯匙
- 黑胡椒粒和鹽適量
步驟
- 將烤箱預熱至 350F / 180C。
- 清洗肉並去除銀皮以準備肉。
- 將每瓣大蒜去皮並切成薄片。
- 在肉上劃切口並插入蒜片。(為了獲得最佳風味，請在前一天執行此步驟並在冰箱中放置過夜。但不要啟動烤箱。:)
- 將羊肉放入烤盤中，淋上橄欖油，並加入白酒。
- 加入切塊的番茄和紅蘿蔔。
- 將檸檬切成四等份，去除種子，將汁擠在肉上，並將檸檬角留在肉塊之間。
- 將迷迭香切碎並撒在羊肉上，以及紅椒粉、鹽和黑胡椒粒適量調味。
- 烘烤約 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 上編輯範例-