Пропустить до содержимого
Astro Astro

Вернёмся на сушу. Переводим ваш блог из дневного режима в ночной, без необходимости острова!

Теперь, когда вы можете создавать «острова» Astro для интерактивных элементов, не забудьте, что вы можете добиться многого, используя только обычный JavaScript и CSS!

Давайте создадим кликабельный иконку, которая позволит вашим пользователям переключаться между светлым и темным режимами, используя еще один тег <script> для интерактивности… и не отправляя браузеру никакого JavaScript от фреймворка.

Приготовьтесь к...

  • Создайте интерактивный переключатель темы, используя только JavaScript и CSS
  • Отправляйте браузеру как можно меньше JavaScript!

Добавьте и стилизуйте иконку переключения темы

  1. Создайте новый файл по адресу src/components/ThemeIcon.astro и вставьте в него следующий код:

    src/components/ThemeIcon.astro
    ---
    ---
    <button id="themeToggle">
      <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path class="sun" fill-rule="evenodd" d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
        <path class="moon" fill-rule="evenodd" d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
      </svg>
    </button>
    

    <style>
      #themeToggle {
        border: 0;
        background: none;
      }
      .sun { fill: black; }
      .moon { fill: transparent; }
    

    

      :global(.dark) .sun { fill: transparent; }
      :global(.dark) .moon { fill: white; }
    </style>

  2. Добавьте иконку в Header.astro, чтобы она отображалась на всех страницах. Не забудьте импортировать компонент.

    src/components/Header.astro
    ---
    import Hamburger from './Hamburger.astro';
    import Navigation from './Navigation.astro';
    import ThemeIcon from './ThemeIcon.astro';
    ---
    <header>
      <nav>
        <Hamburger />
        <ThemeIcon />
        <Navigation />
      </nav>
    </header>

  3. Посетите предварительный просмотр в браузере по адресу http://localhost:4321, чтобы увидеть иконку теперь на всех ваших страницах. Вы можете попробовать нажать на нее, но вы еще не написали скрипт, чтобы сделать ее интерактивной.

Добавьте стили CSS для темной темы

Выберите некоторые альтернативные цвета для использования в темном режиме.

  1. В global.css определите некоторые темные стили. Вы можете выбрать свои собственные или скопировать и вставить:

    src/styles/global.css
    html.dark {
      background-color: #0d0950;
      color: #fff;
    }
    

    .dark .nav-links a {
      color: #fff;
    }

Добавьте интерактивность на стороне клиента

Чтобы добавить интерактивность в компонент Astro, вы можете использовать тег <script>. Этот скрипт может проверять и устанавливать текущую тему из localStorage и переключать тему при клике по иконке.

  1. Добавьте следующий тег <script> в src/components/ThemeIcon.astro после вашего тега <style>:

    src/components/ThemeIcon.astro
    <style>
      .sun { fill: black; }
      .moon { fill: transparent; }
    

      :global(.dark) .sun { fill: transparent; }
      :global(.dark) .moon { fill: white; }
    </style>
    

    <script>
      const theme = (() => {
        if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
          return localStorage.getItem('theme');
        }
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
          return 'dark';
        }
          return 'light';
      })();
    

      if (theme === 'light') {
        document.documentElement.classList.remove('dark');
      } else {
        document.documentElement.classList.add('dark');
      }
    

      window.localStorage.setItem('theme', theme);
    

      const handleToggleClick = () => {
        const element = document.documentElement;
        element.classList.toggle("dark");
    

        const isDark = element.classList.contains("dark");
        localStorage.setItem("theme", isDark ? "dark" : "light");
      }
    

      document.getElementById("themeToggle").addEventListener("click", handleToggleClick);
    </script>

  2. Проверьте предварительный просмотр в браузере по адресу http://localhost:4321 и нажмите на иконку темы. Убедитесь, что вы можете переключаться между светлым и темным режимами.

Проверьте свои знания

Выберите, какое из следующих утверждений описывает теги Astro <script>, компоненты UI-фреймворка или оба варианта.

  1. Они позволяют включать интерактивные элементы UI на вашем сайте.

  2. Они создают статические элементы на вашем сайте, если вы не включаете client:, чтобы отправить их JavaScript клиенту и запустить в браузере.

  3. Они позволяют вам «попробовать» новый фреймворк, не требуя от вас начала совершенно нового проекта с использованием этого стека технологий.

  4. Они позволяют вам повторно использовать написанный вами код в других фреймворках, и вы часто можете просто вставить их прямо на свой сайт.

  5. Они позволяют вам добавлять интерактивность, не требуя знания или изучения других фреймворков JavaScript.

Чек-лист

Ресурсы