My project has two apps (for now),table and menu. Each app has a template and both templates extends a base.html template at the project root.
table_view.html
{% extends "base.html" %}
{% load static %}
{% block title %}Table Mgt{% endblock %}
{% block content %}
<link href="{% static "css/table.css" %}" rel="stylesheet" />
...some elements here...
{% endblock %}
{% block sidebar %}
<a href="#">
<button class="sidebar_button check_in">Check In</button>
</a>
<a href="#">
<button class="sidebar_button check_out">Check Out</button>
</a>
{% endblock %}
menu_view.html
{% extends "base.html" %}
{% load static %}
{% block title %}Menu{% endblock %}
{% block content %}
<link href="{% static "css/menu.css" %}" rel="stylesheet"/>
{% block sidebar %}
{% include 'table/table_view.html' %}
{% endblock %}
base.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static "css/base.css" %}" rel="stylesheet" />
</head>
<body>
<div id="header">
...some elements here...
</div>
<div id="sidebar">
{% block sidebar %}
{% endblock %}
</div>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
In menu_view.html, I am trying to include the block sidebar only. However, the entire table_view.html is actually embedded.
How do I include only a specific block from specific template?
Template extension works by defining slots you can put stuff into. These slots can be filled with defaults. The slots will be rendered as is if you don't override them in the extending (child) templates.
For example with this base:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Hello World!{% endblock %}</title>
<link href="{% static "css/base.css" %}" rel="stylesheet" />
{% block extra_css %}{% endblock %}
</head>
</html>
And this child:
{% extends "base.html" %}
The result will be:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="/static/css/base.css" rel="stylesheet" />
</head>
</html>
With this child template:
{% extends "base.html" %}
{% block extra_css %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">{% endblock %}
The result is:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="/static/css/base.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
</html>
Now specific to your problem:
if you have different sidebars, try to make the sidebar.html template smarter so it can render all variations -or- create different sidebar templates
if you have the same sidebar everywhere, but some pages don't have a sidebar, create different base templates: one with a sidebar slot and one without.
if each sidebar is different for each page, don't bother with include and just override the slot
Related
Basicly my django project consists of the templates with html.
I would like to fill the context of the site using blocks.
My problem is that I would like to send the block to sidebar and the base part of the page from application's .html files.
Templates:
sidebar.html
footer.html
header.html
base.html
In my base.html I use:
{% include 'partials/_sidebar.html' %}
{% block content %}{% endblock %}
in my sidebar.html I use
{% block sidebar %}{% endblock %}
and in my Application index.html i try to use:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<h1>Home Page</h1>
{% endblock %}
{% block sidebar %}
<div class="bg-white py-2 collapse-inner rounded"></div>
<h6 class="collapse-header">Custom Components:</h6>
<a class="collapse-item" href="{% url 'veggies' %}">veggies</a>
<a class="collapse-item" href="{% url 'fruits' %}">fruits</a>
</div>
{% endblock %}
But it is obviously not working.
The starting page triggers app/index.html with a view.
How to workaround such a problem?
[i cant add post][1]
[1]: https://i.stack.imgur.com/FV3Co.png
Hopefully I can demonstrate how you use blocks by sharing some example templates with you.
Starting with a base template, that generally has the most content and contains the basic markup;
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{% block title %}{% endblock title %}</title>
<meta name="description" content="{% block meta_description %}{% endblock meta_description %}">
<meta name="viewport" content="width=device-width,initial-scale=1">
{% block styles %}{% endblock %}
{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<script type="text/javascript" src="https://kit.fontawesome.com/c3c34cb042.js" crossorigin="anonymous"></script>
{% endblock %}
{% block head_extras %}{% endblock %}
</head>
<body>
{% block header %}{% endblock header %}
{% block content %}{% endblock content %}
{% block footer %}{% endblock footer %}
{% block footer_scripts %}
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
{% endblock %}
</body>
</html>
Then a page for content would extend that and you'd include in this template the blocks you want to add content to;
{% extends "base.html" %}
{% load static %}
{% block title %}Content Page{% endblock title %}
{% block content %}
<section class="">
<div class="container-fluid container-xl">
<div class="content-section">
<h1 class="content-section__heading-1">Content Page</h1>
<p>Hello World!</p>
</div>
</div>
</section>
{% endblock content %}
That'd be a really simple setup. But as you've said, you might also use the {% include %} tag.
What that does is inject the content of the included template into the template at the point you use the tag.
So in a template with a sidebar, that might look like;
{% extends "base.html" %}
{% load static %}
{% block title %}Sidebar Content Page{% endblock title %}
{% block content %}
<section class="">
<div class="container-fluid container-xl">
<div class="content-section">
<h1 class="content-section__heading-1">Content Page</h1>
<p>Hello World!</p>
</div>
{% include 'partials/_sidebar.html' %}
</div>
</section>
{% endblock content %}
I am still very new to Django and I want to add the HTML for a navigation bar and its respective CSS into my base HTML file. Here is what I did up till now:
in app/base.html:
{% extends "BritIntlSchl/navbar.html" %}
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<link href="{% static 'appname\stylebase.css' %}" rel="stylesheet">
<link href="{% static 'appname\navbarstyles.css'}" rel="stylesheet" %}">
{% block head-content %}{% endblock head-content %}
</head>
{% block nav%}{% endblock nav %}
{% block content1 %}{% endblock content1 %}
</body>
</html>
and in app/navbar.html:
{% block nav%}
<div class="wrap">...</div>
{% endblock nav%}
I am pretty much lost here. I am sure that putting{% block nav%} around the nav bar does nothing.
How do you suggest I go about this?
I'm using Django 2.1.
When one uses the extend template tag one cannot have any HTML outside any block as then there would be the confusion of where to put this HTML (In fact the template engine would completely ignore that HTML). So when you extend /navbar.html at most you can fill the block named nav which you are overriding and filling with nothing. What you want to do is to use the include template tag to include the navbar into base.html:
base.html:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<link href="{% static 'appname\stylebase.css' %}" rel="stylesheet">
<link href="{% static 'appname\navbarstyles.css'}" rel="stylesheet" %}">
{% block head-content %}{% endblock head-content %}
</head>
{% block nav %}{% include 'app/navbar.html' %}{% endblock nav %}
{% block content1 %}{% endblock content1 %}
</body>
</html>
Note: We put the {% block nav %} there not because navbar.html would fill it but because some page extending base.html might want a
custom navbar.
navbar.html:
<div class="wrap">...</div>
Following is my homepage.html is home app
{% extends "base.html" %}
{% load static %}
<link rel = "stylesheet" href = "{% static 'css/home.css' %}" > #reference to stylesheet in the home app static directory
{% block body %}
<h1>I am homepage</h1>
{% endblock %}
My base.html in the project root folder is the following
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "{% static 'base.css' %}" > #stylesheet in root folder
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
But here, the home.css in the homepage.html is not functional as the base.html on extend closes the head before the home.css can come in the head section.
Is there any way I can add the CSS into the header
Thanks
You just need another block.
In base.html:
<head>
<link rel="stylesheet" href="{% static 'base.css' %}">
{% block extrahead %}{% endblock %}
</head>
...
and in homepage.html:
{% extends "base.html" %}
{% load static %}
{% block extrahead %}<link rel="stylesheet" href="{% static 'css/home.css' %}">
{% endblock %}
...
I've 2 templates. Here is the listing:
1)base.html
<!DOCTYPE html>
<html>
<head>
{% load staticfiles %}
<link type="text/css" rel="stylesheet" href={% static 'resume/stylesheet.css'%}/>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div id=header> some info </div>
{% block content %}{% endblock %}
</body>
</html>
2)person.html
{% extends "base.html" %}
{% block title %}Personal info{% endblock %}
{% block content %}
<div>{{person.first_name}}</div>
{% endblock %}
I use template "person.html" in my view
def person_view(request):
person = get_object_or_404(Person, pk=1)
return render(request, "resume/person.html", {'person': person})
urls.py:
url(r'^$', views.person_view, name='person'),
The problem is, when I run the server, and trying to open page with this url, there is only text and information from "person.html" template(meaning of "person.first_name"). Information from "base.html" and css styles don't used.
You forgot double quotes:
<link type="text/css" rel="stylesheet" href={% static 'resume/stylesheet.css'%}/>
should be:
<link type="text/css" rel="stylesheet" href="{% static 'resume/stylesheet.css'%}"/>
Edit
here as well:
<div id=header>
should be:
<div id="header">
Edit: Please do not be mislead by this question, It was my fault that my changes where not working out. I happen to have to projects that are named the same(not a smart idea) this confused everything, i was making changes in a different project from that i was working in. Sorry to the good stackoverflow folks that i mislead.
I have a base template public_base.html
<!doctype html>
<!-- [if IE ]> <html class="no-js"> <![endif] -->
<head>
<!-- favicon for web browser and smartphones -->
<link rel="icon" href="{{ STATIC_URL }}images/img.png" type="image/x-png">
<link rel="apple-touch-icon" href="{{ STATIC_URL }}img/apple-touch-icon.png">
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Homenaje|Molengo' rel='stylesheet' type='text/css'>
<!-- CSS Section -->
<link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}maincss/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}maincss/impress.css">
<link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}maincss/style.css">
<link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}maincss/impression.css">
<title>{% block title %}F4L | Have it easy{% endblock %}</title>
</head>
<body lang="en">
<div id="container">
{% load smartmin %}
<div id="header"> <!-- Header -->
<div id="logo">
<a href="{% url homepage %}">
<img src="{{ STATIC_URL }}img/logo.jpg" class="" alt="" />
</a>
</div>
<div id="menu">
<ul>
{% if perms.restaurant_detail.restaurant_detail.create %}
<li>Join F4L</li>
{% endif %}
<li>FAQ</li>
<li>contact</li>
<li>about us</li>
{% if request.user.is_authenticated %}
<li>logout</li>
{% else %}
<li>login</li>
{% endif %}
</ul>
</div>
</div> <!-- End Header -->
<div style="clear: both;"></div>
<div id="main"> <!-- Main -->
{% block main-contents %}
<p>jrneflkwnel</p>
{% endblock %}
</div>
</div>
that i inherit here, home.html
{% extends "public_base.html" %}
{% block main-contents %}
<p>This is not Working.</p>
{% endblock main-contents %}
but this is not working at all,basically the content in home.html is not loading. what could be causing this?
You need to inherit the block in your home.html:
{% extends "public_base.html" %}
{% block main-contents %}
<p>This is not Working.</p>
{% endblock %}
Have a read through the docs on template inheritence, specifically:
[when you inherit from a parent template] the template engine will notice the three block tags in base.html and replace those blocks with the contents of the child template.
So when you inherit from the parent template, you need to include a block in your child template that overrides a block in the parent template, in this case the main-contents block.
You have to define a empty block content in your public_base.html. Add the following code in your public_base.html.
{% block content %}
{% endblock %}
Or else you have to inherit {% block main-contents %} from public_base.html.