Bento Embedly 卡

<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css"
    />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js"
    ></script>
    <style>
      body {
        background: #ecf1f3;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      bento-embedly-card {
        width: 375px;
        height: 710px;
      }
    </style>

</head>

<body>

    <bento-embedly-key value="12af2e3543ee432ca35ac30a4b4f656a">
    </bento-embedly-key>
    <bento-embedly-card
      data-url="https://twitter.com/AMPhtml/status/1397995435386679302?s=20"
      data-card-theme="dark"
      data-card-controls="0"
    >
    </bento-embedly-card>

</body>

使用 Embedly 卡片來提供適應式的可分享嵌入內容

卡片是善用 Embedly 的最簡單方法。對於任何媒體而言，卡片都會提供內建嵌入分析功能的回應式嵌入內容。

如果您有付費方案，請使用 <bento-embedly-key> 或 <BentoEmbedlyContext.Provider> 組件來設定您的 API 金鑰。您只需要每頁一個 Bento Embedly 金鑰，就可以移除卡片中的 Embedly 品牌。在您的頁面中，您可以包含一或多個 Bento Embedly Card 實例。

將 bento-embedly-card 用作網路組件或 React 函式元件

↓ 網路組件 ↓ React / Preact

網路組件

您必須包含每個 Bento 組件所需的 CSS 函式庫，以保證在加入自訂樣式之前載入正確，或使用內嵌提供的輕量級預升級樣式。請參閱版面配置和樣式。

透過 npm 導入

npm install @bentoproject/embedly-card

import {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';
defineBentoEmbedlyCard();

透過 `<script>` 包含

<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css" crossorigin="anonymous">

範例

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css"
    />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js"
    ></script>
    <style>
      bento-embedly-card {
        width: 375px;
        height: 472px;
      }
    </style>

</head>

<body>

<bento-embedly-key value="12af2e3543ee432ca35ac30a4b4f656a">
    </bento-embedly-key>

    <bento-embedly-card
      data-url="https://twitter.com/AMPhtml/status/986750295077040128"
      data-card-theme="dark"
      data-card-controls="0"
    >
    </bento-embedly-card>

    <bento-embedly-card
      id="my-url"
      data-url="https://www.youtube.com/watch?v=LZcKdHinUhE"
    >
    </bento-embedly-card>

</body>

版面配置和樣式

每個 Bento 組件都有小型 CSS 函式庫，您必須包括它們才能保證在沒有內容位移的情況下正確載入。由於基於順序的特殊性，您必須手動確保在任何自訂樣式之前包括樣式表。

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css"
/>

或者，您也可以讓輕量級的預升級樣式內嵌提供

<style>
  bento-embedly-card {
    display: block;
    overflow: hidden;
    position: relative;
  }
</style>

容器類型

bento-embedly-card 組件有一個已定義的版面配置大小類別。為了確保組件正確呈現，請務必透過想要的 CSS 版面配置 (例如透過 height、width、aspect-ratio 或其他類似屬性所定義的版面配置) 將大小套用到組件及其直接子項目 (投影片)。

bento-embedly-card {
  height: 100px;
  width: 100%;
}

屬性

`data-url`

用於擷取嵌入資訊的 URL。

`data-card-embed`

指向影片或豐富媒體的 URL。與文章等靜態嵌入內容搭配使用，卡片會嵌入影片或豐富媒體，而不是在卡片中使用靜態頁面內容。

`data-card-image`

指向影像的 URL。指定當 data-url 指向一篇文章時，要在文章卡片中使用哪個影像。並非所有影像 URL 都受支援，如果影像未載入，請嘗試使用不同的影像或網域。

`data-card-controls`

啟用分享圖示。

0：停用分享圖示。
1：啟用分享圖示

預設為 1。

`data-card-align`

對齊卡片。可能的值為 left、center 和 right。預設值為 center。

`data-card-recommend`

當支援建議時，這會停用影片和豐富卡片的 embedly 建議。這些建議是由 embedly 建立的。

0：停用 embedly 建議。
1：啟用 embedly 建議。

預設值為 1。

`data-card-via` (選用)

指定卡片中的通過內容。這是進行註解說明的好方法。

`data-card-theme` (選用)

允許設定 dark 主題，這會變更主卡片容器的背景顏色。使用 dark 設定這個主題。如果背景為深色，最好指定這個設定。預設為 light，不會設定主卡片容器的背景顏色。

title (選用)

為元件定義 title 屬性，以傳遞至底層 <iframe> 元素。預設值為 "Embedly card"。

API 範例

以程式化方式變更任何屬性值，會自動更新元素。例如：透過變更 data-url 值，您可以切換到不同的嵌入

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css"
    />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js"
    ></script>
    <style>
      bento-embedly-card {
        width: 375px;
        height: 472px;
      }
    </style>

</head>

<body>

<bento-embedly-key value="12af2e3543ee432ca35ac30a4b4f656a">
    </bento-embedly-key>

    <bento-embedly-card
      data-url="https://twitter.com/AMPhtml/status/986750295077040128"
      data-card-theme="dark"
      data-card-controls="0"
    >
    </bento-embedly-card>

    <bento-embedly-card
      id="my-url"
      data-url="https://www.youtube.com/watch?v=LZcKdHinUhE"
    >
    </bento-embedly-card>

    <div class="buttons" style="margin-top: 8px">
      <button id="change-url">Change embed</button>
    </div>

    <script>
      (async () => {
        const embedlyCard = document.querySelector('#my-url');
        await customElements.whenDefined('bento-embedly-card');

        // set up button actions
        document.querySelector('#change-url').onclick = () => {
          embedlyCard.setAttribute(
            'data-url',
            'https://www.youtube.com/watch?v=wcJSHR0US80'
          );
        };
      })();
    </script>

</body>

Preact/React 元件

透過 npm 導入

npm install @bentoproject/embedly-card

import {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';
import '@bentoproject/embedly-card/styles.css';

function App() {
  return (
    <BentoEmbedlyContext.Provider
      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}
    >
      <BentoEmbedlyCard url="https://www.youtube.com/watch?v=LZcKdHinUhE"></BentoEmbedlyCard>
    </BentoEmbedlyContext.Provider>
  );
}

版面配置和樣式

容器類型

BentoEmbedlyCard 元件已定義版面大小類型。為確保元件正確呈現，請務必透過所需的 CSS 版面（例如以 height、width、aspect-ratio 或其他類似的屬性定義的版面）將大小套用至元件及其子項目（投影片）。這些設定可以內嵌套用

<BentoEmbedlyCard
  style={{width: 300, height: 100}}
  url="https://www.youtube.com/watch?v=LZcKdHinUhE"
></BentoEmbedlyCard>

或透過 className 套用

<BentoEmbedlyCard
  className="custom-styles"
  url="https://www.youtube.com/watch?v=LZcKdHinUhE"
></BentoEmbedlyCard>

.custom-styles {
  height: 100px;
  width: 100%;
}

屬性

`url`

用於擷取嵌入資訊的 URL。

`cardEmbed`

指向影片或豐富媒體的 URL。與文章等靜態嵌入內容搭配使用，卡片會嵌入影片或豐富媒體，而不是在卡片中使用靜態頁面內容。

`cardImage`

`cardControls`

啟用分享圖示。

0：停用分享圖示。
1：啟用分享圖示

預設為 1。

`cardAlign`

對齊卡片。可能的值為 left、center 和 right。預設值為 center。

`cardRecommend`

當支援建議時，這會停用影片和豐富卡片的 embedly 建議。這些建議是由 embedly 建立的。

0：停用 embedly 建議。
1：啟用 embedly 建議。

預設值為 1。

`cardVia` (選用)

指定卡片中的通過內容。這是進行註解說明的好方法。

`cardTheme` (選用)

title (選用)

為元件定義 title 屬性，以傳遞至底層 <iframe> 元素。預設值為 "Embedly card"。

Bento Embedly 卡

<head>

<body>

網路組件

透過 npm 導入

透過 <script> 包含

範例

<head>

<body>

版面配置和樣式

容器類型

屬性

data-url

data-card-embed

data-card-image

data-card-controls

data-card-align

data-card-recommend

data-card-via (選用)

data-card-theme (選用)

title (選用)

API 範例

<head>

<body>

Preact/React 元件

透過 npm 導入

版面配置和樣式

容器類型

屬性

url

cardEmbed

cardImage

cardControls

cardAlign

cardRecommend

cardVia (選用)

cardTheme (選用)

title (選用)

透過 `<script>` 包含

`data-url`

`data-card-embed`

`data-card-image`

`data-card-controls`

`data-card-align`

`data-card-recommend`

`data-card-via` (選用)

`data-card-theme` (選用)

`url`

`cardEmbed`

`cardImage`

`cardControls`

`cardAlign`

`cardRecommend`

`cardVia` (選用)

`cardTheme` (選用)