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

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

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

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

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

Создайте компонент <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>
  2. Снова проверьте предварительный просмотр в браузере на различных размерах экрана и убедитесь, что у вас есть работающее меню навигации, которое реагирует как на размер экрана, так и на действия пользователя на этой странице.

Вместо того чтобы писать 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