I'm getting issues when index.html inherits from base.html Jinja2 is duplicating content.
I'm using the example code from http://jinja.pocoo.org/docs/dev/templates/#template-inheritance but the content in the browser is duplicated completely. I don't know if it's because of jinja environment setting mistake, extends tag or something like that.
base.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{% block head %}
<link rel="stylesheet" href="style.css" />
<title>{% block title %}{% endblock %} - My Webpage</title>
{% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
{% block footer %}
© Copyright 2008 by you.
{% endblock %}
</div>
</body>
index.html
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}
<style type="text/css">
.important { color: #336699; }
</style>
{% endblock %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome on my awesome homepage.
</p>
{% endblock %}
This is that I'm getting ( the same html code twice ):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" />
<title>Index - My Webpage</title>
<style type="text/css">
.important { color: #336699; }
</style>
</head>
<body>
<div id="content">
<h1>Index</h1>
<p class="important">
Welcome on my awesome homepage.
</p>
</div>
<div id="footer">
© Copyright 2008 by you.
</div>
</body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" />
<title>Index - My Webpage</title>
<style type="text/css">
.important { color: #336699; }
</style>
</head>
<body>
<div id="content">
<h1>Index</h1>
<p class="important">
Welcome on my awesome homepage.
</p>
</div>
<div id="footer">
© Copyright 2008 by you.
</div>
</body>
Any idea? Thanks so much.
UPDATE!!
Here my handler. I'm using webapp2.
class LandingHandler(webapp2.RequestHandler):
def get(self):
template = settings.JINJA_ENVIRONMENT.get_template('index.html')
self.response.write(template.render(dict()))
UPDATE 2!!
In my settings.py
JINJA_ENVIRONMENT = jinja2.Environment(
loader=jinja2.FileSystemLoader(os.path.join(os.path.dirname(__file__),'templates')),
extensions=['jinja2.ext.autoescape'],
autoescape=True)
It's something odd about Jinja (& Bootstrap). It takes into account html comments as well, before it gives out warnings. So if you have any comments on that file, probably a commented out {% block content %} ... {% endblock %} section, then remove it completely from there and it will work.
Related
*I am having trouble in my index.html file. {% extends 'base.html' %} works. But everything b/w
{% block content %}{% endblock content %} doesn't execute. Here are my files.
views.py:-*
from django.shortcuts import render
def index(request):
return render(request, 'main/index.html')
base.html:-
<!doctype html>
{%load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<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.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<title>To Do App</title>
</head>
<body>
<div>
<nav class=" navbar fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="/">To Do App</a>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>
</div>
</body>
</html>
index.html:-
{% extends 'base.html'%}
{% block content %}
<div class="row">
<div class="col">
<h2>Add Item</h2>
</div>
</div>
{% endblock content %}
All it shows is a navbar of dark color saying To Do App
I also tried adding advanced things like form but it didn't work so then i added this heading saying Add Item. And guess what it doesn't work
When I inspect elements in browser I can see your Heading "Add Item". The only problem was that the whole <div class="container">...</div> was hidden behind nav bar. And the reason was CSS.
Adding something like margin-top: 56px to .container may solve the problem.
Based on documentation you must use only 'endblock' tag when you are closing tag.So you must replace {% endblock content %} with {% endblock %}.
So my app has the following structure: base.html, which contains the nav and the links to the stylesheets and the home.html file, which loads the nav via extends. However, i can't really modify the css inside my home.html file, any suggestions whats wrong?
base.html:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>App</title>
<link rel="shortcut icon" href="{% static 'img/favicon.png' %}">
<link rel="stylesheet" href="{% static 'css/app.css' %}">
...## navbar etc.
<div id="body">
<div class="container">
{% block page %}
{% endblock %}
</div>
</div>
home.html:
{% extends 'base.html' %}
{% load staticfiles %}
{% block page %}
<div class="row">
<div class="col-md-12">
<img src="{% static 'img/banner.gif'%}" class="banner">
</div>
{% endblock %}
As you can see in the base.html file, i load the app.css file via static method.
However, changing for example the banner class in the home.html isn't working at all:
#body .banner {
width: 100%;
margin-bottom: 150px;
}
No errors in the terminal / console. The app.css file works for the base.html by the way.
Try ctrl + F5, in django you have to reload your cache after making changes to static files.
when i use static file in my django app,i found a strange problem : that when i use body{ } in the css file can change the body's attributes ,when i use the div's id or class name ,the css file doesn't work on the div's attributes like this:
the base.html:
<!DOCTYPE html>
{% load staticfiles %}
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %} Food {% endblock title %}</title>
<link rel="stylesheet" href="{% static "style/index.css" %}" media="screen"/>
</head>
<body>
<div class="sidebar">
{% block sidebar %}
{% endblock %}
</div>
<div class="content">
{% block content %}
<i>Delicious</i>
{% endblock %}
</div>
</body>
</html>
and the index.html:
{% extends "blog/base.html" %}
{% block title %} Food title{% endblock title %}
{% block content %}
<div class="body-head">
</div>
<div class="body-middle">
</div>
<div class="body-foot">
</div>
{% endblock content %}
the index.css:
body {
height: 100%;
width: 100%;
background-color: brown;
}
.sidebar{
width: 100%;
height: 10%;
background-color: seagreen;
}
.body-head {
width: 100%;
height: 50%;
background-color: sandybrown;
}
only the body{ }can be effect.and others like .sidebar{ } and .body-head{ } do no effect.
Your sidebar block and .body-head div are empty.
Is this your whole page or just an example?
If you can see body styles, I suppose the css file is well referenced.
I'm trying to learn Django using the online version of the "Test-Driven Development with Python" book. I have a base.html file and home.html and list.html file. Now, CSS works fine for home.html, but not at all for list.html! They both extend their CSS from the base.html file, so why is there a problem? Here are the files:
base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>To-Do lists</title>
<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>{% block header_text %}{% endblock %}</h1>
<form method="POST" action="{% block form_action %}{% endblock %}">
<input name="item_text" id="id_new_item" placeholder="Enter a to-do item"/>
{% csrf_token %}
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
{% block table %}
{% endblock %}
</div>
</div>
</div>
</body>
</html>
home.html:
{% extends 'base.html' %}
{% block header_text %}Start a new To-Do list{% endblock %}
{% block form_action %}/lists/new{% endblock %}
list.html:
{% extends 'base.html' %}
{% block header_text %}Your To-Do list{% endblock %}
{% block form_action %}/lists/{{ list.id }}/add_item{% endblock %}
{% block table %}
<table id="id_list_table">
{% for item in list.item_set.all %}
<tr><td>{{ forloop.counter }}: {{ item.text }}</td></tr>
{% endfor %}
</table>
{% endblock %}
It's probably something silly, but anyway, thank you!
Instead of using hard coded
CSS links
<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
Use Django Template Tags:
Or you can also use below if you list.html is rendering yoursite.com/list/
<link href="../static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
if yoursite.com/something/list/ then use;
<link href="../../static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
I'm having a problem with displaying the contents within the block tags of a child template. I have a base.html and a dash.html which extends the base. When I go to the dash.html page the base.html is extended but the contents set within the block tags of dash.html do not show up. So I get the same thing when I go base.html and dash.html.
Here is my code:
base.html
<!DOCTYPE HTML>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>SCV Discount</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<link rel="stylesheet" href="static/css/main.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>
</head>
<body>
<!-- Main Header -->
<div id="top">
<div id="header">
<div id="logo"></div>
{% block head %}{% endblock %}
</div>
</div>
<!-- Middle -->
<div id="mid">
{% block mid %}{% endblock %}
</div>
<!-- Content -->
<div id="analytics-content">
{% block main %}{% endblock %}
</div>
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="static/js/libs/jquery-1.6.2.min.js">\x3C/script>')</script>
<script src="static/js/libs/select.js"></script>
<script src="static/js/main.js"></script>
</body>
</html>
dash.html
{% extends 'base.html' %}
{% block head %}
<p class="dashboard-title">Elephant Bar</p>
<p class="cp_badge round">Control Panel</p>
{% endblock %}
{% block mid %}
{% include 'modules/meters.html' %}
{% include 'modules/client_ctl.html' %}
{% endblock %}
{% block main %}
{% include 'modules/history.html' %}
{% endblock %}
view.py
from django.shortcuts import render_to_response, get_object_or_404
from django.http import HttpResponse, HttpResponseRedirect
from django.core.urlresolvers import reverse
from django.template import RequestContext
import datetime
def index(request):
return render_to_response('base.html', RequestContext(request))
def dash(request):
return render_to_response('dash.html', RequestContext(request))
Hope that is enough information. Please let me know what other info I can provide. Thanks in advance. I appreciate it.
I just copied & pasted this code into a new project and it is working for me. What does your urls.py look like? Is it possible you are sending your dash url to the index view? Here is the quick urls.py that I wrote to get this up and running:
from django.conf.urls.defaults import *
import views
urlpatterns = patterns('',
(r'^index/', views.index),
(r'^dash/', views.dash),
)
When you view dash.html in your browser (through whatever URL you want to be tied to the dash view), how do you know that it is extending base.html if you do not see any of code that is specific to dash.html?