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;">© 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 %}