AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt
  • 網站

食譜

檢視示範 在 Playground 中開啟

簡介

這是一個食譜 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 搜尋可以使用 食譜複合式資訊卡 顯示食譜資料。

<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 湯匙
  • 胡椒粒和鹽適量

步驟

  1. 將烤箱預熱至 350°F/180°C。
  2. 準備肉品，方法是清洗並去除銀皮。
  3. 將每瓣大蒜去皮並切成數片。
  4. 在肉上切開切口並插入蒜片。（為了獲得最美味的結果，請在前一天執行此步驟並在冰箱中放置過夜。但不要啟動烤箱。:)）
  5. 將羊肉放入烤盤中，淋上橄欖油，然後加入白酒。
  6. 加入切碎的番茄和紅蘿蔔。
  7. 將檸檬切成四等份，去除種子，將汁擠在肉上，然後將檸檬角留在肉塊之間。
  8. 將迷迭香切碎，然後與紅椒粉、鹽和胡椒粒一起撒在羊肉上調味。
  9. 烘烤約 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 標籤是最適合用於表達作者資訊。

評論將為不適合垂直顯示的長文字顯示垂直捲軸。另一種方法是使用純 CSS 多行文字省略符號。

☆ ☆ ☆ ☆ ☆

美味！

文字無法表達它有多美味！

正面 Patrick
☆ ☆ ☆ ☆ ☆

還不錯，但準備工作很費力

味道真的很好，但切銀皮需要一段時間。試著問問你的肉販是否可以幫忙，因為他們有專門的工具和技能！

負面 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 上編輯範例