Gulp plugin for Dry, a new template engine with advanced inheritance features.
(TOC generated by verb using markdown-toc)
Install with npm:
$ npm install --save gulp-dry
var dry = require('gulp-dry');
gulp.task('default', function() {
return gulp.src('*.html')
.pipe(dry({files: ['block/templates/*.hbs']}))
.pipe(dest('site'));
});
Visit dry for more information.
Define blocks in a template:
<!-- parent.html -->
<!DOCTYPE html>
<html lang="en">
<head>
{% block "head" %}
<meta charset="UTF-8">
<title>Document</title>
{% endblock %}
</head>
<body>
{% block "body" %}
Default body.
{% endblock %}
{% block "footer" %}
Default footer.
{% endblock %}
</body>
</html>
You can extend the parent.html template like this:
{% extends "parent.html" %}
{% block "head" %}
<meta charset="UTF-8">
<title>Inherited!</title>
<script src="script.js"></script>
{% endblock %}
{% block "body" %}
<div>This is the body</div>
{% endblock %}
{% block "footer" %}
<div>This is the footer</div>
{% endblock %}
Resulting in:
<!-- parent.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inherited!</title>
<script src="script.js"></script>
</head>
<body>
<div>This is the body</div>
<div>This is the footer</div>
</body>
</html>
Layouts are used for "wrapping" files with common code or content. Layouts can also use blocks, but the strategy for merging them is different. Unlike blocks, when using layouts:
body block of the parent layout{% body %} tag, or a {% block "body" %} {% endblock %} tagExample layout template with a body tag:
<!-- some-layout.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
{% body %}
</body>
</html>
When used by another template, like this:
<!-- some-file.html -->
{% layout "some-layout.html" %}
This is content.
Results in:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
This is content.
</body>
</html>
If you need to define placeholder content, you can define a block instead:
<!-- some-layout.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
{% block "body" %}
Default content.
{% endblock %}
</body>
</html>
When used by another template, like this:
<!-- some-file.html -->
{% layout "some-layout.html" %}
This should overwrite the default content.
Results in:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
This should overwrite the default content.
</body>
</html>
true if the given string looks like a glob pattern or an extglob pattern… more | homepagePull requests and stars are always welcome. For bugs and feature requests, please create an issue.
(This document was generated by verb-generate-readme (a verb generator), please don't edit the readme directly. Any changes to the readme must be made in .verb.md.)
To generate the readme and API documentation with verb:
$ npm install -g verb verb-generate-readme && verb
Install dev dependencies:
$ npm install -d && npm test
Jon Schlinkert
Copyright © 2016, Jon Schlinkert. Released under the MIT license.
This file was generated by verb-generate-readme, v0.1.28, on August 09, 2016.