Pomocná rutina značky odkazu v ASP.NET Core

  • Článek

Autor: Rick Anderson

Pomocná rutina značky odkazu vygeneruje odkaz na primární soubor nebo vrátí soubor CSS. Primární soubor CSS je obvykle v síti pro doručování obsahu (CDN).

SÍŤ CDN:

  • Poskytuje několik výhod výkonu a hostování prostředku s webovou aplikací.
  • Neměli byste se spoléhat jako na jediný zdroj prostředku. Sítě CDN nejsou vždy dostupné, proto by se měla použít spolehlivá záložní služba. Náhradním webem, který je hostitelem webové aplikace, je obvykle záložní web.

Pomocná rutina značky odkazu umožňuje zadat síť CDN pro soubor CSS a náhradní, pokud síť CDN není k dispozici. Pomocná rutina značky odkazu poskytuje výhody CDN s odolností místního hostování.

Následující Razor kód ukazuje head prvek souboru rozložení vytvořeného pomocí šablony webové aplikace 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>

Následující kód se vykreslí z předchozího kódu (v prostředí bez vývoje):

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

V předchozím kódu vygeneroval <meta name="x-stylesheet-fallback-test" content="" class="sr-only" /> pomocník značky odkazu prvek a následující JavaScript, který slouží k ověření, zda je požadovaný bootstrap.css soubor k dispozici v CDN. V tomto případě byl soubor CSS k dispozici, takže pomocník značky vygeneroval <link /> prvek se souborem CDN CSS.

Všechny atributy, vlastnosti a metody pomocné rutiny značky odkazu najdete v nápovědě značky odkazu.

Href

Upřednostňovaná adresa propojeného prostředku Adresa se předá do generovaného kódu HTML ve všech případech.

asp-fallback-href

Adresa URL šablony stylů CSS, na která se má v případě selhání primární adresy URL vrátit.

asp-fallback-test-class

Název třídy definovaný v šabloně stylů, který se má použít pro záložní test. Další informace najdete na webu FallbackTestClass.

asp-fallback-test-property

Název vlastnosti CSS, který se má použít pro záložní test. Další informace najdete na webu FallbackTestProperty.

asp-fallback-test-value

Hodnota vlastnosti CSS, která se má použít pro záložní test. Další informace najdete na webu FallbackTestValue.

Další prostředky