Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jgarber623/eleventy-plugin-liquid
An Eleventy plugin for configuring the LiquidJS template language.
https://github.com/jgarber623/eleventy-plugin-liquid
11ty 11ty-plugin eleventy eleventy-plugin liquidjs
Last synced: 1 day ago
JSON representation
An Eleventy plugin for configuring the LiquidJS template language.
- Host: GitHub
- URL: https://github.com/jgarber623/eleventy-plugin-liquid
- Owner: jgarber623
- License: mit
- Created: 2024-02-26T02:52:33.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-02-26T05:13:21.000Z (7 months ago)
- Last Synced: 2024-04-26T17:22:26.774Z (5 months ago)
- Topics: 11ty, 11ty-plugin, eleventy, eleventy-plugin, liquidjs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@jgarber/eleventy-plugin-liquid
- Size: 87.9 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# eleventy-plugin-liquid
**An [Eleventy](https://www.11ty.dev) plugin for configuring the [LiquidJS](https://liquidjs.com) template language.**
[](https://www.npmjs.com/package/@jgarber/eleventy-plugin-liquid)
[](https://www.npmjs.com/package/@jgarber/eleventy-plugin-liquid)
[](https://github.com/jgarber623/eleventy-plugin-liquid/actions/workflows/ci.yml)
## Usage
First, add the plugin as [a development dependency](https://docs.npmjs.com/cli/configuring-npm/package-json#devdependencies) to your project's `package.json` file:
```sh
npm install --save-dev @jgarber/eleventy-plugin-liquid
```
Next, add the plugin to your project's [Eleventy configuration file](https://www.11ty.dev/docs/config#default-filenames) (e.g. `eleventy.config.js`):
```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:
| Name | Default |
|:--------------------------|:----------------------------|
| `dateFormat` | `"%Y-%m-%dT%H:%M:%S.%L%:z"` |
| `jsTruthy` | `true` |
| `orderedFilterParameters` | `true` |
| `timezoneOffset` | `0` |
See [LiquidJS' Options documentation](https://liquidjs.com/tutorials/options.html) for a full, up-to-date list of configuration options. [Eleventy's LiquidJS template language documentation](https://www.11ty.dev/docs/languages/liquid/) also has several important notes regarding Eleventy's default configuration.
```js
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(require("@jgarber/eleventy-plugin-liquid"), {
globals: {
dates: {
display: "%A, %B %e%q, %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](https://liquidjs.com/tutorials/options.html#globals). 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](https://liquidjs.com/filters/date.html) for more.
## ESM Support
Eleventy v3.0.0 [added bundler-free ESM support](https://www.11ty.dev/blog/canary-eleventy-v3). This plugin works with either ESM or CommonJS projects!
```js
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](https://www.zachleat.com)'s incredible work creating Eleventy and his stewardship of its community.
eleventy-plugin-liquid is written and maintained by [Jason Garber](https://sixtwothree.org).