1.4.3 • Published 3 years ago
laravel-mix-liquid v1.4.3
Laravel Mix Liquid
A Laravel Mix extension to convert Liquid template to HTML. Support with frontmatter to extract meta data from documents.
Usage
First, install the extension.
npm install laravel-mix-liquid --save-devThen, require it within your webpack.mix.js file, like so:
const mix = require('laravel-mix');
require('laravel-mix-liquid');
const data = {
name: 'John',
email: 'jdoe@mail.com'
}
// or you can get data from .json files
// const data = 'src/data/*.json'
const liquidConfig = {
root: path.resolve(__dirname, 'src/views'),
extname: '.liquid'
}
mix
.setPublicPath('public')
// .liquid(src, dest, data, config)
.liquid('src/views/pages/**/*.html', Config.publicPath, data, liquidConfig);Note: The src files must be a .html document.
Example
So you have a file src/views/pages/index.html
---
layout: master
title: Landing page
---
<h1>Hi {{ site.data.name }}</h1>
<p>{{ page.title }} – Build in {{ site.name }}</p>
{% include "components/alert" %}Then you can create your layout file, src/views/layouts/master.liquid
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{{ page.title }}</title>
</head>
<body>
<main>
{{ content }}
</main>
</body>
</html>As well as the component file, src/views/components/alert.liquid:
<div class="alert alert-info">
<h3>Heads up!</h3>
<p>{{ site.description }}</p>
</div>And you're done! Compile everything down with npm run dev or npm run watch. Please check Front Matter and LiquidJS docs for more details.