ASP.NET Core 中的連結標記協助程式Link Tag Helper in ASP.NET Core

作者:Rick AndersonBy Rick Anderson

連結標籤協助程式會產生主要或切換回 CSS 檔案的連結。The Link Tag Helper generates a link to a primary or fall back CSS file. 主要 CSS 檔案通常位於內容傳遞網路(CDN)上。Typically the primary CSS file is on a Content Delivery Network (CDN).

CDN:A CDN:

  • 提供數個效能優勢,與使用 web 應用程式來裝載資產。Provides several performance advantages vs hosting the asset with the web app.
  • 不應依賴作為資產的唯一來源。Should not be relied on as the only source for the asset. Cdn 不一定是可用的,因此應該使用可靠的回溯。CDNs are not always available, therefore a reliable fallback should be used. 通常,回溯是裝載 web 應用程式的網站。Typically the fallback is the site hosting the web app.

連結標籤協助程式可讓您指定 CSS 檔案的 CDN,以及 CDN 無法使用時的回復。The Link Tag Helper allows you to specify a CDN for the CSS file and a fallback when the CDN is not available. 連結標籤協助程式可提供 CDN 的效能優勢,以及本機裝載的穩定性。The Link Tag Helper provides the performance advantage of a CDN with the robustness of local hosting.

下列Razor標記顯示使用 ASP.NET Core head web 應用程式範本所建立之配置檔案的元素:The following Razor markup shows the head element of a layout file created with the ASP.NET Core web app template:

<!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:The following is rendered HTML from the preceding code (in a non-Development environment):

<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,用來驗證要求的啟動程式。最小的 .css檔案可在 CDN 上使用。In the preceding code, the Link Tag Helper generated the <meta name="x-stylesheet-fallback-test" content="" class="sr-only" /> element and the following JavaScript which is used to verify the requested bootstrap.min.css file is available on the CDN. 在此情況下,CSS 檔案可供使用,標記協助程式會<link />使用 CDN CSS 檔案產生元素。In this case, the CSS file was available so the Tag Helper generated the <link /> element with the CDN CSS file.

請參閱連結標記協助程式,以取得所有的連結標籤 helper 屬性、屬性和方法。See Link Tag Helper for all the Link Tag Helper attributes, properties, and methods.

hrefhref

連結資源的慣用位址。Preferred address of the linked resource. 在所有情況下,會將位址視為產生的 HTML。The address is passed thought to the generated HTML in all cases.

asp-fallback-hrefasp-fallback-href

當主要 URL 失敗時,要回復的 CSS 樣式表單 URL。The URL of a CSS stylesheet to fallback to in the case the primary URL fails.

asp-fallback-測試類別asp-fallback-test-class

在樣式表單中定義用於回溯測試的類別名稱。The class name defined in the stylesheet to use for the fallback test. 如需詳細資訊,請參閱FallbackTestClassFor more information, see FallbackTestClass.

asp-fallback-測試-屬性asp-fallback-test-property

用於回退測試的 CSS 屬性名稱。The CSS property name to use for the fallback test. 如需詳細資訊,請參閱FallbackTestPropertyFor more information, see FallbackTestProperty.

asp-fallback-測試-值asp-fallback-test-value

要用於 fallback 測試的 CSS 屬性值。The CSS property value to use for the fallback test. 如需詳細資訊,請參閱FallbackTestValueFor more information, see FallbackTestValue.

其他資源Additional resources