Skip to main content

Transclude

transclude, section

Description​

{{ transclude 'foo/bar' }}
{{ section baz }}
{{ end section baz }}

Transclude the other template. {{ transclude }} specify target template and display at {{ section }} area.

Example​

Template - layout.tpl
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    {{ section content }}
    {{ end section content }}
</body>
</html>
Template - index.tpl
{{ transclude 'layout' }}

{{ section content }}
    <p>This is a index content.</p>
{{ end section content }}
Output
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    <p>This is a index content.</p>
</body>
</html>

Mutiple transclude​

It can be mutiple transclude.

Template - grandparent.tpl
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    <p>This is grandparent content.</p>

    {{ section content }}
    {{ end section content }}
</body>
</html>
Template - parent.tpl
{{ transclude 'grandparent' }}

{{ section content }}
<div class="parent-box">
    <p>This is parent content.</p>

    {{ section main }}
    {{ end section main }}
</div>
{{ end section content }}
Template - child.tpl
{{ transclude 'parent' }}

{{ section main }}
<div class="child-box">
    <p>This is child content.</p>
</div>
{{ end section main }}
Output
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    <p>This is grandparent content.</p>

    <div class="parent-box">
        <p>This is child content.</p>

        <div class="child-box">
            <p>This is child content.</p>
        </div>
    </div>
</body>
</html>