Добавление ресурсов в Remix с помощью тега link

Тег link — это способ добавления определенных ресурсов на вашу веб-страницу, наиболее известным из которых являются таблицы стилей.

Мы можем загрузить их в обычный HTML с помощью тега link, как показано ниже:

<link rel="stylesheet" href="assets/styles.css" />
Войти в полноэкранный режим Выйти из полноэкранного режима

Другой вариант использования — загрузить иконку сайта, например, favicon, с помощью этого элемента ссылки.

И последнее, но не менее важное: этим он не ограничивается. Его можно использовать для предварительной загрузки некоторых активов!

Да, API ссылок — это довольно мощный и больной инструмент.

Если вы следили за моими статьями о 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.

Оцените статью
Procodings.ru
Добавить комментарий