Skip to content

Layouts

Customizing the page layout in Vocs

Vocs comes with three built-in layouts: docs, landing, and minimal. Each layout is styled differently, and has its own set of components which are displayed on the page.

You can specify which layout to use by setting the layout property in your frontmatter.

Docs (Default)

The docs layout is the default layout for all pages. It includes documentation related components like the "edit page" link, outline, and footer navigation.

---
layout: docs
---
 
# A docs page
 
This is a docs page.

Landing

The landing layout is a special layout that can be used for a homepage. It does not include a sidebar or any documentation related components.

---
layout: landing
---
 
This is a landing page.

HomePage component

You can also leverage Vocs' built-in <HomePage> components to template a minimal home page.

index.mdx
---
layout: landing
---
 
import { HomePage } from 'vocs/components'
 
<HomePage.Root>
  <HomePage.Logo />
  <HomePage.Tagline>React Documentation Framework, powered by Vite</HomePage.Tagline>
  <HomePage.InstallPackage name="vocs" type="init" />
  <HomePage.Description>Vocs is a minimal static documentation generator designed to supercharge your documentation workflow, built with modern web technologies.</HomePage.Description>
  <HomePage.Buttons>
    <HomePage.Button href="/docs" variant="accent">Get started</HomePage.Button>
    <HomePage.Button href="https://github.com/wevm/vocs">GitHub</HomePage.Button>
  </HomePage.Buttons>
</HomePage.Root>

Minimal

The minimal layout is a barebones, blank layout. It does not include any documentation related components, and is useful for pages that don't need them, like a blog.

---
layout: minimal
---
 
# A minimal page
 
This page uses a minimal layout.

Frontmatter Options

You can also control the layout of the page through Frontmatter options.

See here for a list of all Frontmatter options.

Examples

The example below demonstrates a docs layout page with no sidebar, outline or logo:

---
showSidebar: false
showOutline: false
showLogo: false
---
 
This is a page without a sidebar, outline, or logo.

The example below demonstrates a minimal layout page with no logo:

---
layout: minimal
showLogo: false
---
 
This is a minimal layout without the logo.

The example below demonstrates a landing layout page with a viewport width that spans the width of the page:

---
layout: landing
content: 
  horizontalPadding: 0px
  width: 100%
  verticalPadding: 0px
---
 
This is a minimal layout without the logo.