Layouts
Vocs comes with three built-in layouts: docs
, landing
, and minimal
. Each layout is styled differently, and has it's 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.
---
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.