Pomocná rutina značky odkazu v ASP.NET Core
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.
Běžně používané atributy pomocné rutiny značek odkazů
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
Váš názor
https://aka.ms/ContentUserFeedback.
Připravujeme: V průběhu roku 2024 budeme postupně vyřazovat problémy z GitHub coby mechanismus zpětné vazby pro obsah a nahrazovat ho novým systémem zpětné vazby. Další informace naleznete v tématu:Odeslat a zobrazit názory pro