Pomocnik tagów łączy w programie ASP.NET Core

  • Artykuł

Autor: Rick Anderson

Pomocnik tagów łączy generuje link do podstawowego lub powrotnego pliku CSS. Zazwyczaj podstawowy plik CSS znajduje się w usłudze Content Delivery Network (CDN).

Sieć CDN:

  • Zapewnia kilka zalet wydajności a hostowanie zasobu za pomocą aplikacji internetowej.
  • Nie należy polegać na tym, że jest jedynym źródłem zasobu. Sieci CDN nie zawsze są dostępne, dlatego należy użyć niezawodnego rezerwowego. Zazwyczaj rezerwowa to witryna hostująca aplikację internetową.

Pomocnik tagów łączy umożliwia określenie sieci CDN dla pliku CSS i rezerwowego, gdy sieć CDN jest niedostępna. Pomocnik tagów linków zapewnia zaletę wydajności usługi CDN z niezawodnością hostingu lokalnego.

Razor Poniższy znacznik przedstawia head element pliku układu utworzonego przy użyciu szablonu aplikacji internetowej platformy ASP.NET Core:

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

Poniższy kod jest renderowany w formacie HTML z poprzedniego kodu (w środowisku nieprogramowania):

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

W poprzednim kodzie pomocnik tagu linku <meta name="x-stylesheet-fallback-test" content="" class="sr-only" /> wygenerował element i następujący kod JavaScript, który służy do sprawdzania, czy żądany bootstrap.css plik jest dostępny w usłudze CDN. W tym przypadku plik CSS był dostępny, więc Pomocnik tagów <link /> wygenerował element z plikiem CSS usługi CDN.

Zobacz Pomocnik tagów linków, aby zapoznać się ze wszystkimi atrybutami, właściwościami i metodami pomocnika tagów linków.

Href

Preferowany adres połączonego zasobu. Adres jest przekazywany do wygenerowanego kodu HTML we wszystkich przypadkach.

asp-fallback-href

Adres URL arkusza stylów CSS do powrotu do adresu w przypadku niepowodzenia podstawowego adresu URL.

asp-fallback-test-class

Nazwa klasy zdefiniowana w arkuszu stylów do użycia na potrzeby testu rezerwowego. W celu uzyskania więcej informacji, zobacz następujący temat: FallbackTestClass.

asp-fallback-test-property

Nazwa właściwości CSS do użycia na potrzeby testu rezerwowego. W celu uzyskania więcej informacji, zobacz następujący temat: FallbackTestProperty.

asp-fallback-test-value

Wartość właściwości CSS do użycia na potrzeby testu rezerwowego. W celu uzyskania więcej informacji, zobacz następujący temat: FallbackTestValue.

Dodatkowe zasoby