https://github.com/satoshi03/liquid-template-loader
Liquid template loader module for webpack.
https://github.com/satoshi03/liquid-template-loader
liquid-templating-engine npm-package webpack
Last synced: 2 months ago
JSON representation
Liquid template loader module for webpack.
- Host: GitHub
- URL: https://github.com/satoshi03/liquid-template-loader
- Owner: satoshi03
- License: mit
- Created: 2020-09-03T02:40:58.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-09-03T10:09:14.000Z (almost 6 years ago)
- Last Synced: 2025-09-03T18:33:08.104Z (10 months ago)
- Topics: liquid-templating-engine, npm-package, webpack
- Language: JavaScript
- Homepage:
- Size: 344 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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**
```html
Document
Hi {{ name }}
```
**webapck.config.js**
```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
You can specify custome `data`, `filter`, `tag`.
### Add data
```html
{{ user.name }}
```
```js
module.exports = {
...
module: {
rules: [
{
...
use: [
{
options: {
...
data: {
user: {
id: 1,
name: 'satoshi'
}
}
...
}
```
### Add filters
```html
{{ 'hello world' | myFilter }}
```
```js
module.exports = {
...
module: {
rules: [
{
...
use: [
{
options: {
...
filters: {
myFilter: input => {
return String(input).toUpperCase()
}
}
...
}
```
### Add tags
```html
{% MyTag %}
```
```js
const Liquid = require('liquid');
module.exports = {
...
module: {
rules: [
{
...
use: [
{
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](./LICENSE)