I have this twig template:
{% block javascripts %}
{% javascripts '#AibFrontendBundle/Resources/public/js/update.js' %}
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js'></script>
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}
{% endblock %}
{% block content %}
<div id="contents">
{{ contents|raw }}
</div>
<form action="{{ path('homepage') }}" method="post">
{{ form_widget(form) }}
<input type="submit" />
</form>
{% endblock %}
It shows correctly the content.
But if I add this line below at the begining
{% extends 'AibFrontendBundle::layout.html.twig' %}
It shows layout.html.twig's content but the content I mentioned above is not showed any more..
How to show that content again?
Your layout.html.twig template should include something similar to the following:
{% block content %}some optional default content here{% endblock %}
which will be replaced by whatever you supply in your page template:
mypage.html.twig:
{% block content %}
This will appear in layout.html.twig where I specified the above block
{% endblock %}
See the Twig documentation for further details
Related
Is it okay to have multiple base.html templates in django? For instance, I would have one template that would extend from base_one.html and another template extending from base_two.html. For example, this is one of the templates:
{% extends "base_one.html" %}
{% block content %}
{% endblock content %}
and this is another template:
{% extends "base_two.html" %}
{% block content %}
{% endblock content %}
Well not only two you can keep how much you want just with different names and you have to extend on different templates but yeah you can easily keep parts of the base template and extend in one according to your needs.
I'm adding three files here 1-base.html 2-base-comments.html 3-post-template.html
Here is a little expansion of my answer
Suppose this file name is base.html
# base.html
<html>
<head>
<title>Foo</title>
</head>
<body>
<header>
{% block header %}
<h1>Lorem ipsum</h1>
{% endblock %}
</header>
{% block content %}{% comment %}A wrapper around content is needed{% endcomment %}
<div class="page-content">
{% block page_content %}{% comment %} Filled in by your page templates {% endcomment %}
{% endblock %}
</div>
{% endblock %}
<footer>
{% block footer %}
<em>♥ joar</em>
{% endblock footer %}
</footer>
</body>
</html>
here is another file base-comments.html which extends the previous file.
# base-comments.html
{% extends 'base.html' %}
{% block content %}
<div class="page-content">
{% block page_content %}{% comment %} Filled in by your page templates {% endcomment %}
{% endblock %}
{% block comments %}
<footer>
<h2>Comments</h2>
<script>loadCommentsEtc()</script>
</footer>
{% endblock %}
</div>
{% endblock %}
And here is the last file which extends the 2nd base file which already extends the 1st base file 3-post-template.html
# post-template.html
{% extends 'base-comments.html' %}
{% block page_content %}
<article>
<h1>{{ post.title }}</h1>
<div class="post-body">
{{ post.body }}
</div>
</article>
{% endblock %}
I hope this works and clears your doubts.
Thanks for the question.
I'm not seeing an error when template inheritance seems to fail. I don't see content from the child template but I don't see a 'TemplateNotFound' error. If I change the path to the parent template to 'notthefilename.html' I still don't see an error. Is there a way to make template inheritance fail noisily? I have no idea why this is not working even though I have a similar inheritance in a adjacent folder that is working as expected.
generic_create.html The text 'hello2' is rendering.
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div style= "padding-top: 30px">
<form method="post">{% csrf_token %}
{% if model_name == 'TransactionsTable' %}
<div>
{% block transactions_create %}
hello2
{% endblock transactions_create %}
</div>
{% else %}
{{ form |crispy }}
{% endif %}
<div id="container">
<input type="submit" class="btn btn-default" value="Save">
Cancel
<div>
</form>
</div>
{% endblock content %}
transactions_create.html - The content 'Hello1' is not rendering
{% extends "generic_create.html" %}
{% load static %}
{% block transactions_create %}
Hello1
{% endblock transactions_create %}
Thanks to #Daniel Roseman's comment I realized I was performing the inheritance backwards. I was also over-complicating things. Using the include tag I was able to perform the sort of inheritance I was hoping to achieve very easily.
generic_create.html
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div style= "padding-top: 30px">
<form method="post">{% csrf_token %}
{% if model_name == 'TransactionsTable' %}
<div>
{% include "transactions_create.html" %} #NOTE: Here I removed the block and added 'include'.
</div>
{% else %}
{{ form |crispy }}
{% endif %}
<div id="container">
<input type="submit" class="btn btn-default" value="Save">
Cancel
<div>
</form>
</div>
{% endblock content %}
transactions_create.html
Hello1 #removed all of the extend and 'block' code. 'include' just renders the html directly.
That's it! 'include' really simplified things.
in my html file i use {{ form.media }} tag but not see included JavaScript files in chrome browser
{% extends 'base.html' %}
{# Don't forget that one ! #}
{% load static %}
{% block content %}
<div>
<form action="" method="post">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" />
</form>
</div>
{% endblock %}
{% block footer %}
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
{{ form.media }}
{% endblock %}
Can someone help me ?
I'm trying to build a authentication based view! My html code is:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static "css/base.css" %}" rel="stylesheet">
</head>
<body>
<div id="header">
<span class="logo">Bookmarks</span>
{% if request.user.is_authenticated %}
<ul class="menu">
<li {% if section == "dashboard" %}class="selected"{% endif %}>My dashboard</li>
<li {% if section == "images" %}class="selected"{% endif %}>Images</li>
<li {% if section == "people" %}class="selected"{% endif %}>People</li>
</ul>
{% endif %}
<span class="user">
{% if request.user.is_authenticated %}
Hello {{ request.user.first_name }}, Logout
{% else %}
Log-in
{% endif %}
</span>
</div>
</body>
</html>
Here the line:
request.user.first_name
supposed to show the logged in username according to Django By Example book.
also when I'm changing the password in firefox it shows this massage:
But in chrome it works fine in changing password, although the name is not showing in both browser!
My Login page html code is :
{% extends "base.html" %}
{% block title %}Log-in{% endblock %}
{% block content %}
<h1>Log-in</h1>
{% if form.errors %}
<p>
Your username and password didn't match.
Please try again.
</p>
{% else %}
<p>Please, use the following form to log-in:</p>
{% endif %}
<div class="login-form">
<form action="{% url 'login' %}" method="post">
{{ form.as_p }}
{% csrf_token %}
<input type="hidden" name="next" value="{{ next }}" />
<p><input type="submit" value="Log-in"></p>
</form>
</div>
{% endblock %}
I'm stuck really bad :(
This is silly! The problem was I didn't set the user's firstname!
But the second problem is still happening!
i had same issue, but after some research, i found this solution
so try to edit the variable from {{ request.user.first_name }} TO {{ request.user.username}}, so is username not firstname.
I have three Django templates:
base.html:
user_links.html
user_detail.html
I want user_links.html to extend base.html. Next, I want user_detail.html to extend user_links.html and base.html.
Here's base.html:
<head>
<title>Cool App</title>
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/main.css" />
</head>
<body>
<h1>Cool App</h1>
<div class="navbar">
<p>
HOME |
{% if user.is_authenticated %}
LOGOUT
{% else %}
LOGIN
{% endif %}</p>
{% block content %}
{% endblock %}
{% block pagination %}
{% endblock %}</div>
Here's user_links.html:
{% extends "base.html" %}
Yellow
Pink
Green
{% block content %}
{% endblock %}
And here's user_detail.html
{% extends "user_links.html" %}
{% block content %}
<h2>{{ object.username }}'s Profile</h2>
{% if object.userprofile.bio %}
{{ object.userprofile.bio }}
{% endif %}
{% endblock %}
So when the browser renders user_detail.html, I want it to (i) show the stylesheet and navigation links from base.html, (ii) show the word Yellow, Pink, Green from user_links.html, (iii) and show the user's username and bio. But (ii) is not being rendered at all, though (i) and (iii) are correctly rendering.
How should the templates be set up so that I see (i), (ii) and (iii) in user_detail.html? Please advise.
Note: all three templates reside in the same directory. I'm on Django 1.5
If you extends a base.html template, no content not surrounded by {% block %} will be rendered at all.
You could create additional {% block precontnet %}{% endblock %} in base.html, and wraps Pink/Yellow/Red in user_links.html
Or you can put Pink/Yellow/Red in {% block content %} if user_links.html and use {{ block.super }} in user_detail.html
links.html
{% extends "base.html" %}
{% block content %}
Yellow
Pink
Green
{% endblock %}
user_detail.html
{% extends "user_links.html" %}
{% block content %}
{{ block.super }}
<h2>{{ object.username }}'s Profile</h2>
{% if object.userprofile.bio %}
{{ object.userprofile.bio }}
{% endif %}
{% endblock %}
Place div after </p> in base.html
<h1>Cool App</h1>
<div class="navbar">
<p>
HOME |
{% if user.is_authenticated %}
LOGOUT
{% else %}
LOGIN
{% endif %}</p>
</div>
Try this in user_links.html
{% extends "base.html" %}
{% block content %}
Yellow
Pink
Green
{% endblock %}