太好吃了！
文字无法表达这道菜有多么美味！
积极的 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.js.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 汤匙
- 胡椒粒和盐适量
步骤
- 将烤箱加热至 350 华氏度 / 180 摄氏度。
- 通过清洗和去除银皮来准备肉。
- 将每瓣大蒜剥皮并切成几片。
- 在肉上切开切口并插入蒜片。（为了获得最美味的效果，请在烹饪前一天执行此步骤，然后在冰箱中过夜。但不要启动烤箱。:)
- 将羊肉放入烤盘中，淋上橄榄油，然后加入葡萄酒。
- 加入切碎的西红柿和胡萝卜。
- 将柠檬切成四等分，去除种子，将汁液挤到肉上，并将角块留在肉块中。
- 将迷迭香切碎，然后与辣椒粉、盐和胡椒粒一起撒在羊肉上调味。
- 烘烤约 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>
用户分析
分析必须在正文中配置。在这里，我们使用 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 上编辑示例-