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

Добавьте динамический контент о себе

Теперь, когда у вас есть многостраничный сайт с 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>

  1. Добавьте следующую строку JavaScript в метаданные, между разделителями кода:

    ---
const pageTitle = "Обо мне";
---

  2. Замените статический заголовок "Astro" и заголовок "About Me" в вашем HTML динамической переменной {pageTitle}.

    <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>

  3. Обновите предварительный просмотр страницы /about.

    Текст страницы должен выглядеть так же, а заголовок страницы, отображаемый на вкладке браузера, теперь должен гласить «Обо мне» вместо «Astro».

    Вместо того чтобы вводить текст непосредственно в HTML-теги, вы просто определили и затем использовали переменную в двух разделах вашего файла .astro соответственно.

  4. Используйте тот же шаблон для создания значения pageTitle, которое будет использоваться в index.astro ("Главная") и blog.astro ("Мой блог об изучении Astro"). Обновите HTML этих страниц в обоих местах, чтобы название страницы совпадало с заголовком, отображаемым на каждой странице.

:::note[Выводы]

  1. Определяйте переменные в своем скрипте Astro с помощью выражений JavaScript или TypeScript.
  2. Используйте эти переменные в вашем шаблоне Astro внутри фигурных скобок { }, чтобы сообщить Astro, что вы используете JavaScript.:::

Запись выражений JavaScript в Astro

  1. Добавьте следующий JavaScript в метаданные, между разделителями кода:

    (Вы можете настроить код под себя, но в данном руководстве будет использован следующий пример).

    ---
const pageTitle = "Обо мне";

const identity = {
  firstName: "Сара",
  country: "Канада",
  occupation: "Технический писатель",
  hobbies: ["фотография", "наблюдение за птицами", "бейсбол"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Написание документации"];
---

  2. Затем добавьте следующий код в ваш HTML-шаблон, под существующим контентом:

    <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>

:::note[Выводы]

  1. Написание шаблона Astro очень похоже на написание HTML, но вы можете включать в него выражения JavaScript.
  2. Блок метаданных Astro содержит только JavaScript.
  3. Вы можете использовать все современные логические операторы, выражения и функции JavaScript в любой секции вашего .astro-файла. Но фигурные скобки необходимы (только) в теле шаблона HTML.:::

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

  1. Метаданные файла .astro пишутся на:

  2. В дополнение к HTML синтаксис Astro позволяет включать:

  3. Когда нужно писать JavaScript в фигурных скобках?

Рендеринг элементов по условию

Вы также можете использовать свои скрипты, чтобы выбирать нужно ли отрисовывать отдельные элементы содержимого HTML-тега <body>.

  1. Добавьте следующие строки в ваш блок метаданных, чтобы определить переменные:

    ---
const pageTitle = "Обо мне";

const identity = {
  firstName: "Сара",
  country: "Канада",
  occupation: "Технический писатель",
  hobbies: ["фотография", "наблюдение за птицами", "бейсбол"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Написание документации"];

const happy = true;
const finished = false;
const goal = 3;
---

  2. Добавьте следующие строки под существующими параграфами.

    Затем проверьте предварительный просмотр во вкладке браузера, чтобы увидеть, что отображается на странице:

    {happy && <p>Я рад(а) изучать Astro!</p>}

{finished && <p>Я завершил(а) это руководство!</p>}

{goal === 3 ? <p>Моя цель — завершить за 3 дня.</p> : <p>Моя цель — не 3 дня.</p>}

  3. Зафиксируйте изменения на GitHub, прежде чем двигаться дальше. Делайте это всякий раз, когда хотите сохранить свою работу и обновить сайт.

:::tipСинтаксис шаблонов Astro похож на синтаксис JSX. Если вам когда-либо потребуется узнать, как использовать свой скрипт в HTML, поиск информации о том, как это делается в JSX, вероятно, будет хорошей отправной точкой!:::

Проанализируйте шаблон

Предположим, дан следующий скрипт .astro:

---
const operatingSystem = "Linux";
const quantity = 3;
const footwear = "ботинок";
const student = false;
---

Для каждого выражения шаблона Astro, можете ли вы предсказать HTML (если таковой имеется!), который будет отправлен в браузер? Нажмите, чтобы узнать, правы ли вы!

  1. <p>{operatingSystem}</p>

  2. {student && <p>Я до сих пор учусь в школе</p>}

  3. <p>У меня есть {quantity + 8} пар {footwear}</p>

  4. {operatingSystem === "MacOS" ? <p>Я использую Mac.</p> : <p>Я не использую Mac.</p>}

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

Ресурсы

Внести свой вклад Сообщество Поддержать