Добавьте динамический контент о себе
Теперь, когда у вас есть многостраничный сайт с HTML-контентом, пришло время добавить немного динамического HTML!
Приготовьтесь…
- Определить заголовок вашей страницы в метаданных и использовать его в HTML
- Условно отобразить HTML-элементы
- Добавить немного контента о себе
Любой HTML-файл является допустимым языком Astro. Но с помощью Astro вы можете сделать больше, чем просто обычный HTML!
Определите и используйте переменную
Заголовок раздела Определите и используйте переменнуюОткройте файл about.astro
, который должен выглядеть следующим образом:
------<html lang="ru"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Astro</title> </head> <body> <a href="/">Главная</a> <a href="/about/">О сайте</a> <a href="/blog/">Блог</a> <h1>Обо мне</h1> <h2>... и моем новом сайте на Astro!</h2>
<p>Я прохожу вводный учебник по Astro. Это вторая страница моего сайта, и это первая страница, которую я создал самостоятельно!</p>
<p>Сайт будет обновляться по мере прохождения учебника, так что заходите сюда снова и следите за моим прогрессом!</p> </body></html>
-
Добавьте следующую строку JavaScript в метаданные, между разделителями кода:
src/pages/about.astro ---const pageTitle = "Обо мне";--- -
Замените статический заголовок “Astro” и заголовок “About Me” в вашем HTML динамической переменной
{pageTitle}
.src/pages/about.astro <html lang="ru"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width" /><title>Astro</title><title>{pageTitle}</title></head><body><a href="/">Главная</a><a href="/about/">О сайте</a><a href="/blog/">Блог</a><h1>Обо мне</h1><h1>{pageTitle}</h1><h2>... и моем новом сайте на Astro!</h2><p>Я прохожу вводный учебник по Astro. Это вторая страница моего сайта, и это первая страница, которую я создал самостоятельно!</p><p>Сайт будет обновляться по мере прохождения учебника, так что заходите сюда снова и следите за моим прогрессом!</p></body></html> -
Обновите предварительный просмотр страницы
/about
.Текст страницы должен выглядеть так же, а заголовок страницы, отображаемый на вкладке браузера, теперь должен гласить «Обо мне» вместо «Astro».
Вместо того чтобы вводить текст непосредственно в HTML-теги, вы просто определили и затем использовали переменную в двух разделах вашего файла
.astro
соответственно. -
Используйте тот же шаблон для создания значения
pageTitle
, которое будет использоваться вindex.astro
(“Главная”) иblog.astro
(“Мой блог об изучении Astro”). Обновите HTML этих страниц в обоих местах, чтобы название страницы совпадало с заголовком, отображаемым на каждой странице.
- Определяйте переменные в своем скрипте Astro с помощью выражений JavaScript или TypeScript.
- Используйте эти переменные в вашем шаблоне Astro внутри фигурных скобок
{ }
, чтобы сообщить Astro, что вы используете JavaScript.
Запись выражений JavaScript в Astro
Заголовок раздела Запись выражений JavaScript в Astro-
Добавьте следующий JavaScript в метаданные, между разделителями кода:
(Вы можете настроить код под себя, но в данном руководстве будет использован следующий пример).
src/pages/about.astro ---const pageTitle = "Обо мне";const identity = {firstName: "Сара",country: "Канада",occupation: "Технический писатель",hobbies: ["фотография", "наблюдение за птицами", "бейсбол"],};const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Написание документации"];--- -
Затем добавьте следующий код в ваш HTML-шаблон, под существующим контентом:
src/pages/about.astro <p>Несколько фактов обо мне:</p><ul><li>Меня зовут {identity.firstName}.</li><li>Моя страна — {identity.country}, а род занятий — {identity.occupation}.</li>{identity.hobbies.length >= 2 &&<li>Два моих увлечения: {identity.hobbies[0]} и {identity.hobbies[1]}</li>}</ul><p>Мои навыки:</p><ul>{skills.map((skill) => <li>{skill}</li>)}</ul>
- Написание шаблона Astro очень похоже на написание HTML, но вы можете включать в него выражения JavaScript.
- Блок метаданных Astro содержит только JavaScript.
- Вы можете использовать все современные логические операторы, выражения и функции JavaScript в любой секции вашего
.astro
-файла. Но фигурные скобки необходимы (только) в теле шаблона HTML.
Проверьте свои знания
Заголовок раздела Проверьте свои знания-
Метаданные файла
.astro
пишутся на: -
В дополнение к HTML синтаксис Astro позволяет включать:
-
Когда нужно писать JavaScript в фигурных скобках?
Рендеринг элементов по условию
Заголовок раздела Рендеринг элементов по условиюВы также можете использовать свои скрипты, чтобы выбирать нужно ли отрисовывать отдельные элементы содержимого HTML-тега <body>
.
-
Добавьте следующие строки в ваш блок метаданных, чтобы определить переменные:
src/pages/about.astro ---const pageTitle = "Обо мне";const identity = {firstName: "Сара",country: "Канада",occupation: "Технический писатель",hobbies: ["фотография", "наблюдение за птицами", "бейсбол"],};const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Написание документации"];const happy = true;const finished = false;const goal = 3;--- -
Добавьте следующие строки под существующими параграфами.
Затем проверьте предварительный просмотр во вкладке браузера, чтобы увидеть, что отображается на странице:
src/pages/about.astro {happy && <p>Я рад(а) изучать Astro!</p>}{finished && <p>Я завершил(а) это руководство!</p>}{goal === 3 ? <p>Моя цель — завершить за 3 дня.</p> : <p>Моя цель — не 3 дня.</p>} -
Зафиксируйте изменения на GitHub, прежде чем двигаться дальше. Делайте это всякий раз, когда хотите сохранить свою работу и обновить сайт.
Синтаксис шаблонов Astro похож на синтаксис JSX. Если вам когда-либо потребуется узнать, как использовать свой скрипт в HTML, поиск информации о том, как это делается в JSX, вероятно, будет хорошей отправной точкой!
Проанализируйте шаблон
Заголовок раздела Проанализируйте шаблонПредположим, дан следующий скрипт .astro
:
---const operatingSystem = "Linux";const quantity = 3;const footwear = "ботинок";const student = false;---
Для каждого выражения шаблона Astro, можете ли вы предсказать HTML (если таковой имеется!), который будет отправлен в браузер? Нажмите, чтобы узнать, правы ли вы!
-
<p>{operatingSystem}</p>
-
{student && <p>Я до сих пор учусь в школе</p>}
-
<p>У меня есть {quantity + 8} пар {footwear}</p>
-
{operatingSystem === "MacOS" ? <p>Я использую Mac.</p> : <p>Я не использую Mac.</p>}