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

Отправка первого скрипта в браузер

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

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

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

Создание компонента «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>
  1. Добавьте следующие стили для вашего компонента Hamburger:
src/styles/global.css
/* nav styles */
.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>

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

Импорт .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>

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

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

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

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

  1. Когда Astro запускает любой JavaScript, написанный в frontmatter компонента?

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

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

Чек-лист

Ресурсы

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