ed15a52c26
* docs: polish theme, playground, and reference pages Improve readability of the docs site with updated light/dark tokens, shared code-block styling, and playground editors that follow system color scheme. Skip CookieHub on localhost, serve the browser bundle from theme source, and use backtick titles on filter/tag reference pages for consistent navigation. Co-authored-by: Cursor <[email protected]> * docs: highlight npx in bash blocks and polish English copy Use Prism insertBefore for CLI commands like npx, tighten tutorial and reference wording, and keep YAML titles free of backticks so sidebar and page headings stay correct. Co-authored-by: Cursor <[email protected]> * docs: restore lowercase filter and tag titles Titles should match actual filter/tag identifiers (e.g. abs, append), not capitalized English labels. Co-authored-by: Cursor <[email protected]> --------- Co-authored-by: Cursor <[email protected]>
1.7 KiB
title
| title |
|---|
| Plugins |
A number of tags and filters can be encapsulated into a plugin, which will be typically installed via npm. This article provides information about how to create and use a plugin.
Write a Plugin
A LiquidJS plugin is a simple function that takes the Liquid class as the first parameter and uses the Liquid instance for this. We can call LiquidJS APIs on this to make certain changes, especially register filters and tags.
Now we'll make a plugin to uppercase every letter of the input. Save the following snippet to upup.js:
/**
* Inside the plugin function, `this` refers to the Liquid instance.
*
* @param Liquid: provides facilities to implement tags and filters.
*/
module.exports = function (Liquid) {
this.registerFilter('upup', x => x.toUpperCase());
}
Use a Plugin
Simply pass the plugin function into the .plugin() method:
const engine = new Liquid()
engine.plugin(require('./upup.js'));
engine
.parseAndRender('{{ "foo" | upup }}')
.then(console.log) // outputs "FOO"
Plugin List
Since this library excludes certain features that are available on the Shopify platform but not on the Shopify/liquid repo, see Differences with Shopify/liquid.
Here's a list of plugins that backfill those features. Feel free to add yours, this file is publicly editable.
- Sections Tags (WIP): https://github.com/harttle/liquidjs-section-tags
- Color Filters: https://github.com/harttle/liquidjs-color-filters