更多内置-链接

ASP.NET Core 中的链接标记帮助程序

作者：Rick Anderson

链接标记帮助程序用于生成指向主要或回退 CSS 文件的链接。 通常主 CSS 文件位于内容分发网络 (CDN)。

CDN：

  • 提供多个性能优势，并使用 Web 应用托管资产。
  • 不应依赖作为资产的唯一来源。 CDN 并非始终可用，因此应使用可靠的回退。 通常，回退是托管 Web 应用的站点。

可以使用链接标记帮助程序指定 CSS 文件的 CDN 以及回退文件（CDN 不可用时）。 链接标记帮助程序借助本地宿主的可靠性提供 CDN 性能优势。

以下 Razor 标记显示使用 ASP.NET Core Web 应用模板创建的布局文件的 head 元素：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebLinkTH</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" 
              href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" 
              asp-fallback-test-value="absolute"
              crossorigin="anonymous"
              integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" />
    </environment>
    <link rel="stylesheet" href="~/css/site.css" />
</head>

以下是上述代码呈现的 HTML（非开发环境）：

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home page - WebLinkTH</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
          crossorigin="anonymous" integrity="sha256-eS<snip>BE=" />
    <meta name="x-stylesheet-fallback-test" content="" class="sr-only" />
    <script>
        !function (a, b, c, d) {
            var e, f = document,
                g = f.getElementsByTagName("SCRIPT"),
                h = g[g.length - 1].previousElementSibling,
                i = f.defaultView && f.defaultView.getComputedStyle ? f.defaultView.getComputedStyle(h) : h.currentStyle;
            if (i && i[a] !== b) for (e = 0; e < c.length; e++)
                f.write('<link href="' + c[e] + '" ' + d + "/>")
        }
            ("position", "absolute", ["\/lib\/bootstrap\/dist\/css\/bootstrap.min.css"],
                "rel=\u0022stylesheet\u0022 crossorigin=\u0022anonymous\u0022 integrity=\abc<snip>BE=\u0022 ");
    </script>

    <link rel="stylesheet" href="/css/site.css" />
</head>

在上述代码中，链接标记帮助程序生成 <meta name="x-stylesheet-fallback-test" content="" class="sr-only" /> 元素以及以下 JavaScript（用于验证是否可以从 CDN 获取请求的 bootstrap.min.css 文件） 。 在此示例中，可以获取 CSS 文件，因此标记帮助程序使用 CDN CSS 文件生成 <link /> 元素。

若要了解所有链接标记帮助程序属性和方法，请参阅链接标记帮助程序。

href

链接的资源的首选地址。 在任何情况下，均会将此地址传递到生成的 HTML。

asp-fallback-href

主 URL 失效后要回退到的 CSS 样式表的 URL。

asp-fallback-test-class

样式表中定义的用于回退测试的类名称。 有关详细信息，请参阅 FallbackTestClass。

asp-fallback-test-property

用于回退测试的 CSS 属性名称。 有关详细信息，请参阅 FallbackTestProperty。

asp-fallback-test-value

用于回退测试的 CSS 属性值。 有关详细信息，请参阅 FallbackTestValue。

其他资源

目录

Razor页面

通用

客户端开发

标记帮助程序

高级