Вспомогательная функция тега ссылки в ASP.NET Core
Автор: Рик Андерсон (Rick Anderson)
Вспомогательная функция тега ссылки создает ссылку на первичный или резервный файл CSS. Обычно первичный файл CSS находится в сети доставки содержимого (CDN).
Сеть CDN:
- Предоставляет несколько улучшений производительности по сравнению с размещением ресурса в веб-приложении.
- Не следует полагаться на эту сеть в качестве единственного источника ресурса. Сети CDN не всегда доступны, поэтому следует использовать надежный резервный вариант. Обычно таким вариантом является сайт, на котором размещается веб-приложение.
Вспомогательная функция тега ссылки позволяет указать CDN для файла CSS и резервную копию, если CDN недоступен. Вспомогательная функция тега ссылки обеспечивает высокую производительность CDN с надежностью локального размещения.
В следующей Razor разметке показан head
элемент файла макета, созданный с помощью шаблона веб-приложения 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>
Ниже приведен код 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>
В приведенном выше коде вспомогательный элемент тега link создал <meta name="x-stylesheet-fallback-test" content="" class="sr-only" />
элемент и следующий JavaScript, который используется для проверки доступности запрошенного bootstrap.css
файла в CDN. В этом случае файл CSS был доступен, поэтому вспомогательная функция тега создала элемент <link />
с файлом CSS CDN.
Часто используемые атрибуты вспомогательной функции тега ссылки
Все атрибуты, свойства и методы вспомогательной функции тега ссылки см. в разделе LinkTagHelper Class (Класс LinkTagHelper).
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.
Дополнительные ресурсы
ASP.NET Core