Add dynamic content about you

هذا المحتوى غير متوفر بلغتك بعد.

Now that you have a multi-page website with HTML content, it’s time to add some dynamic HTML!

استعد لـ…

Define your page title in frontmatter, and use it in your HTML
Conditionally display HTML elements
Add some content about you

Any HTML file is valid Astro language. But, you can do more with Astro than just regular HTML!

Define and use a variable

Open about.astro, which should look like this:

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

Add the following line of JavaScript in the frontmatter script, between the code fences:
src/pages/about.astro
```
---
const pageTitle = "About Me";
---
```

Replace both the static “Astro” title and “About Me” heading in your HTML with the dynamic variable {pageTitle}.

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

Refresh the live preview of your /about page.

Your page text should look the same, and your page title displayed in your browser tab should now read “About Me” instead of “Astro.”

Instead of typing text directly into HTML tags, you just defined and then used a variable in the two sections of your .astro file, respectively.

Use the same pattern to create a pageTitle value to use in index.astro (“Home Page”) and blog.astro (“My Astro Learning Blog”). Update the HTML of these pages in both places so that your page title matches the heading displayed on each page.

Write JavaScript expressions in Astro

Add the following JavaScript to your frontmatter, between the code fences:

(You can customize the code for yourself, but this tutorial will use the following example.)

---
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"];
---

Then, add the following code to your HTML template, below your existing content:

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

Test your knowledge

A .astro file’s frontmatter is written in:
1. HTML
2. YAML
3. JavaScript
In addition to HTML, Astro syntax allows you to include:
1. JavaScript logical operators, expressions and functions
2. YAML
3. Markdown
When do you need to write your JavaScript inside curly braces?
1. When you’re not sure whether it’s correct.
2. When inside the HTML template section of an Astro component.
3. Between the code fences in an Astro component.

Conditionally render elements

You can also use your script variables to choose whether or not to render individual elements of your HTML <body> content.

Add the following lines to your frontmatter script to define variables:

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

Add the following lines below your existing paragraphs.

Then, check the live preview in your browser tab to see what is displayed on the page:

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

Commit your changes to GitHub before moving on. Do this any time you want to save your work and update your live website.

Analyze the Pattern

Given the following .astro script:

---
const operatingSystem = "Linux";
const quantity = 3;
const footwear = "boots";
const student = false;
---

For each Astro template expression, can you predict the HTML (if any!) that will be sent to the browser? Click to reveal if you’re right!

{operatingSystem}

Linux
{student && I am still in school.}

Nothing will display because student evaluates to false.
I have {quantity + 8} pairs of {footwear}

I have 11 pairs of boots
{operatingSystem === "MacOS" ? I am using a Mac. : I am not using a Mac.}

I am not using a Mac.

Checklist

I can define values in and use values in .astro files.
I can conditionally render HTML elements.

Resources

Dynamic expressions in Astro

ساهم المجتمع Sponsor