Pomocnik tagów łączy w programie ASP.NET Core
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.
Często używane atrybuty pomocnika tagów łącza
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
Opinia
https://aka.ms/ContentUserFeedback.
Dostępne już wkrótce: W 2024 r. będziemy stopniowo wycofywać zgłoszenia z serwisu GitHub jako mechanizm przesyłania opinii na temat zawartości i zastępować go nowym systemem opinii. Aby uzyskać więcej informacji, sprawdź:Prześlij i wyświetl opinię dla