Bento Instagram

    <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>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-instagram-1.0.js"
    ></script>
    <style>
      bento-instagram {
        display: block;
        overflow: hidden;
        position: relative;
      }
    </style>
    <style>
      body {
        background: #ecf1f3;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      bento-embedly-card {
        width: 375px;
        height: 710px;
      }
    </style>

</head>

    <bento-instagram
      id="my-instagram"
      data-shortcode="CKXYAzuj7TE"
      data-captioned
      style="height: 800px; width: 400px"
    >
    </bento-instagram>

</body>

嵌入 Instagram 帖子。

Web 组件

在添加自定义样式之前，必须先包含每个 Bento 组件所需的 CSS 库，以确保正确加载。或者使用内嵌的轻量级预升级样式。请参阅 布局和样式。

通过 npm 导入

npm install @bentoproject/instagram

import {defineElement as defineBentoInstagram} from '@bentoproject/instagram';
defineBentoInstagram();

通过 <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-instagram-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-instagram-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-instagram-1.0.css" crossorigin="anonymous">

示例

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-instagram-1.0.js"
    ></script>
    <style>
      bento-instagram {
        display: block;
        overflow: hidden;
        position: relative;
      }
    </style>

</head>

<bento-instagram
      id="my-instagram"
      data-shortcode="CKXYAzuj7TE"
      data-captioned
      style="height: 800px; width: 400px"
    >
    </bento-instagram>

</body>

布局和样式

每个 Bento 组件都有一个小型 CSS 库，您必须包含该库才能确保在没有 内容偏移 的情况下正确加载。由于基于顺序的特异性，您必须手动确保在任何自定义样式之前包含样式表。

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

或者，您也可以使轻量级预升级样式内嵌可用

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

容器类型

bento-instagram 组件具有已定义的布局大小类型。为确保组件正确呈现，请务必通过所需的 CSS 布局（例如使用 height、width、aspect-ratio 或其他此类属性定义的布局）将大小应用于组件及其直接子级（幻灯片）。

bento-instagram {
  height: 500px;
  width: 100px;
}

属性

data-shortcode

instagram data-shortcode 可以在每个 instagram 照片 URL 中找到。例如，在 https://instagram.com/p/fBwFP 中，fBwFP 是 data-shortcode。

data-captioned

包含 Instagram 标题。bento-instagram 将尝试调整为包括标题的正确高度。

API 示例

通过以编程方式更改 data-shortcode 属性值，您可以动态切换到不同的帖子

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-instagram-1.0.js"
    ></script>
    <style>
      bento-instagram {
        display: block;
        overflow: hidden;
        position: relative;
      }
    </style>

</head>

<bento-instagram
      id="my-instagram"
      data-shortcode="CKXYAzuj7TE"
      data-captioned
      style="height: 800px; width: 400px"
    >
    </bento-instagram>
    <button id="change-shortcode">Change shortcode</button>

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

        // set up button actions
        document.querySelector('#change-shortcode').onclick = () => {
          instagram.dataset.shortcode = '1totVhIFXl';
        };
      })();
    </script>

</body>

样式

您可以使用 bento-instagram 元素选择器设置组件样式。

Preact/React 组件

通过 npm 导入

npm install @bentoproject/instagram

import React from 'react';
import {BentoInstagram} from '@bentoproject/instagram/react';
import '@bentoproject/instagram/styles.css';
function App() {
  return <BentoInstagram shortcode="CKXYAzuj7TE" captioned />;
}

布局和样式

容器类型

BentoInstagram 组件有定义的布局大小类型。为了确保组件正确呈现，请务必通过所需的 CSS 布局（例如使用 height、width、aspect-ratio 或其他此类属性定义的布局）将大小应用于组件及其直接子级（幻灯片）。这些可以内联应用

<BentoInstagram
  style={{width: 300, height: 200}}
  shortcode="CKXYAzuj7TE"
></BentoInstagram>

或通过 className

<BentoInstagram
  className="custom-styles"
  shortcode="CKXYAzuj7TE"
></BentoInstagram>

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

属性

shortcode

instagram 短代码在每个 instagram 照片 URL 中找到。例如，在 https://instagram.com/p/fBwFP 中，fBwFP 是短代码。

captioned

包含 Instagram 标题。bento-instagram 将尝试调整为包括标题的正确高度。