- Stable
2.0.1
- Beta
3.0.0-beta.1
- Canary
3.0.0-alpha.19
Toggle Menu
Eleventy
1.93s
Next.js
70.65s
Quick Tip: Draft Posts using Computed Data
Here’s a quick snippet that shows how to combine Eleventy’s Configuration API Global Data and Computed Data features in your Eleventy Configuration file to implement a simple drafts feature for any piece of content.
Set draft: true
anywhere in a file’s data cascade and that file will be only be built when using Eleventy in --serve
or --watch
modes. It will be excluded from full Eleventy builds.
You might imagine how this could be extended to add a publishing date feature too: to exclude content from builds before a specific date set in a post’s front matter (or elsewhere in the data cascade).
Filename .eleventy.js
module.exports = function (eleventyConfig) {
// When `permalink` is false, the file is not written to disk
eleventyConfig.addGlobalData("eleventyComputed.permalink", function () {
return (data) => {
// Always skip during non-watch/serve builds
if (data.draft && !process.env.BUILD_DRAFTS) {
return false;
}
return data.permalink;
};
});
// When `eleventyExcludeFromCollections` is true, the file is not included in any collections
eleventyConfig.addGlobalData(
"eleventyComputed.eleventyExcludeFromCollections",
function () {
return (data) => {
// Always exclude from non-watch/serve builds
if (data.draft && !process.env.BUILD_DRAFTS) {
return true;
}
return data.eleventyExcludeFromCollections;
};
}
);
eleventyConfig.on("eleventy.before", ({ runMode }) => {
// Set the environment variable
if (runMode === "serve" || runMode === "watch") {
process.env.BUILD_DRAFTS = true;
}
});
};
Related
- You can see the above code in action on the
eleventy-base-blog
project - Skip Writing to the File System with
permalink: false
- How to exclude content from collections with
eleventyExcludeFromCollections
All Quick Tips
- Quick Tip: Inline Minified CSS
- Quick Tip: Add Edit on GitHub Links to All Pages
- Quick Tip: Inline Minified JavaScript
- Quick Tip: Zero Maintenance Tag Pages for your Blog
- Quick Tip: Super Simple CSS Concatenation
- Quick Tip: Adding a 404 Not Found Page to your Static Site
- Quick Tip: Fetch GitHub Stargazers Count (and More) at Build Time
- Quick Tip: Trigger a Netlify Build Every Day
- Quick Tip: Cache Data Requests
- Quick Tip: Transform Global Data using an `eleventyComputed.js` Global Data File
- Quick Tip: Use local plugins to reduce config file size
- Quick Tip: Draft Posts using Computed Data
- View all of the Eleventy Quick Tips.