好吃！
语言无法表达它有多么美味！
积极的帕特里克食谱
简介
这是一个示例食谱 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.org.cn/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>
社交分享
社交分享扩展为分享按钮提供了一个通用界面。了解有关 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标签最适合用来表示作者信息。
评论将为不适合垂直的长文本显示垂直滚动条。另一种方法是使用多行文本省略号。
还不错，但准备工作很费力
味道真的很好，但是切割银皮需要一段时间。尝试问问你的屠夫是否可以这样做，因为他们有专门的工具和技能！
消极的南希意想不到的副作用
将其从烤箱中取出后，我将这道菜放在我的宠物蜥蜴旁边冷却，不幸的是，现在它已经有 350 英尺高了，目前正在摧毁日本东京。
劳伦斯·冈萨雷斯<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>
用户分析
必须在正文中配置分析。在这里，我们使用 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 上编辑示例-