using django template engine? #616

araneta · 2024-03-15T00:04:36Z

araneta
Mar 15, 2024

is it possible to create a templates that support extends and block like django template engine?
{% extends "layouts/admin.html" %}
{% block innercontent %}
{% endblock %}
or maybe we can user https://github.com/flosch/pongo2 ?

joerdav · 2024-03-15T08:17:21Z

joerdav
Mar 15, 2024
Collaborator

This is supported yes, but the syntax is very different. And it's a bit of a paradigm shift. I think what might be best is if you show a template in django style, I'll show you how I would architect that in templ.

0 replies

araneta · 2024-03-15T22:48:07Z

araneta
Mar 15, 2024
Author

here is the sample of layouts/main.html

<!doctype html>
<head>
{%block css %}{% endblock %}
</head>
<body class="bg-gradient-primary">
 {% block content %} {% endblock %}
</body>
</html>

and the page can inherit that layout for example login.html

{% extends "layouts/main.html" %}
{% block content %}
<div class="container">
test content
</div>
{% endblock %}

how do i implement this in templ ? thanks

1 reply

joerdav Mar 18, 2024
Collaborator

Ah, so with templ you may have to invert your thinking a little bit, but this is how:

package layouts

templ layout() {
    <!doctype html>
    <html>
        <body class="bg-gradient-primary">
                 { children... }
        </body>
    </html>
}

templ mainPage() {
    @layout() {
        <div class="container">
            test content
        </div>
    }
}

araneta · 2024-03-18T23:31:40Z

araneta
Mar 18, 2024
Author

i see but there are multiple blocks in the layouts/main.html like css and content how can i do that?
thanks

1 reply

joerdav Mar 19, 2024
Collaborator

In the case of HTML you can use function arguments to render components.

Please read the page about composition: https://templ.guide/syntax-and-usage/template-composition

package layouts

templ layout(contents, css templ.Component) {
    <!doctype html>
    <html>
        <head>
                @css
        </head>
        <body class="bg-gradient-primary">
                 @contents
        </body>
    </html>
}

templ mainPage() {
    @layout(mainContents(), mainCSS())
}

templ mainContents() {
        <div class="container">
            test content
        </div>
}

templ mainCSS() {
        <styles>
            ...
        </styles>
}

araneta · 2024-03-19T10:36:05Z

araneta
Mar 19, 2024
Author

thanks

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

using django template engine? #616

{{title}}

Replies: 4 comments 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

using django template engine? #616

araneta Mar 15, 2024

Replies: 4 comments · 2 replies

joerdav Mar 15, 2024 Collaborator

araneta Mar 15, 2024 Author

joerdav Mar 18, 2024 Collaborator

araneta Mar 18, 2024 Author

joerdav Mar 19, 2024 Collaborator

araneta Mar 19, 2024 Author

araneta
Mar 15, 2024

Replies: 4 comments 2 replies

joerdav
Mar 15, 2024
Collaborator

araneta
Mar 15, 2024
Author

joerdav Mar 18, 2024
Collaborator

araneta
Mar 18, 2024
Author

joerdav Mar 19, 2024
Collaborator

araneta
Mar 19, 2024
Author