首页 > 解决方案 > 如何在 Blazor 页面中嵌入推文?

问题描述

是否有一种公认的方法可以在 Blazor 页面中嵌入推文或其他社交媒体帖子?Twitter 嵌入和大多数其他标签中的标签在 Visual Studio 中会产生编译器错误。

以下是 Twitter 告诉您粘贴到源代码中的内容:

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Is there an accepted method to embed a Tweet or other social media post in a <a href="https://twitter.com/hashtag/Blazor?src=hash&amp;ref_src=twsrc%5Etfw">#Blazor</a> page? The &lt;script&gt; tags in most embeds give a compiler error in Visual Studio.</p>&mdash; BenjaminCharlton (@Benjami63766584) <a href="https://twitter.com/Benjami63766584/status/1296819523304271873?ref_src=twsrc%5Etfw">August 21, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

请问在 Blazor 页面上执行此操作的正确方法是什么?

标签: c#twitterblazorblazor-webassembly

解决方案


您可以从此页面获取脚本并将其放入您的 Index.html

从您拥有的脚本中删除脚本,或使用 API 生成没有脚本的脚本。

这是一个将接受嵌入字符串作为参数的组件:


@using Microsoft.JSInterop

@((MarkupString)RawHtml)

@code {

    [Inject]
    public IJSRuntime JSRuntime { get; set; }

    [Parameter]
    public string RawHtml { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("twttr.widgets.load");
        }
    }

}

在此处输入图像描述


推荐阅读