Skip to content

1.mdx

Latest commit

 

History

History
158 lines (118 loc) · 4.68 KB

1.mdx

File metadata and controls

158 lines (118 loc) · 4.68 KB
Raw
type tutorial
title Make a reusable Navigation component
description Tutorial: Build your first Astro blog — Replace elements repeated on multiple pages with a reusable component
i18nReady true

import Box from '/components/tutorial/Box.astro'; import Checklist from '/components/Checklist.astro'; import MultipleChoice from '/components/tutorial/MultipleChoice.astro'; import Option from '/components/tutorial/Option.astro'; import PreCheck from '/components/tutorial/PreCheck.astro'; import { Steps } from '@astrojs/starlight/components'; import Badge from "/components/Badge.astro"

Now that you have the same HTML written in multiple pages of your Astro site, it's time to replace that duplicated content with a reusable Astro component!

- Create a new folder for components - Build an Astro component to display your navigation links - Replace existing HTML with a new, reusable navigation component

Create a new src/components/ folder

To hold .astro files that will generate HTML but that will not become new pages on your website, you will need a new folder in your project: src/components/.

Create a Navigation component

1. Create a new file: `src/components/Navigation.astro`.

  1. Copy your links to navigate between pages from the top of any page and paste them into your new file, Navigation.astro:

    ---
---
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>

    :::tip If there is nothing in the frontmatter of your .astro file, you don't have to write the code fences. You can always add them back in when you need them. :::

Import and use Navigation.astro

1. Go back to `index.astro` and import your new component inside the code fence: 
```astro title="src/pages/index.astro" ins={2}
---
import Navigation from '../components/Navigation.astro';
import "../styles/global.css";

const pageTitle = "Home Page";
---
```

  1. Then below, replace the existing navigation HTML link elements with the new navigation component you just imported:

    <a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<Navigation />

  2. Check the preview in your browser and notice that it should look exactly the same... and that's what you want!

Your site contains the same HTML as it did before. But now, those three lines of code are provided by your <Navigation /> component.

Try it yourself - Add navigation to the rest of your site

Import and use the <Navigation /> component in the other two pages on your site (about.astro and blog.astro) using the same method.

Don't forget to

  • Add an import statement at the top of the component script, inside the code fence.
  • Replace the existing code with the navigation component.

:::note When you restructure your code but do not change the way your page looks in the browser, you are refactoring. You will refactor several times in this unit as you replace parts of your page HTML with components.

This allows you to get started quickly with any working code, often duplicated throughout your project. Then, you can improve your existing code's design incrementally without changing the outward appearance of your site. :::

Test your knowledge

  1. You can do this when you have elements repeated on multiple pages:

    restart the dev server refactor to use a reusable component make a new page

  2. Astro components are:

    reusable fragments of HTML both of the above!

  3. Astro components will automatically create a new page on your site when you...

    include `` refactor put the `.astro` file within `src/pages/`

Checklist

- [ ] I can refactor content into reusable components. - [ ] I can add a new component to an `.astro` page.

Resources