Тег link – это способ добавления определенных ресурсов на вашу веб-страницу, наиболее известным из которых являются таблицы стилей.
Мы можем загрузить их в обычный HTML с помощью тега link, как показано ниже:
<link rel="stylesheet" href="assets/styles.css" />
Другой вариант использования – загрузить иконку сайта, например, favicon, с помощью этого элемента ссылки.
И последнее, но не менее важное: этим он не ограничивается. Его можно использовать для предварительной загрузки некоторых активов!
Да, API ссылок – это довольно мощный и больной инструмент.
Использование элемента link в Remix
Если вы следили за моими статьями о Remix, вы использовали один из их фантастических стартеров, где файл root.tsx уже использует элемент links.
В Remix вы можете добавить ссылки в массив следующим образом:
import tailwindStylesheetUrl from './styles/tailwind.css';
export const links: LinksFunction = () => {
return [{ rel: 'stylesheet', href: tailwindStylesheetUrl }];
};
Этот LinksFunctions может быть вызван из каждого созданного вами файла маршрута, поэтому вы также можете внедрять очень специфические таблицы стилей на разных страницах.
Внутри нашего рендера мы просто должны ввести свойство, подобное этому:
export default function App() {
return (
<html>
<head>
...
<Links />
</head>
...
);
}
Если вы импортируете это свойство в корень, вам не придется специально импортировать его на другие страницы.
Использование специфических таблиц стилей в других местах
На другой отдельной странице есть некоторые диаграммы, для которых нужна таблица стилей CSS.
Такой страницей может быть, например, about.tsx. Если мы откроем ее, мы можем добавить туда функцию ссылок, как показано ниже:
import chartStyles from '../styles/charts.css';
export const links: LinksFunction = () => {
return [
{
rel: 'stylesheet',
href: chartStyles,
},
];
};
И теперь, если мы откроем страницу about, мы увидим нашу оригинальную таблицу стилей tailwind и вставленную таблицу стилей chart.
Типы ссылок
Как уже упоминалось, у нас есть возможность добавить довольно много различных типов ссылок.
Давайте рассмотрим некоторые примеры.
Ссылки на фавикон
Во-первых, фавикон. Иконка, используемая в вашем веб-браузере.
export const links: LinksFunction = () => {
return [
{
rel: 'icon',
href: '/favicon.png',
type: 'image/png',
},
];
};
Локальные ссылки
Далее мы уже видели, что можно добавить локальную таблицу стилей. Важно отметить, что мы используем импорт.
Этот импорт важно отметить, так как он гарантирует, что Remix сделает отпечаток этого файла для производственного кэширования. (Делает его уникальным URL)
import chartStyles from '../styles/charts.css';
export const links: LinksFunction = () => {
return [
{
rel: 'stylesheet',
href: chartStyles,
},
];
};
Внешние ссылки
Мы также можем загружать внешние ссылки, просто передавая полный URL в свойство href.
export const links: LinksFunction = () => {
return [
{
rel: 'stylesheet',
href: 'https://example.com/some/styles.css',
crossOrigin: 'true',
},
];
};
Предварительная выборка изображений
Как уже говорилось, API ссылок очень мощный, и его можно использовать, например, для предварительной выборки изображений.
export const links: LinksFunction = () => {
return [
{
rel: 'prefetch',
as: 'image',
href: '/img/bunny.jpg',
},
];
};
Условная предварительная выборка
Самое интересное в предварительной выборке то, что вы можете указать медиа-запросы для этой предварительной выборки.
Допустим, мы хотим получить это изображение только на больших экранах.
export const links: LinksFunction = () => {
return [
{
rel: 'prefetch',
as: 'image',
href: '/img/bunny.jpg',
media: '(min-width: 1000px)',
},
];
};
Условное добавление таблиц стилей
Мы также можем использовать вышеописанную медиатехнику для добавления таблиц стилей только по определенным запросам:
export const links: LinksFunction = () => {
return [
{
rel: 'stylesheet',
href: printStyles,
media: 'print',
},
{
rel: 'stylesheet',
href: highResStyles,
media: 'screen and (min-resolution: 300dpi)',
},
];
};
Вот и все. Элемент links в Remix очень мощный, так как он построен на базе встроенного API links.
Мне нравится, что Remix берет на вооружение столь многообещающую идею использования того, что уже есть, и расширяет возможности браузера.
Спасибо, что прочитали, и давайте общаться!
Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и общаться на Facebook или Twitter.