社会审查

此软件包包含低等组件,可用于显示 近似值 在各种社交媒体/搜索平台上浏览时.

使用量

以下是使用Facebook预览组件的简单用法示例:

import { FacebookPreviews } from '@automattic/social-previews';

<FacebookPreviews
    title="Five for the Future"
    description="Launched in 2014, Five for the Future encourages organizations to contribute five percent of their resources to WordPress development. WordPress co-founder Matt Mullenweg proposed this benchmark to maintain a “golden ratio” of contributors to users."
    url="https://wordpress.org/five-for-the-future/"
    user={ { displayName: 'Matt Mullenweg' } }
/>;

您必须单独导入 CSS 来样式组件 。 您可以直接从软件包中导入 CSS 文件 :

import '@automattic/social-previews/style.css';

以下是使用搜索结果组件的另一个例子:

import { GoogleSearchPreview } from '@automattic/social-previews';

<GoogleSearchPreview
    title="Five for the Future"
    description="Launched in 2014, Five for the Future encourages organizations to contribute five percent of their resources to WordPress development. WordPress co-founder Matt Mullenweg proposed this benchmark to maintain a “golden ratio” of contributors to users."
    url="https://wordpress.org/five-for-the-future/"
    siteTitle="Five for the Future"
/>;

Twitter预览支持同一属性来预览一则微博,但也可以以Twitter线索的形式预览多则微博. 为此 tweets 属性需要一系列的微博。 这个阵列中的每个项目都可以取取更多有关微博的信息,让预览有更本土的感觉.

import { TwitterPreviews } from '@automattic/social-previews';

const tweetTemplate = {
    date: Date.now(),
    name: 'My Account Name',
    profileImage: 'https://abs.twimg.com/sticky/default_profile_images/default_profile_bigger.png',
    screenName: '@myAccount',
};

<TwitterPreviews
    tweets={ [
        {
            ...tweetTemplate,
            text: 'This is the first tweet in a thread, it only has text in it.',
        },
        {
            ...tweetTemplate,
            text: 'The second tweet has some images attached, too!',
            media: [
                {
                    alt: 'The alt text for the first image.',
                    url: 'https://url.for.the/first/image.png',
                    type: 'image/png',
                },
                {
                    alt: 'The alt text for the second image.',
                    url: 'https://url.for.the/second/image.png',
                    type: 'image/png',
                },
            ],
        },
    ] }
/>;

LinkedIn 预览的示例

import { LinkedInPreviews } from '@automattic/social-previews';

<LinkedInPreviews
    jobTitle="Job Title (Company Name)"
    image="https://url.for.the/image.png"
    name="LinkedIn Account Name"
    profileImage="https://static.licdn.com/sc/h/1c5u578iilxfi4m4dvc4q810q"
    title="Post title goes here"
    text="The text of the post goes here."
/>;

Tumblr 预览

import { TumblrPreviews } from '@automattic/social-previews';

<TumblrPreviews
    title="Five for the Future"
    description="Launched in 2014, Five for the Future encourages organizations to contribute five percent of their resources to WordPress development. WordPress co-founder Matt Mullenweg proposed this benchmark to maintain a “golden ratio” of contributors to users."
    image="https://url.for.the/image.png"
    url="https://wordpress.org/five-for-the-future/"
    user={ { displayName: 'Matt Mullenweg' } }
    customText="Some custom text here"
/>;

属性

在所有组件中都使用一些共同属性:

• title - 正在预览文章的标题.
• description - 对正在预览的帖子进行较长的描述.
• url - 正在预览文章的全部 URL .

此外,每个单个组件接受可选的额外属性,这些属性可能针对其指定的平台(例如: image, (中文(简体) ), author. . etc (英语).

自动截断

请注意,由于每个给定的平台执行的限制,一些字符串可能需要被截断. 每个组件都有各自的规则,规定在特定字段允许的字符数量,然后进行截取。 通常对 description 字段并缩短 title 字段。 截断由 SPACE 字符首选,但如果不可能,则强制进行硬截取。 在这两种情况下都具有椭圆形字符(…`被附在字符串的末尾,以表示已发生截断.

警卫

需要报告安全弱点吗? 转到 https://automattic.com/security/ (中文(中国大陆) ) 或者直接到我们的安全漏洞赏金网站 https://hackerone.com/自失常症。 。 。 .

许可证

社会审查根据下列规定获得许可: GNU 通用公共许可证 v2( 或以后)