Hugo

Edit Pages

Locate and edit Hugo page layouts, navbar, footer, and sections.

Finding a page

To locate a page’s components, open the page layout file under themes/nextsaas/layouts/**/list.html. Data is usually in content/**/_index.md. For homepage it will be themes/nextsaas/layouts/index.html and content/_index.md.
Single page data is available on content/**/markdown.md and page layout is themes/nextsaas/layouts/**/single.html.

Customize navbar

Open a page layout file. Example: homepage themes/nextsaas/layouts/index.html.
Update the header partial:

{{ partial "shared/header-one.html"
   ( dict
   "class" "border border-stroke-2 dark:border-stroke-6 bg-accent dark:bg-background-9"
   "btnClass" "btn-primary hover:btn-white-dark dark:hover:btn-white"
   )
}}

You can change the header version to shared/header-two.html:

{{ partial "shared/header-two.html"
   ( dict
   "class" "bg-accent/10 dark:bg-background-7/40 backdrop-blur-[25px] max-md:!top-8"
   "btnClass" "btn-green hover:btn-white dark:hover:btn-white-dark"
   )
}}

Customize footer

Open a page layout file. Example: homepage themes/nextsaas/layouts/index.html.
Update footer partial:

{{ partial "shared/footer-one.html" . }}

Or switch footer version:

{{ partial "shared/footer-two.html" }}

Customize sections

Sections are added from themes/nextsaas/layouts/partials/**. Edit partials to update sections:

<main>
  {{ partial "pages/home-page-01/hero.html" .}}
  {{ partial "pages/home-page-01/about.html" .}}
</main>

title: Edit Pages description: Locate layouts, data files, and customize navbar/footer/sections. navigation: icon: i-lucide-layout-template order: 4 seo: title: Finding a Page (Hugo) description: Where to find Hugo page layouts and their content sources.

Finding a page

To locate a page’s components, open the relevant layout file under themes/nextsaas/layouts/**/list.html. Data is usually in content/**/_index.md.
For homepage: themes/nextsaas/layouts/index.html and content/_index.md.
Single page data is typically in content/**/markdown.md and the page layout is themes/nextsaas/layouts/**/single.html.

Customize navbar

Open a page layout file. For example, homepage: themes/nextsaas/layouts/index.html.
Update the header partial:

{{ partial "shared/header-one.html"
   ( dict
   "class" "border border-stroke-2 dark:border-stroke-6 bg-accent dark:bg-background-9"
   "btnClass" "btn-primary hover:btn-white-dark dark:hover:btn-white"
   )
}}

You can switch header version to shared/header-two.html:

{{ partial "shared/header-two.html"
   ( dict
   "class" "bg-accent/10 dark:bg-background-7/40 backdrop-blur-[25px] max-md:!top-8"
   "btnClass" "btn-green hover:btn-white dark:hover:btn-white-dark"
   )
}}

Customize footer

Open a page layout file (example homepage: themes/nextsaas/layouts/index.html).
Update footer partial:

{{ partial "shared/footer-one.html" . }}

Or switch footer version:

{{ partial "shared/footer-two.html"  }}

Customize sections

Sections are added from themes/nextsaas/layouts/partials/**. Edit partials to update sections in a page.

<main>
  {{ partial "pages/home-page-01/hero.html" .}}
  {{ partial "pages/home-page-01/about.html" .}}
</main>

Create New Page

Create new Hugo pages and layouts (list/single) using partials.

Edit Contents

Update Hugo page content from content/ and shared data from data/.