Bento

Bento Twitter

<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>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-twitter-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-twitter-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-twitter-1.0.css"
    />
    <style>
      bento-twitter {
        width: 375px;
        height: 472px;
      }
    </style>
    <style>
      body {
        background: #ecf1f3;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
</head>

<body>

    <bento-twitter
      id="my-tweet"
      style="width: 375px; height: 720px"
      data-tweetid="1397995435386679302"
    >
    </bento-twitter>
</body>

嵌入 Twitter 内容，如推文或时刻。

将 bento-twitter 用作 Web 组件或 React 函数组件

↓ Web 组件 ↓ React / Preact

Web 组件

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

通过 npm 导入

npm install @bentoproject/twitter
import {defineElement as defineBentoTwitters} from '@bentoproject/twitter';
defineBentoTwitters();

通过 <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-twitter-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-twitter-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-twitter-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>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-twitter-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-twitter-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-twitter-1.0.css"
    />
    <style>
      bento-twitter {
        width: 375px;
        height: 472px;
      }
    </style>
</head>

<body>

<bento-twitter id="my-tweet" data-tweetid="885634330868850689"></bento-twitter>
</body>

布局和样式

每个 Bento 组件都有一个小型 CSS 库，你必须包含它以确保正确加载，而不会出现 内容偏移。由于基于顺序的特异性，你必须手动确保在任何自定义样式之前包含样式表。

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

或者，你还可以使轻量级预升级样式内联可用

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

容器类型

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

bento-twitter {
  height: 100px;
  width: 100%;
}

属性

data-tweetid / data-momentid / data-timeline-source-type（必需）推文或时刻的 ID，或者如果要显示时间线，则为源类型。在类似于 https://twitter.com/joemccann/status/640300967154597888 的 URL 中，640300967154597888 是推文 ID。在类似于 https://twitter.com/i/moments/1009149991452135424 的 URL 中，1009149991452135424 是时刻 ID。有效的时间线源类型包括 profile、likes、list、collection、url 和 widget。
data-timeline-*（可选）显示时间线时，除了 timeline-source-type 之外，还需要提供更多参数。例如，data-timeline-screen-name="amphtml" 与 data-timeline-source-type="profile" 结合使用，将显示 AMP Twitter 帐户的时间线。有关可用参数的详细信息，请参阅 Twitter 的 JavaScript 工厂函数指南 中的“时间线”部分。
data-*（可选）你可以通过设置data-属性来指定推文、精彩瞬间或时间线的显示选项。例如，data-cards="hidden"停用 Twitter 卡片。有关可用选项的详细信息，请参阅 Twitter 文档 （适用于推文）、（适用于精彩瞬间） 和 （适用于时间线）。
标题（可选）为组件定义一个title属性。默认值为Twitter。

交互性和 API 使用

以编程方式更改任何属性值都会自动更新元素。例如，通过data-tweetid更改推文 ID 会自动加载新推文

<head>

<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-twitter-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-twitter-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-twitter-1.0.css"
    />
    <style>
      bento-twitter {
        width: 375px;
        height: 472px;
      }
    </style>
</head>

<body>

<bento-twitter id="my-tweet" data-tweetid="885634330868850689">
    </bento-twitter>
    <div class="buttons" style="margin-top: 8px">
      <button id="change-tweet">Change tweet</button>
    </div>

    <script>
      (async () => {
        const twitter = document.querySelector('#my-tweet');

        // set up button actions
        document.querySelector('#change-tweet').onclick = () => {
          twitter.setAttribute('data-tweetid', '495719809695621121');
        };
      })();
    </script>
</body>

Preact/React 组件

通过 npm 导入

npm install @bentoproject/twitter
import React from 'react';
import {BentoTwitter} from '@bentoproject/twitter/react';
import '@bentoproject/twitter/styles.css';

function App() {
  return <BentoTwitter tweetid="1356304203044499462"></BentoTwitter>;
}

布局和样式

容器类型

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

<BentoTwitter
  style={{width: 300, height: 100}}
  tweetid="1356304203044499462"
></BentoTwitter>

或通过className

<BentoTwitter
  className="custom-styles"
  tweetid="1356304203044499462"
></BentoTwitter>
.custom-styles {
  height: 100px;
  width: 100%;
}

属性

tweetid / momentid / timelineSourceType（必需）推文或时刻的 ID，或者如果要显示时间线，则为源类型。在类似于 https://twitter.com/joemccann/status/640300967154597888 的 URL 中，640300967154597888 是推文 ID。在类似于 https://twitter.com/i/moments/1009149991452135424 的 URL 中，1009149991452135424 是时刻 ID。有效的时间线源类型包括 profile、likes、list、collection、url 和 widget。
card / conversations（可选）在显示推文时，除了tweetid之外，还可以提供其他参数。例如，cards="hidden"与conversation="none"结合使用，将显示一条没有其他缩略图或评论的推文。
limit（可选）在显示精彩瞬间时，除了moment之外，还可以提供其他参数。例如，limit="5"将显示一个包含最多五张卡片的嵌入式精彩瞬间。
timelineScreenName / timelineUserId（可选）在显示时间线时，除了timelineSourceType之外，还可以提供其他参数。例如，timelineScreenName="amphtml"与timelineSourceType="profile"结合使用，将显示 AMP Twitter 帐户的时间线。
options（可选）你可以通过将一个对象传递给options属性来指定推文、精彩瞬间或时间线的外观选项。有关可用选项的详细信息，请参阅 Twitter 文档 （适用于推文）、（适用于精彩瞬间） 和 （适用于时间线）。注意：在传递`options`属性时，请务必优化或记忆化该对象
const TWITTER_OPTIONS = {
  // make sure to define these once globally!
};
function MyComponent() {
  // etc
  return (
    <Twitter optionsProps={TWITTER_OPTIONS} />
  );
}
标题（可选）为组件 iframe 定义一个title。默认值为Twitter。
我们在本网站上使用 Cookie 来分析流量并优化您的体验。
更多详情