I have a main layout.html that has a nav bar that ALL of my pages extend from. I have content in test.html. I want to add bootstrap tabs to test.html (without changing layout.html).
Plan: My plan:
tabs.html extend layout.html
text.html extend tabs.html
Result:
Tabs.html inherits the nav bar just fine. But none of the content in text.html shows up. Code is below.
layout.html:
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<head>
</head>
<body>
[navbar code]
<div class="container">
{% block body %}
{% endblock body %}
</div>
</body>
</html>
In tabs.html:
{% extends "layout.html" %}
{% block body %}
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Checklist</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="checklist">
{% block overview %}
{% endblock overview%}
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
</script>
</div>
{% endblock body%}
In text.html
{% extends "tabs.html" %}
{% block overview %}
[content]
{% endblock %}
Rename text.html to _text.html and remove {% extends "tabs.html"}.
Next, in tabs.html replace:
{% block overview %}
{% endblock %}
with:
{% include '_text.html' %}
Related
How can I include the following template (there are many of such template) in the main template so that each block gets appended to the corresponding block in the main template? Actually I want to avoid adding CSS and JavaScript separately each time I include a template, so asking this question.
{% block head %}
<link rel="stylesheet" href="/static/navbar.css">
{% endblock %}
{% block body %}
<div id="navbar"></div>
{% endblock %}
{% block script %}
<script src="/static/navbar.js"></script>
{% endblock %}
Main template:
<!DOCTYPE html>
<html>
<head>
{% block head %}
<link rel="stylesheet" href="/static/main.css">
{% endblock %}
</head>
<body>
<div id="header"></div>
{% block body %} {% endblock %}
<div id="footer"></div>
{% block script %}
<script src="/static/main.js"></script>
{% endblock %}
</body>
</html>
i have two html file ,i should extends secend file from first file but it doesnt work
first file base.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}Library{% endblock %}</title>
</head>
<body>
<div id="test">
{% block test %}
<h1>This page belongs to me.</h1>
{% endblock %}
</div>
</body>
</html>
secend one booklist.html
{% extends "base.html" %}
{% block content %}
<h3>Books</h3>
<div>
{% for book in books %}
{% if book.available %}
<p>{{ book.author }} wrote {{ book.title }}.</p>
{% endif %}
{% endfor %}
</div>
{% endblock %}
You Forgot to add in your parent template
{% block content %}{% endblock %}
This is where the child template is going to be placed.
Your parent template should look like this (for example):
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}Library{% endblock %}</title>
</head>
<body>
<div id="test">
{% block test %}
<h1>This page belongs to me.</h1>
{% endblock %}
</div>
<div class="myChildContentComesHere">{% block content %}{% endblock %}</div>
</body>
</html>
I am using sorl-thumbnail in my template and everything was working fine until I decided to break my templates into pieces to enable me reuse some part of it elsewhere.
My base.html looks this:
<!DOCTYPE html>
<html lang="en">
<head>
{% load staticfiles %}
{% load thumbnail %}
<link href="{% static 'mysite/css/style.css' %}" rel="stylesheet" type="text/css" />
<link href="{% static 'mysite/js/index.js' %}" rel="stylesheet" type="text/javascript" />
</head>
<body>
<div id = 'profile-photo'>
{% thumbnail user.thumbnail.thumbnail "40x40" crop="center" as im %}
<img class='pp' src=".{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% empty %}
<img class='in-use-pi' src='{{STATIC_URL}}images/ddd.jpg' width='40' height='40'/>
{% endthumbnail %}
</div>
<div id = "position">
<div class = "container">
<div class ="row">
<div class="col-md-4 hidden-xs hidden-sm">
{% block user_profile %}
Default text 1
{% endblock %}
</div>
<div class = "col-md-5">
{% block mainBody %}
Default text 2
{% endblock %}
</div>
</div>
</div><!-- end of container div -->
</div><!-- end of position div -->
</body>
</html>
If I extend this in my index.html, the thumbnail tag works fine but if I put the tag in index.html this way:
index.html:
{% extends "mysite/base.html" %}
{% block mainBody %}
{% thumbnail user.thumbnail.thumbnail "50x50" crop="center" as im %}
<img src=".{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% empty %}
<img src='{{STATIC_URL}}images/ddd.jpg' class='ppix follow_thumbnail' width='50' height='50'/>
{% endthumbnail %}
{% endblock %}
Exception Value:
Invalid block tag: 'thumbnail', expected 'elif', 'else' or 'endif'
What am I doing wrong?
You need to load the templatetag library in every template.
{% extends "mysite/base.html" %}
{% load thumbnail %}
In Django can you have one template base layer inheriting from another?
For example:
base.html
<!DOCTYPE html>
<html>
{% load staticfiles %}
<meta charset="UTF-8">
<title>Cloud Fabric || Product Calculator</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
{% block additionalStyles %}
<link rel="stylesheet" type= "text/css" href = "{% static 'fabric/editionsStylesheet.css' %}" />
{% endblock additionalStyles %}
</head>
<body>
<div id="header">
<h1 id="HeaderH1"><i>{{EditionName}}</i></h1>
</div>
{% block content %}
{% endblock content %}
</body>
</html>
So that will be the main base layer now is there a way to make another base layer to inherit from it for different parts of a website? like so:
base2.html
{% extends "base.html" %}
{% block additionalStyles %}
{% load staticfiles %}
<link rel="stylesheet" type= "text/css" href = "{% static 'fabric/monthlyEditionsStylesheet.css' %}" />
{% endblock additionalStyles %}
{% block content %}
<h1 id="chooseMonthH1">Choose The Monthly Range:</h1>
{% block monthlyForm %}
{% endblock monthlyForm %}
<button type="submit" class="pure-button pure-button-primary" id="subButton">Submit</button>
{% block formend %}
</form>
{% endblock formend %}
</div>
{% endblock content %}
So then further html can inherit from base2.html? i have already tried this but the form stopped working and the css messed up.
Your base2.html template overwrites contents of the additionalStyles block from the base.html template.
To preserve parent's block content, you must use the magic block.super variable like this:
{% extends "base.html" %}
{% block additionalStyles %}
{{ block.super }}
<link ... >
{% endblock additionalStyles %}
The above notation appends content to the additionalStyles block.
I have a base.html file that have blovk content and extended by manage.html. and that manage.html has a block sub_manage which is extended by internet_market.html, so visually it looks like:
|- base.html (block content)
|--manage.html (extends base.html)
|---sub_manage.html (extends manage.html)
when I render_template mange.html everything works fine, but when I try to render_template sub_manage.html the css/javascript does not work. What can I do to overcome this issue?
here is my base.html
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
<script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
<style type="text/css">
</head>
<body>
<div id="left_sidebar">
<ul>
<li class="main"> + Главная</li>
<li class="main">Заказы</li>
<li class="main"> - Управление сайтом</li>
</ul>
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
here is my manage.html file:
{% extends "admin/base.html" %}
{% block content %}
<!-- Nav tabs -->
<div>
<ul class="nav nav-tabs" role="tablist">
<li class="dropdown active"></li>
</ul>
</div>
<!-- Tab panes -->
<div class="manage_menu_settings">
{% include 'admin/manage/site_figuraiton.html' %}
</div>
{% block sub_manage%}
{% endblock %}
{% endblock %}
and here is internet_market.html
{% extends "admin/manage.html" %}
{% block sub_manage %}
<div class="tab-content">
<div class="tab-pane {% if current == 'delivery_settings' %} active{% endif %}" id="delivery_settings">
Настройки доставки, корзины и оплаты
</div>
<div class="tab-pane {% if current == 'delivery_type' %} active{% endif %}" id="delivery_type">
Добавить способы доставки
</div>
{% endblock%}
Solved the issue.
the problem was that I links that I used for css and js file where relative links, thus when trying to render the 2 level extend it did not find css/js. so it was like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
<script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
<style type="text/css">
but then I changed these links to dynamic links with url_for and it worked like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{url_for("static", filename = "css/bootstrap.min.css")}}">
<script type="text/javascript" src="{{url_for("static", filename = "js/bootstrap.min.js")}}"></script>
<style type="text/css">