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

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

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

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

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

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