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

Добавление динамического контента о себе

Теперь, когда у вас есть многостраничный сайт с HTML-контентом, давайте добавим немного динамического HTML!

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

  • Определить заголовок вашей страницы в Frontmatter и использовать его в вашем HTML.
  • Условно отобразить HTML-элементы.
  • Добавить немного контента обо мне.

Любой HTML-файл допустим на языке Astro. Но вы можете делать больше, чем просто HTML с Astro!

Определите и использовать переменную

Заголовок раздела Определите и использовать переменную

Откройте about.astro, который должен выглядеть так:

src/pages/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 в скрипт frontmatter, между разделителями кода (---):

    src/pages/about.astro
    ---
    const pageTitle = "Обо мне";
    ---

  2. Замените статический заголовок «Astro» и заголовок «Обо мне» на вашем 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>

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

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

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

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

Напишите выражения JavaScript в Astro

Заголовок раздела Напишите выражения JavaScript в Astro

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

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

    src/pages/about.astro
    ---
    const pageTitle = "Обо мне";
    

    const identity = {
      firstName: "Николай",
      country: "Нидерланды",
      occupation: "Технический автор",
      hobbies: ["фотография", "дизайн", "тенис"],
    };
    

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Оптимизация SEO"];
    ---

  2. Затем добавьте следующий код в ваш 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>

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

Заголовок раздела Проверьте свои знания

  1. Frontmatter файла .astro написан на:

  2. Кроме HTML, синтаксис Astro позволяет включать:

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

Условный рендер элементов

Заголовок раздела Условный рендер элементов

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

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

    src/pages/about.astro
    ---
    const pageTitle = "Обо мне";
    

    const identity = {
      firstName: "Николай",
      country: "Нидерланды",
      occupation: "Технический автор",
      hobbies: ["фотография", "дизайн", "тенис"],
    };
    

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Оптимизация SEO"];
    

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

  2. Добавьте следующие строки ниже ваших существующих абзацев

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

    src/pages/about.astro
    {happy && <p>Я рад изучать Astro!</p>}
    

    {finished && <p>Я закончил этот урок!</p>}
    

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

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

Анализ шаблона

Заголовок раздела Анализ шаблона

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

src/pages/about.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>}

Чек-лист

Заголовок раздела Чек-лист

Ресурсы

Заголовок раздела Ресурсы