eleventy-plugin-liquid

An Eleventy plugin for configuring the LiquidJS template language.

Usage

First, add the plugin as a development dependency to your project's package.json file:

npm install --save-dev @jgarber/eleventy-plugin-liquid

Next, add the plugin to your project's Eleventy configuration file (e.g. eleventy.config.js):

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(require("@jgarber/eleventy-plugin-liquid"));
};

With no additional configuration, eleventy-plugin-liquid will configure the LiquidJS template language using the options listed below.

Options

eleventy-plugin-liquid sets the following configuration options:

See LiquidJS' Options documentation for a full, up-to-date list of configuration options. Eleventy's LiquidJS template language documentation also has several important notes regarding Eleventy's default configuration.

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(require("@jgarber/eleventy-plugin-liquid"), {
    globals: {
      dates: {
        display: "%A, %B %e<sup>%q</sup>, %Y",
        time: "%l:%M %p",
      },
    },
    jsTruthy: false
  });
};

[!TIP] As shown above, a common configuration option you may want to set is arbitrary data (like dates) in the globals object. The keys in the dates object may be used to format dates and times in Liquid templates. For example, {{ page.date | date: dates.time }}. See the LiquidJS date filter documentation for more.

ESM Support

Eleventy v3.0.0 added bundler-free ESM support. This plugin works with either ESM or CommonJS projects!

import liquidPlugin from "@jgarber/eleventy-plugin-liquid";

export default async function(eleventyConfig) {
  eleventyConfig.addPlugin(liquidPlugin);
}

Acknowledgments

First and foremost, eleventy-plugin-liquid wouldn't be possible without Zach Leatherman's incredible work creating Eleventy and his stewardship of its community.

eleventy-plugin-liquid is written and maintained by Jason Garber.