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>
Related
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 learning djnago , I would like to display an html page (in template forlder) into another html file by keeping {% extends 'base.html' %} which my template HTML that has my nav bar, CSS , javascritp..
the structure:
App1=>templates=>App1=>map.html (is a map app html file generated with folium https://python-visualization.github.io/folium/)
App1=>templates=>App1=>home.html
Src=>templates=>base.html
in home.html I would like to diplay map.html and all base.html elements (nav bar, CSS, javasript)
Here is my base .html code :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- semantic UI -->
<!--Chart js-->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>skill-site | {% block title %} {% endblock title %}</title>
</head>
<body>
{% include 'navbar.html' %}
{% block scripts %}
{% endblock scripts %}
<div class="container ui">
{% block content %}
{% endblock content %}
</div>
</body>
</html>
here is the code for home.html but it is not working:
{% extends 'base.html' %}
{% block title %}my map{% endblock title %}
{% block content %}
{% include './map.html' %}
{% endblock content %}
Thanks for your help
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.
in index.html.twig
{% extends 'CvutFitBiWt1PollBundle::layout.html.twig' %}
{% block head %}
<link rel="stylesheet" href="{{ asset('bundles/cvutfitbiwt1poll/css/style.css') }}" />
{% endblock %}
{% block body %}
<h2>Text</h2>
...
in layout.html.twig
{% extends '::base.html.twig' %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ asset('bundles/cvutfitbiwt1poll/css/style.css') }}"
{% endblock %}
css I have in src/......./Resources/public/css/style.css
in style.css
#CHARSET "UTF-8";
label, input[type="submit"] {
display: block;
padding: 0.5em;
}
h2{
color:blue;
}
I didn't see any css
Thanks for help
php app/console assets:install --Installs bundles web assets under a public web directory
you need run this command to copy files(css js img) to the web directory
Your blocks are defined wrong.
This will solve it:
in index.html.twig
{% extends 'CvutFitBiWt1PollBundle::layout.html.twig' %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('bundles/cvutfitbiwt1poll/css/style.css') }}" />
{% endblock %}
{% block body %}
<h2>Text</h2>
in layout.html.twig
{% extends '::base.html.twig' %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ asset('bundles/cvutfitbiwt1poll/css/style.css') }}"
{% endblock %}