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

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

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

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

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

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

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

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

Откройте файл about.astro, который должен выглядеть следующим образом:

src/pages/about.astro
---
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">Home</a>
    <a href="/about/">About</a>
    <a href="/blog/">Blog</a>
    <h1>About Me</h1>
    <h2>... and my new Astro site!</h2>


    <p>I am working through Astro's introductory tutorial. This is the second page on my website, and it's the first one I built myself!</p>


    <p>This site will update as I complete more of the tutorial, so keep checking back and see how my journey is going!</p>
  </body>
</html>

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

    src/pages/about.astro
    ---
    const pageTitle = "About Me";
    ---

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

    src/pages/about.astro
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
        <title>{pageTitle}</title>
      </head>
      <body>
        <a href="/">Home</a>
        <a href="/about/">About</a>
        <a href="/blog/">Blog</a>
        <h1>About Me</h1>
        <h1>{pageTitle}</h1>
        <h2>... and my new Astro site!</h2>
    

        <p>I am working through Astro's introductory tutorial. This is the second page on my website, and it's the first one I built myself!</p>
    

        <p>This site will update as I complete more of the tutorial, so keep checking back and see how my journey is going!</p>
      </body>
    </html>

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

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

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

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

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

Заголовок раздела Запись выражений JavaScript в Astro

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

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

    src/pages/about.astro
    ---
    const pageTitle = "About Me";
    

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Technical Writer",
      hobbies: ["photography", "birdwatching", "baseball"],
    };
    

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
    ---

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

    src/pages/about.astro
    <p>Here are a few facts about me:</p>
    <ul>
      <li>My name is {identity.firstName}.</li>
      <li>I live in {identity.country} and I work as a {identity.occupation}.</li>
      {identity.hobbies.length >= 2 &&
        <li>Two of my hobbies are: {identity.hobbies[0]} and {identity.hobbies[1]}</li>
      }
    </ul>
    <p>My skills are:</p>
    <ul>
      {skills.map((skill) => <li>{skill}</li>)}
    </ul>

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

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

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

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

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

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

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

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

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

    src/pages/about.astro
    ---
    const pageTitle = "About Me";
    

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Technical Writer",
      hobbies: ["photography", "birdwatching", "baseball"],
    };
    

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
    

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

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

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

    src/pages/about.astro
    {happy && <p>I am happy to be learning Astro!</p>}
    

    {finished && <p>I finished this tutorial!</p>}
    

    {goal === 3 ? <p>My goal is to finish in 3 days.</p> : <p>My goal is not 3 days.</p>}

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

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

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

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

src/pages/about.astro
---
const operatingSystem = "Linux";
const quantity = 3;
const footwear = "boots";
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>}

Чек-лист

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

Ресурсы

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