search

sagold / handlebars-webpack-plugin

Renders your html-template at build time
161 stars 45 forks source link

Layouts #34

Open dev-juju opened 6 years ago

dev-juju commented 6 years ago

Hi,

How can I use layouts with this plugin? For example, I have several pages and partials and 1 layout (main.hbs) in a separate folder. I want all pages added to this layout before the final html is generated. Is this possible?

Thanks, Bomdi

sagold commented 5 years ago

Hi.

Your pages are hbs-files that are rendered to html files or do they use the main.hbs as a template?

As input source, you can add multiple files to the entry-option. If a specific hbs files needs to be rendered later, you should be able to add a second hbs-plugin that only loads your main.hbs.

ArturBaybulatov commented 5 years ago

I think he means the ability to extend (inherit) templates (nunjucks example):

_layout.html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{% block title %}{% endblock %}</title>
    <link href="lib/toastr-2.1.4/toastr.min.css" rel="stylesheet">

    {% block styles %}{% endblock %}
</head>

<body>
    {% block content %}{% endblock %}

    <script src="lib/lodash-4.17.5/lodash.min.js"></script>
    <script src="lib/jquery-3.3.1/jquery-3.3.1.min.js"></script>
    <script src="lib/toastr-2.1.4/toastr.min.js"></script>

    {% block scripts %}{% endblock %}
</body>
</html>

home.html:

{% extends "_layout.html" %}

{% block title %}Home page{% endblock %}

{% block styles %}
    <link href="index.css" rel="stylesheet">
{% endblock %}

{% block content %}
    <div class="content">
        Welcome to my home page
    </div>
{% endblock %}

{% block scripts %}
    <script src="index.js"></script>
{% endblock %}
odoell commented 5 years ago

As of my experiments extending .hbs files are not working. Also adding multiple paths in the entry doesn't work. It tells me glob pattern string required when I try to use an array of multiple paths as the entry.

Please correct me, if I'm wrong...