Possibly I'm misunderstanding the inheritance of templates in Django, but why doesn't the below code work? Both child templates are inheriting from the parent template with different block names.
base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>test</h1>
{% block index %}{% endblock %}
{% block nav %}{% endblock %}
</body>
</html>
index.html
{% extends 'blog/base.html' %}
{% block index %}
<h1>This is the index.html page</h1>
{% endblock %}
nav.html
{% extends 'blog/base.html' %}
{% block nav %}
<h1>This is the nav.html</h1>
{% endblock %}
I am accessing this template by:
urls.py
urlpatterns = [
path('admin/', admin.site.urls),
path('blog/', include('blog.urls'))
]
blog/urls.py:
urlpatterns = [
path('', views.home, name='home'),
path('nav/', views.home, name='nav')
]
blog/views.py
def home(request):
return render(request, 'blog/index.html')
Using the URL of:
localhost:8000/blog
HTML Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>test</h1>
<h1>This is the index.html page</h1>
</body>
</html>
I'm trying to grasp the concept of using multiple blocks so that I can place them on the templates that I need.
You can not render two views in one HTTP request. To include content from a different template, simply use include for the nav.html if its is not going to be called independently.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>test</h1>
{% include 'nav.html' %}
{% block index %}{% endblock %}
</body>
</html>
Related
I was following one chatbot tutorial using Django, I came across this error:
frontpage.html
{% extends 'core/base.html' %}
{% block title %}Welcome | {% endblock %}
{% block content %}
<div class="p-10 lg:p-20 text-center">
<h1 class="text-3xl lg:text-6xl text-white">Djangochat</h1>
</div>
{% endblock %}
base.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> {% block title %}{% endblock %}Django </title>
<script src="https://cdn.tailwindcss.com" ></script>
<body class="bg-teal-600">
<nav class="flex items-center justify-between px-4 py-6 bg-teal-800">
<div>
Djangochat
</div>
<div class="flex items-center space-x-4">
Log in
Sign up
</div>
</nav>
{% block content %}
{% endblock %}
</head>
</body>
</html>
Output
enter image description here
So, {% block title %} {% end block %} is not working, kindly help.
Change the title to this on base.html
<title>{% block title %}my base page{% endblock %}</title>
Then go to frontpage.html or any page you want to
<title>{% block title %}my front page{% endblock %}</title>
As mentioned in the official documentation The Django template language
EDIT
You're mistaken about the form of HTML the close tag of the head in the body
Try this:
<!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.0">
<title> {% block title %}{% endblock %}Django </title>
<script src="https://cdn.tailwindcss.com" ></script>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
I'm making my first Django app and I'm trying to set up my signup.html page while extending my base.html. The URL I have configured works, however it only pulls through the base.html template. I've checked the view, url and the signup.html template and I'm not sure what I'm getting wrong.
signup.html:
{% extends './layout/base.html' %}
{% load static %}
{% block content %}
<h1>Signup</h1>
{% endblock content %}
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.0">
{% load static %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&family=Oswald&display=swap" rel="stylesheet">
<link rel="icon" href="{% static 'favicon.ico' %}">
<a target="_blank" href="https://icons8.com/icon/DpuVIej1M9Br/health">Health</a> icon by <a target="_blank"
href="https://icons8.com">Icons8</a>
<title>Your Health Now</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
urls.py:
from django.urls import path
from django.contrib.staticfiles.storage import staticfiles_storage
from django.views.generic.base import RedirectView
from . import views
app_name = 'HealthHub'
urlpatterns = [
path('signup/', views.signup, name='signup'),
path('favicon.ico', RedirectView.as_view(url=staticfiles_storage.url("favicon.ico")))
]
views.py:
from django.shortcuts import render
def signup(request):
return render(request, 'HealthHub/signup.html')
You should also define content block in base.html, so:
base.html:
...
<body>
{% block content %}
<h1> Hello World</h1>
{% endblock content %}
</body>
...
Then try it in signup.html, it will change content block to SignUp in h1 tag.
In base.html you should add an empty block where your other pages' HTML code will appear, it should be like this if you want the content ("Signup" h1) to appear under "Hello, world!":
base.html:
<body>
<h1>Hello, world!</h1>
{% block content %}
{% endblock content %}
</body>
I need to change the title of base.html based on rendered page in the
{% block content %}
You have to add first the "Block Title" on 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.0">
<title>My app - {% block title %}{% block title %}</title>
</head>
<body>
{% block content %}{% block title %}
</body>
</html>
and then you can change it when you call it
{% extends 'base.html' %}
{% load static %}
{% block title %}My new title{% endblock title %}
{% block content %}
<p>My new content</p>
{% endblock content %}
I'm trying to inherit a base.html template to another one, but the thing is that when I extend it, it only shows the base.html but it doesn't show the block content, here's the code.
from django.contrib import admin
from django.urls import path
from app1 import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.register, name = "register")
]
from django.shortcuts import render
# Create your views here.
def register(request):
return render(request, 'app1/register.html')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<h1>lalala</h1>
</body>
</html>
{% extends "app1/base.html" %}
{% block content %}
<ol>
<li>hola</li>
<li>hola</li>
<li>hola</li>
</ol>
{% endblock %}
The thing is that it doesn't show the ol, it only shows the h1 from the base.html
My webpage just prints out "{% extends 'base.html'% }". I'm wanting it to just print out the header "Template".
Both html files are in templates and the py file is one directory outside of that.
app.py:
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def index():
return render_template('index.html')
if __name__ == "__main__":
app.run(debug=True)
index.html:
{% extends 'base.html' %}
{% block head %}
{% endblock %}
{% block body %}
<h1>Template</h1>
{% endblock %}
base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
{% block head %}{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>