liquid-template-loader

0.2.2 • Public • Published

Liquid Template Loader

Liquid template engine (see http://github.com/shopify/liquid) for webpack loader.

This loader was ported from liquid-loader (see https://github.com/azeeson/liquid-loader).

Getting Started

To begin, you'll need to install liquid-template-loader.

npm install --save-dev liquid-template-loader

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document</title>
</head>
<body>
  <p>Hi {{ name }}</p>
</body>
</html>

webapck.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader'
          },
          {
            loader: 'liquid-template-loader',
            options: {
              data: {
                'name': 'satoshi'
              },
            }
          }
        ]
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + 'index.html',
    })
  ]
}

Usage

Add filters

options: {
  ...
  filters: {
    myFilter: input => {
      return String(input).toUpperCase()
    }
  }
}

Add tags

options: {
  ...
  tags: {
    myTag: class MyTag extends Liquid.Tag {
      render () {
        return 'Hello World';
      }
    }
  }
}

For detail implementaion, you can see https://github.com/docs/liquid/tree/master/lib/liquid/tags.

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i liquid-template-loader

Weekly Downloads

10

Version

0.2.2

License

MIT

Unpacked Size

8.07 kB

Total Files

12

Last publish

Collaborators

  • satoshi03