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.
Related
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>
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
I'm working with Django1.8.
I can't overtwrite the version_tag block in my base.html file. It always appears the default content.
This is a simplified version of my base.html:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{% static 'myApp/img/favicon.png' %}" rel="icon" type="image/png" />
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% static 'myApp/lib/css/bootstrap.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'myApp/lib/css/themes/bootstrap.min.css' %}" />
<script type="text/javascript" src="{% static 'myApp/lib/js/jquery.min.js' %}"></script>
</script>
</head>
<body>
<div id="main">
{% block menu %}
{% include "myApp/menu.html" %}
{% endblock menu %}
<div id="container" class="container-fluid">
{% block content %}
{% endblock content %}
</div>
</div>
{% block version_tag %}Default Version{% endblock version_tag %}
</body>
</html>
On the same folder I have the version_tag.html file:
{% extends 'myApp/base.html' %}
{% block version_tag %}
V. 1.2.3
{% endblock %}
What am I missing or doing wrong? Why does it always appear Default Version instead of V. 1.2.3?
There are only two possible causes I can think of:
Your view is still trying to render base.html instead of your inherited html template.
Simply change the view to call the correct one (version_tag.html)
The template you're really trying to display is still inheriting from base.html instead of version_tag.html
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">
i have following templates structure in flask:
templates/
/posts
list.html
base.html
index.html
my base.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ITV</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
{%- block topbar -%}
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">САПР</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
<ul class="nav navbar-nav">
<li class="active">Головна</li>
<li>Новини</li>
<li>Розклад занять</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
{%- endblock -%}
<div class="container">
<div class="content">
{% block page_header %}{% endblock %}
{% block content %}{% endblock %}
</div>
</div>
</body>
</html>
i can render template, for example : render_template('posts/list.html'), which extends my base.html
my list.html:
{% extends "base.html" %}
{% block content %}
Posts
{% endblock %}
How can i set active element menu in base.html
<li class="active">Головна</li>
<li>Новини</li>
<li>Розклад занять</li>
when i'm rendering list.html, and cant pass data directly into base.html?
In Flask, the request variable is available by default in templates, so you can simply check request.path in your base.html and adjust your links.
<li {% if request.path == '/' %}class="active"{% endif %}>
Головна
</li>
Can use a ternary also...just a bit shorter & nicer
<li {{ 'class="active"' if request.path == '/' else '' }}>
Головна
</li>