共用方式為


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.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

其他資源