Pages

Kivo Theme Documentation

Skill level: Beginner to edit, light code to add a page made of sections

Every Page And Its File

The route file decides which sections a page shows. The content file holds the page’s title, SEO fields, page header, and named blocks. Paths below are for English; French uses the same files in french/, served under /fr/.

Page	URL	Route (`src/pages/[...lang]/`)	Content (`src/content/`)
Homepage	`/`	`index.astro`	`homepage/english/-index.md`
Demo homepages	`/home-api/`, `/home-ai/`, `/home-analytics/`	`home-*.astro`	`homepage/english/home-*.md`
Pricing	`/pricing/`	`pricing.astro`	`pricing/english/-index.md`
Features overview	`/services/`	`services/index.astro`	`services/english/-index.md`
Feature page	`/services/<entry>/`	`services/[single].astro`	`services/english/<entry>.mdx`
Solutions	`/solutions/`, `/solutions/<entry>/`	`solutions/`	`solutions/english/`
Integrations	`/integrations/`, `/integrations/<entry>/`	`integrations/`	`integrations/english/`
Customers	`/customers/`, `/customers/<entry>/`	`customers/`	`customers/english/`
Compare	`/compare/`, `/compare/<entry>/`	`compare/`	`compare/english/`
Changelog	`/changelog/`, entries, `/changelog/tag/<tag>/`, `/changelog/rss.xml`	`changelog/`	`changelog/english/`
Blog	`/blog/`, posts, `/blog/category/<name>/`, `/blog/tag/<name>/`, `/blog/rss.xml`	`blog/`	`blog/english/`, authors in `author/english/`
Docs landing	`/docs/`	`docs.astro`	`docs/english/-index.md`
FAQ	`/faq/`	`faq.astro`	`faq/english/-index.md`
About	`/about/`	`about.astro`	`about-us/english/-index.md`
Team	`/team/`, `/team/<member>/`	`team/`	`team/english/`
Careers	`/careers/`, `/careers/<role>/`	`careers/`	`careers/english/`
Testimonials	`/testimonials/`	`testimonials.astro`	`testimonials/english/-index.md`
Community	`/community/`	`community.astro`	`community/english/-index.md`
Security	`/security/`	`security.astro`	`security/english/-index.md`
System status	`/status/`	`status.astro`	`status/english/-index.md`
Contact sales	`/contact/`	`contact.astro`	`contact/english/-index.md`
Log in, sign up, reset	`/login/`, `/signup/`, `/forgot-password/`	`login.astro`, `signup.astro`, `forgot-password.astro`	`auth/english/login.md`, `signup.md`, `forgot-password.md`
Legal and text pages	`/privacy-policy/`, `/terms-conditions/`, `/cookie-policy/`	`[page].astro`	`pages/english/*.md`
Shortcode demo	`/components/`	`[page].astro`	`pages/english/components.mdx`
Layout gallery	`/elements/`	`elements.astro`	`pages/english/elements.md`
404	any missing URL	`404.astro`	`sections/english/not-found-section.md`

Each collection (blog, changelog, features, and the others) is explained in Collections.

Inner pages start with a page header: breadcrumb, title, description, and optional buttons. It is set by the pageHeader block in the page’s content file. The title comes from the page’s title.

title: "Platform"
pageHeader:
  breadcrumb: true
  eyebrow: "Platform"
  description: "Runtimes, databases, networking, and deploys in one place."
  primaryButton:
    enable: true
    label: "Start for free"
    url: "/signup/"
  secondaryButton:
    enable: true
    label: "Read the docs"
    url: "/docs/"
  options:
    layout: "split"   # default | intro | centered | split

badges adds proof badges, buttons adds more buttons, and in the split layout visual or image fills the right side. src/content/services/english/-index.md shows every field.

Fields Every Page Accepts

These frontmatter fields work on page and entry files. src/content/_file_format.md explains most of them; the full list is the page schema in src/content.config.ts.

Field	What it does
`title`, `description`	The page title and summary
`metaTitle`, `metaDescription`	Replace the title and description in search results only
`image`	Social preview image for this page
`draft`	`true` hides the page from the built site (it still shows in `npm run dev`)
`customSlug`	A different URL segment than the file name. Use the same value in every language
`canonical`, `robots`, `keywords`	SEO overrides
`excludeFromSitemap`, `excludeFromSearch`, `excludeFromAi`	Leave the page out of the sitemap, site search, or the AI files
`disableTagline`	Don’t add the site tagline to this page’s title
`headerLayout`, `footerLayout`	Another header or footer layout on this page

For policies, guides, or any page of text. Kivo renders every file in src/content/pages/ as a page, with a sticky table of contents when the page has several headings.

Copy src/content/pages/english/terms-conditions.md to a new file, for example src/content/pages/english/acceptable-use.md. The file name becomes the URL: /acceptable-use/.
Change title, description, and the Markdown body. Remove contentPage.notice, or change it to your own callout. numbered: true numbers the headings.
Create the French version in src/content/pages/french/ with the same file name.
Add a link to it in src/config/menu.en.json and menu.fr.json.

For landing pages that reuse Kivo’s sections.

Copy a route with a similar structure, for example src/pages/[...lang]/pricing.astro, to src/pages/[...lang]/platform-tour.astro. The file name becomes the URL: /platform-tour/.
Make it read its own content file. Change getEntryCTM("pricing", "-index", ...) to a collection with a schema, for example getEntryCTM("pages", "platform-tour", Astro.currentLocale), and create src/content/pages/english/platform-tour.md with title and the named blocks you need. Add "platform-tour" to the ownRoutes list in src/pages/[...lang]/[page].astro, so the text-page route doesn’t build it a second time.
Replace the sections inside <Base> with the ones you want, and pass each its block: <FeatureGridSection content={entry?.data?.featureGridSection} />.
Create the French content file and add the page to the menus.

An AI assistant can do this for you. The “Add a new page” recipe in SKILLS.md is shorter than these steps, so use the “Add a page made of existing sections” prompt in the Prompt Library, which includes all of them.

Remove A Page

Delete its route file in src/pages/[...lang]/ and its content (file or folder) in src/content/, in every language.
Remove its links from src/config/menu.en.json, menu.fr.json, and any content file that links to it (search the project for the URL).
Run npm run astro-check, then npm run build, to make sure nothing still points to it.

To hide a page without deleting it, set draft: true in its content file.