The body
element on each page has a class representing the current page. The homepage has classes "page home"
, while a blog post might have "page blog-hello-world"
.
Vowel attempts to construct a logical semantic HTML structure based on the files and folders in your website.
To do this, Vowel distinguishes between evergreen pages and ephemeral pages. A page with a date
property is considered ephemeral, so it is excluded from the navigation and sitemap.
Vowel will automatically create a multi-level nav, with one level for each parent folder for the current page.
Vowel will create a full side navigation that displays all evergreen pages.
Frontmatter
Reserved properties
title
: Page titleimage
: Page imagedescription
: Page descriptiondate
: Date publishedbreadcrumb
: Short identifier for the pagetoc
: Optionally display a table of contents
Vowel will attempt to impute the type of each frontmatter property. Imputed types include:
Links (Will generate a link preview)
Images (will display the image)
Date (will render a pretty date in a
time
element)
You can also use lists and objects in frontmatter.
Markdown
Vowel comes loaded with GFM (Github-flavored Markdown):
## Autolink literals www.example.com, https://example.com, and contact@example.com. ## Footnote A note[^1] [^1]: Big note. ## Strikethrough ~one~ or ~~two~~ tildes. ## Table | a | b | c | d | | - | :- | -: | :-: | ## Tasklist * [ ] to do * [x] done
Along with all standard Markdown, Vowel also allows the following special elements:
Rich link previews
Paste a URL on its own line (e.g. https://example.com
).
Internal link previews
Paste a relative path to a page (e.g. /about
).
The link will be rendered as an article
element with a class representing the linked path (e.g. page-blog-hello-world
).
Page lists
A relative path to a folder with a count
parameter (e.g. /blog?count=2
). This will exclude the home.md
file for the folder. In this example, it would return the /blog/hello-world.md
file but not /blog/home.md
.
The page list will order pages first by date in reverse chronology (newest to oldest) and then alphabetically (a to z).
The list will be rendered as article
elements (see above) in a section
element. The section
element will have a class representing the folder path (e.g. folder-blog
).
Headings
If your document starts with an h1
(#
) and has no title
property, the h1
will be used as the meta title.
If your document includes h1
s after the title, all headings will be demoted one level (#
to h2
, ##
to h3
).
Description
If your document doesn't include a description
, a meta description will be extracted from the text.
Notes
Highlight information with note boxes:
:::tip Use `tip` for power-ups. ::: :::note Use `note` for good-to-know information. ::: :::important Use `important` to help guide your user down the right path. ::: :::warning Use `warning` to help your user avoid the wrong path. ::: :::caution Use `caution` to alert the user before they perform a destructive action. :::