More Dynamic templates

Generic Nunjucks, Twig and Liquid templates for 11ty/Build Awesome, Grav, Drupal, Jekyll, Shopify, etc.

There are 2 ways to get started:

A. Install with NPM 

npm install @anyblades/blades
cd _includes # or where your includes dir is
ln -s ../node_modules/@anyblades/blades/_includes/blades

That's it! Now you can reuse templates from Blades like this:

{% extends 'blades/NAME.njk' %}
{% include 'blades/NAME.njk' %}

{% include blades/NAME.liquid %}
{% render blades/NAME %}

B. Starter projects

Appendix Supported template engines

Nunjucks .njk

Official docs:

Syntax highlighting

  1. Install ginfuru.better-nunjucks = /edheltzel/better-nunjucks-for-visual-studio-code

  2. Set it as default formatter

This is a modern fork of the original extension. It is specifically designed to solve the "11ty problem" where you mix Nunjucks and HTML.

Why it's better: It injects Nunjucks grammar directly into the standard HTML grammar. This means you get full Nunjucks highlighting and the editor still knows it's an HTML file, giving you better Emmet and CSS autocompletion.

No Config: It works out of the box without needing to manually map file associations in your settings.

Auto-formatting

  1. Install esbenp.prettier-vscode = /prettier/prettier-vscode

  2. Install a compatible Prettier plugin for your project, for example:

npm i -D prettier-plugin-jinja-template
  1. It might be tricky to find a well-maintained Nunjucks plugin, but jinja-template works just fine with .njk via .html override:
{
  "plugins": ["prettier-plugin-jinja-template"],
  "overrides": [
    {
      "files": ["*.njk", "*.html"],
      "options": {
        "parser": "jinja-template"
      }
    }
  ]
}

Live example: /anyblades/blades/blob/main/.prettierrc.json

Liquid .liquid

Official docs:

Syntax highlighting & auto-formatting

  1. Simply install Shopify.theme-check-vscode = /docs/storefronts/themes/tools/shopify-liquid-vscode

That's it! Thanks to Shopify, you do not need to install Prettier separately to format your Liquid code.

The Shopify.theme-check-vscode extension comes bundled with its own instance of the Prettier Liquid plugin, so it works completely out of the box.

Twig .twig NEW

Docs in progress.

Available templates