Open danielrosehill opened 1 month ago
Hey! To add a new page you would need to create a new layout for your page in the layout
folder. As an example if you want to add a notes
page, you would create a file NotesLayout.astro
in the layouts
folder.
---
import { SITE } from "@config";
import Breadcrumbs from "@components/Breadcrumbs.astro";
import Footer from "@components/Footer.astro";
import Header from "@components/Header.astro";
import Layout from "./Layout.astro";
export interface Props {
frontmatter: {
title: string;
description?: string;
};
}
const { frontmatter } = Astro.props;
---
<Layout title={`${frontmatter.title} | ${SITE.title}`}>
<Header activeNav="notes" />
<Breadcrumbs />
<main id="main-content">
<section id="notes" class="prose mb-28 max-w-3xl prose-img:border-0">
<h1 class="text-2xl tracking-wider sm:text-3xl">{frontmatter.title}</h1>
<slot />
</section>
</main>
<Footer />
</Layout>
Then, you will create a notes.md
page in the page
folder with the frontmatter.
---
layout: ../layouts/NotesLayout.astro
title: "Notes"
---
Then, you need to add your page to the header in Header.astro
export config.
Eg:
export interface Props { activeNav?: "posts" | "tags" | "about" | "notes"| "search"; }
Finally, you add a link to the header in the same file.
<li>
<a href="/notes/" class={activeNav === "notes" ? "active" : ""}>
Notes
</a>
</li>
Hey!
Is there any chance there could be some documentation on how to add additional menus into the header menu for fellow Astro newbies?
Creating the extra page is easy but I didn't have luck hand-coding the addition in the theme config.
Many thanks if you can find the time. Beautiful theme!