I have a blog app and something is really bogging me. I have a base.html template that I extend in every template of my views and that works perfectly, just one of the views, which is the one that only shows the blog post and not the rest of the posts, doesn't extend the base.html even though I have the {% extends 'base.html'%} just as in every other template and everything else basically the same. Also static files aren't loading, even though I load them just as in every other template ..
base.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}style.css">
<link rel="shortcut icon" href="static/favicon.ico" />
<meta charset="utf-8">
<title>
{% block title %}{% endblock %}
</title>
</head>
<p class="header">Blog</p>
<body background="static/landscape.jpg">
<div class="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
Other template(works):
{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}Blog {% endblock %}
{% block content %}
{% for post in posts %}
<div class="post">
<h1>
<a class ="title" href="{{post.get_absolute_url}}">
{{post.title}}
</a>
</h1>
<p>{{post.content}}</p>
<hr>
</div>
{% endfor %}
{% endblock %}
Specific template(doesn't work):
{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}{{post.title}}{% endblock %}
{% block content %}
<article>
<header>
<h1 style="font-size:40px;"> {{post.title}} </h1>
<p>{{post.content|safe}}</p>
<p class="date">
Posted on
<time datetime="{{post.created|date:"c"}}">
{{post.created|date}}
</time>
</p>
</header>
</article>
<hr>
{% endblock %}
I'd be very thankful if you can discover anything I can't ... thanks.
This really sounds like a path issue to me. Try adding a / to your css and background paths, for example: <body background="/static/landscape.jpg"> and see if that makes a difference.
Related
I'm using Django but for some reason the <h2> tag displays article.title with no problem but the <p> tag won't display anything - even simple text.
{% extends 'base_layout.html' %}
{% block content%}
<h1>Articles List</h1>
<div class="articles">
{% for article in articles %}
<div class="article">
<h2>{{ article.title}}</h2>
<p>TEST TEXT</p>
<p>{{ article.date }}</p>
</div>
{% endfor %}
</div>
{% endblock %}
the base_layout.html is
{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carpe Nocturn</title>
<link rel="stylesheet" href="{% static 'styles.css' %}">
</head>
<body>
<header class="wrapper">
<h1><img src="{% static 'logo.png' %}" alt="Carpe Nocturn" /></h1>
</header>
<div class="wrapper">
{% block content %}
{% endblock %}
</div>
</body>
</html>
Hi guys I am studying django framework using "django by example" book. The problem I am facing is that the template language does not work even I copy and pasted source code from book and/or github.
A blog application that has post model and is inside the mysite project.
You can see the code in picture and the result too:
Inside blog\templates\blog .
blog\templates\blog\base.html
<!-- its base.html -->
{% load staticfiles %}
<!DOCTYPE HTML>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static "css/blog.css" %}" rel="stylesheet">
</head>
<body>
<div id="content">
{% block content %}
{% endblock %}
</div>
<div id="sidebar">
<h2>My blog</h2>
<p>This is my blog.</p>
</div>
</body>
</html>
Its the list that extends base.html and located in blog\template\blog\post:
{% extends "blog/base.html" %}
{% block title %}My Blog{% endblock %}
{% block content %}
<h1>My Blog</h1>
{% for post in posts %}
<h2>
<a href="{{ post.get_absolute_url }}">
{{ post.title }}
</a>
</h2>
<p class="date">
Published {{ post.publish }} by {{ post.author }}
</p>
{{ post.body|truncatewords:30|linebreaks }}
{% endfor %}
{% endblock %}
Here is views.py
from django.shortcuts import render, get_list_or_404
from .models import Post
def post_list(request):
posts=Post.published.all()
return render(request,'blog/post/list.html',{'posts':posts})
def post_detail(request, year, month, day, post):
post=get_list_or_404(Post, slug=post,
status='published',
publish__year=year,
publish__month=month,
publish__day=day)
return render(request,'blog/post/detail.html',
{'post':post})
Everything was working fine including the title until I went to add an icon in. Upon manually creating the <head> and calling {{ super() }} to bring in Bootstrap's black magic, the title now displays above the navigation bar.
base.html
{% extends "bootstrap/base.html" %}
{% block head %}
{{ super() }}
{% block title %}{% block page_name %}{% endblock %} - MyFlask{% endblock %}
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
{% endblock %}
<body>
{% block navbar %}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MyFlask</a>
</div>
</div>
</nav>
{% endblock %}
</body>
index.html
{% extends "base.html" %}
{% block page_name%}Index{% endblock %}
When you use the super() function in a block, you are adding new contents to that block instead of replacing the original content. So when you called super() in the head block, Jinja2 inserted the head block's content from the bootstrap/base.html:
<head>
{%- block head %}
<title>{% block title %}{% endblock title %}</title>
{%- block metas %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{%- endblock metas %}
{%- block styles %}
<!-- Bootstrap -->
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
{%- endblock styles %}
{%- endblock head %}
</head>
After that you added a new title block, so now you have two of them, and that is the problem.
The solution is easy, don't define a new head block in base.html, just override the title block, and append your favicon lines to the styles:
{% extends "bootstrap/base.html" %}
{% block title %}{% block page_name %}{% endblock %} - MyFlask{% endblock %}
{%- block styles %}
{{ super() }}
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
{% endblock %}
{% block navbar %}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MyFlask</a>
</div>
</div>
</nav>
{% endblock %}
I suspect this doesn't answer your question directly, but perhaps a better way of achieving this outcome is to pass in the page title from the view.
base.html
{% block title %}
{% if title %}
{{title}} - MyFlask
{% else %}
MyFlask
{% endif %}
{% endblock %}
views.py
#app.route('/', methods=['GET'])
def index():
return render_template("index.html", title='Index')
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 followed the Django "first app" tutorial, and now I am wondering how I could write templates that the whole site will use. I can write the templates for each view, but how do I write a template that will be on every page and then include the 'sub templates' in say a 'content block'?
See the Template Inheritance section of the Django template docs.
Basically, you create one template that is the "base":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>{% block title %}My amazing site{% endblock %}</title>
</head>
<body>
<div id="sidebar">
{% block sidebar %}
<ul>
<li>Home</li>
<li>Blog</li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
</html>
and save it as (for example) "base.html" in your template directory, then each specific page template looks like:
{% extends "base.html" %}
{% block title %}My amazing blog{% endblock %}
{% block content %}
{% for entry in blog_entries %}
<h2>{{ entry.title }}</h2>
<p>{{ entry.body }}</p>
{% endfor %}
{% endblock %}
Long story short, you should write a base template and then extend this template. This is called template inheritance and is well explained here