Page data
Assign custom data to the pages
Pages can contain arbitrary data. In Markdown files, the data is defined in the front matter block, a block delimited by two triple-dashed lines containing YAML code. There are other formats that can have front matter or store the data in different ways. Let's see some examples:
---
title: This is the title
url: custom-url.html
---
This is the page content
title: This is the title
url: custom-url.html
content: This is the page content
---
title: This is the title
url: custom-url.html
---
<h1>{{ title }}</h1>
This is the page content
{
"title": "This is the title",
"url": "custom-url.html",
"content": "This is the page content"
}
export const title = "This is the title";
export const url = "custom-url.html";
export default () => "<p>This is the page content</p>";
In the examples above, all pages contain two variables: title
and url
.
In the formats with front matter (like Markdown and Nunjucks), the content is defined below the front matter. Formats that don't use front matter export the content as the content
variable or, optionally, as a default export (like in page.page.js
).
Standard variables
There are some special variables that Lume understands:
url
The url
variable contains the public URL of the page, useful to create links and configure the output filename. If it doesn't exist, it's generated automatically by lume. See URL docs
date
If it's not defined, Lume automatically uses the file creation date. This variable can be defined in the filename See Page date or in the front matter. The accepted values are:
- Any
IS0 8601
compatible date, like2021-01-01
,2021-01-01 03:10:10
,2021-01-01T03:10:10Z
,2021-01-01Y03:10:10-0700
, etc. - The special value
Git Created
to get the first time this file was added to the Git history. It uses the creation date as fallback. - The special value
Git Last Modified
to get the last time this file has changed in the Git history. It uses the last modified date as fallback.
draft
The draft variable mark this page as draft, which means it will ignored unless the environment variable LUME_DRAFTS
is defined as "true"
.
layout
To define the layout that is used to render the page. See Layouts for more info.
tags
Tags are used to group pages. See Tags
templateEngine
To override the template engine used to render the page. See Template engine
renderOrder
To customize the order in which the page is rendered. See Render Order
mergedKeys
To customize how some data is merged. See Merged Keys docs
---
url: /welcome.html
date: 2021-01-01
layout: layouts/post.vto
draft: true
tags: post
---
export const url = "/welcome.html";
export const date = new Date("2021-01-01T03:24:00");
export const layout = "layouts/post.vto";
export const draft = true;
export const tags = ["post"];
const data = {
url: "/welcome.html",
date: new Date("2021-01-01T03:24:00"),
layout: "layouts/post.vto",
draft: true,
tags: ["post"],
};
export default data;