ASP.NET Core 的連結標籤協助程式

發行項
11/30/2023

連結標籤協助程式會產生主要或後援 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.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.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.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.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.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。