Solved thread

This post is marked as solved. If you think the information contained on this thread must be part of the official documentation, please contribute submitting a pull request to its repository.

Volt Inheritance

I try to use the multiple inherance but it doesn't work. I see only the code of index.volt

I have index.volt, layouts/main.volt extend index.volt and index/index.volt extend main.volt. I don't know why it doesn't work.

{# index.volt #}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Tools</title>
        {{ stylesheet_link("css/normalize.css") }}
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
        {% block css_pos_head %}
        {% endblock %}
        {% block js_pos_head %}
        {% endblock %}
    </head>
    <body>
        {% block js_pos_body %}
        {% endblock %}
        <div id="wrapper" class="sidebar-mini">
            {% block content %}
            {% endblock %}
            {% block footer %}
            {% endblock %}
        </div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
        {% block js_pos_end %}
        {% endblock %}
    </body>
</html>
{# layouts/main.volt #}
{% extends "index.volt" %}

{% block css_pos_head %}
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/t/bs/dt-1.10.11/datatables.min.css"/>
    {{ stylesheet_link("css/main.css") }}
{% endblock %}

{% block content %}
<div id="top-nav" class="navbar-inverse fixed">
    <div class="brand">
        <a href="/" class="logo">
            <i class="fa fa-home icon" title="SmartTools - Home"></i>
            <b>Smart</b><span>Tools</span>
        </a>
    </div><!-- /brand -->
</div>
<aside class="fixed">
    <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;">
        <div class="sidebar-inner scrollable-sidebar" style="overflow: hidden; width: auto; height: 100%;">
            <div class="size-toggle">
                <a class="btn btn-sm" id="sizeToggle">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
            </div><!-- /size-toggle -->
            <div class="main-menu">
                {{ menu.getMenu() }}
            </div><!-- /main-menu -->
        </div>
        <div class="slimScrollBar" style="width: 0px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 1452.39px; background: rgb(0, 0, 0);"></div>
        <div class="slimScrollRail" style="width: 0px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div>
    </div><!-- /sidebar-inner -->
</aside>
{% endblock %}

{% block footer %}
<footer class="footer">
    <div class="container">
        <p style="text-align: center;">&copy; Aservoz {{ date("Y") }} </p>
    </div>
</footer>
{% endblock %}

{% block js_pos_end %}
    <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/t/bs/dt-1.10.11/datatables.min.js"></script>
    {{ javascript_include("js/main.js") }}
{% endblock %}
{# index/index.volt #}
{% extends "layouts/main.volt" %}

{% block content %}
    {{ super() }}
<div id="main-container">
    <div class="padding-md">
            {{ flash.output() }}
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>Search Session</h5>
                        </div>
                        <div class="ibox-content">
                            {{ form('class': 'form-horizontal no-margin form-border') }}
                                <div class="form-group">
                                    <label class="col-lg-2 control-label">{{ form.label('session') }}</label>
                                    <div class="col-lg-10">
                                        {{ form.render('session') }}
                                        {{ form.messages('session') }}
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-lg-offset-2 col-lg-10">
                                        {{ form.render('search') }}
                                    </div>
                                </div>
                            {{ end_form() }}
                        </div>
                    </div>
                </div>
            </div>
            {% if graph is not empty %}
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>Navigation Graph</h5>
                        </div>
                        <div class="ibox-content">
                            {{ graph }}
                        </div>
                    </div>
                </div>
            </div>
{% endif %}
    </div>
</div>
{% endblock %}


234

I think the final result is not included on the final php compilated. If I add {{ content() }} into {% block content %}{% endblock %} of view/index.volt then I see the full html included into the html of view/index.volt



234
Accepted
answer

Ok I found a solution. I created a new layout and others layouts extend its. Into the view/index.volt, I just wrote {{ content() }}