Working with Layouts
Explore how to create a Layout component in Astro to share styles and structure across multiple pages. Learn to configure import aliases in tsconfig.json for cleaner imports. Develop navigation and footer elements within the layout using slots, improving maintainability and consistency in your Astro static site.
We'll cover the following...
We'll cover the following...
When working with multiple pages, it’s common practice to create a Layout component to share styles and structure across different pages. In this lesson, we’ll take a look at how to achieve this with a component.
Using import aliases
In the following code widget, notice that we already have the home and contact pages created. However, instead of static HTML, we have a Layout component with some content inside ...
/// <reference path="../.astro/types.d.ts" /> /// <reference types="astro/client" />
Astro project structure
...