Skip to content

Override-able template "blocks" #245

Description

@jcs224

Is your feature request related to a problem? Please describe.
There are instances where I'd like to be able to override default content of a template cleanly, such as including different scripts and styles on a different page, or showing different navigation from the default.

Describe the solution you'd like
Here is a basic example of what the desired behavior might look like. In this case, overriding a script. Here is the layout:

<!-- main.eta -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Cool New App</title>
    <% block('styles') %>
</head>
<body>
    <h1>Here is some content.</h1>
    <% it.body %>
    
    <% block('scripts') { %>
    <script>
        console.log('this script will be included on every page by default, unless a sub-template overrides it.')
    </script>
    <% } %>
</body>
</html>

And here is a sub-template, utilizing the above layout:

<!-- some-page.eta -->
<% layout('@main') %>

<p>This is the body of a page.</p>

<% block('styles') { %>
<link rel="stylesheet" href="styles-only-on-this-page.css">
<% } %>

<% block('scripts') { %>
<script>
    console.log('the default script will not load, because I overrode it here.')
</script>
<% } %>

Describe alternatives you've considered
I've looked at other JS templating engines, but this fits my needs best based on the runtime flexibility and most of the features I need are available.

Additional context

Here are some existing templating engine's examples that might provide additional context:

https://mozilla.github.io/nunjucks/templating.html#block
https://laravel.com/docs/10.x/blade#layouts-using-template-inheritance

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions