ASP.NET Core 中的链接标记帮助程序Link Tag Helper in ASP.NET Core
- 本文内容
常用的链接标记帮助程序属性Commonly used Link Tag Helper attributes
其他资源Additional resources

ASP.NET Core 中的链接标记帮助程序Link Tag Helper in ASP.NET Core

本文内容

链接标记帮助程序用于生成指向主要或回退 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 /> 元素。

常用的链接标记帮助程序属性Commonly used Link Tag Helper attributes

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

hrefhref

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

asp-fallback-hrefasp-fallback-href

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

asp-fallback-test-classasp-fallback-test-class

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

asp-fallback-test-propertyasp-fallback-test-property

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

asp-fallback-test-valueasp-fallback-test-value

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

链接