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):

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

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

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:

Name	Default
dateFormat	"%Y-%m-%dT%H:%M:%S.%L%:z"
jsTruthy	true
orderedFilterParameters	true
timezoneOffset	0

From v2.0.0, this package exports these options as defaultLiquidOptions.

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.

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

export default function(eleventyConfig) {
  eleventyConfig.addPlugin(eleventyPluginLiquid, {
    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.

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.