Перейти к содержимому

Отправьте свой первый скрипт в браузер

Давайте добавим гамбургер-меню для открытия и закрытия ссылок на мобильных экранах, что потребует некоторой интерактивности на стороне клиента!

Приготовьтесь…

  • Создать компонент гамбургер-меню
  • Написать <script>, чтобы позволить посетителям вашего сайта открывать и закрывать меню навигации
  • Переместить ваш JavaScript в файл .js

Создание компонента Hamburger

Заголовок раздела Создание компонента Hamburger

Создайте компонент <Hamburger />, чтобы открывать и закрывать ваше мобильное меню.

  1. Создайте файл с именем Hamburger.astro в src/components/.

  2. Скопируйте следующий код в ваш компонент. Он будет представлять собой 3-строчное меню «гамбургер» для открытия и закрытия навигационных ссылок на мобильных устройствах. (Вы добавите новые CSS-стили в global.css позже).

    src/components/Hamburger.astro
    ---
    ---
    <div class="hamburger">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
    </div>

  3. Поместите этот новый компонент <Hamburger /> непосредственно перед компонентом <Navigation /> в файле Header.astro.

    Покажите мне код!
    src/components/Header.astro
    ---
    import Hamburger from './Hamburger.astro';
    import Navigation from './Navigation.astro';
    ---
    <header>
      <nav>
        <Hamburger />
        <Navigation />
      </nav>
    </header>

  4. Добавьте следующие стили для компонента Hamburger:

    src/styles/global.css
    /* стили для навигации */
    .hamburger {
      padding-right: 20px;
      cursor: pointer;
    }
    

    .hamburger .line {
      display: block;
      width: 40px;
      height: 5px;
      margin-bottom: 10px;
      background-color: #ff9776;
    }
    

    .nav-links {
      width: 100%;
      top: 5rem;
      left: 48px;
      background-color: #ff9776;
      display: none;
      margin: 0;
    }
    

    .nav-links a {
      display: block;
      text-align: center;
      padding: 10px 0;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      text-transform: uppercase;
    }
    

    .nav-links a:hover, a:focus {
      background-color: #ff9776;
    }
    

    .expanded {
      display: unset;
    }
    

    @media screen and (min-width: 636px) {
      .nav-links {
        margin-left: 5em;
        display: block;
        position: static;
        width: auto;
        background: none;
      }
    

      .nav-links a {
        display: inline-block;
        padding: 15px 20px;
      }
    

      .hamburger {
        display: none;
      }
    }

Напишите ваш первый тег скрипта

Заголовок раздела Напишите ваш первый тег скрипта

Ваш заголовок ещё не интерактивен, потому что он не может реагировать на ввод пользователя, например, на нажатие на гамбургер-меню, чтобы показать или скрыть навигационные ссылки.

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

  1. Добавьте следующий тег <script> в index.astro, непосредственно перед закрывающим тегом </body>.

    src/pages/index.astro
      <Footer />
      <script>
        document.querySelector('.hamburger').addEventListener('click', () => {
          document.querySelector('.nav-links').classList.toggle('expanded');
        });
      </script>
    </body>
    ">

  • Снова проверьте предварительный просмотр в браузере на различных размерах экрана и убедитесь, что у вас есть работающее меню навигации, которое реагирует как на размер экрана, так и на действия пользователя на этой странице.

    • Импортируйте файл .js

    Заголовок раздела Импортируйте файл .js

    Вместо того чтобы писать JavaScript непосредственно на каждой странице, вы можете перенести содержимое тега <script> в собственный файл .js в вашем проекте.

    1. Создайте файл src/scripts/menu.js (вам придется создать новую папку /scripts/`) и перенесите в него ваш JavaScript.

      src/scripts/menu.js
      document.querySelector('.hamburger').addEventListener('click', () => {
        document.querySelector('.nav-links').classList.toggle('expanded');
      });

    2. Замените содержимое тега <script> в файле index.astro на следующий импорт файла:

      src/pages/index.astro
        <Footer />
        <script>
          document.querySelector('.hamburger').addEventListener('click', () => {
            document.querySelector('.nav-links').classList.toggle('expanded');
          });
      

          import "../scripts/menu.js";
        </script>
      </body>
      ">

  • Проверьте предварительный просмотр в браузере снова на меньших размерах и убедитесь, что меню гамбургера по-прежнему открывает и закрывает ваши навигационные ссылки.

  • Добавьте тот же <script> с импортом на две другие страницы, about.astro и blog.astro, и убедитесь, что на каждой из них есть отзывчивая интерактивная шапка.

    src/pages/about.astro & src/pages/blog.astro
      <Footer />
      <script>
        import "../scripts/menu.js";
      </script>
    </body>
    ">

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

    Заголовок раздела Проверьте свои знания

    1. Когда Astro выполняет JavaScript, написанный в метаданных компонента?

    2. Дополнительно, Astro может отправить JavaScript в браузер, чтобы разрешить:

    3. JavaScript на стороне клиента будет отправлен в браузер пользователя, когда он будет написан или импортирован:

    Контрольный список

    Заголовок раздела Контрольный список

    Ресурсы

    Заголовок раздела Ресурсы

    Клиентские скрипты Astro

    Внести свой вклад Сообщество Sponsor
    OSZAR »