I have a form that I am trying to access when pressing a button on my navbar. I have a base template file that consists of the code for the navbar and background color and I have another template that has the code for the form. The navbar button seems to work every time I remove the {% extends 'base.html' %} but only the form shows up. I want to be able to extend the base template so the navbar background color and nav bar show up too but this is not working.
code snippet from base.html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">TweetyBird</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/search">Search by Tweet <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Twitter Bot</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">To be added</a>
</li>
</ul>
</div>
</nav>
search.html
% extends 'base.html' %}
{%load static%}
<body>
<container >
<form action="/searchoutput/" method="post">
{% csrf_token %}
Input Text:
<input type="text" name="param" required> <br><br>
{{data_external}}<br><br>
{{data}}
<br><br>
<input type="submit" value="Check tweet">
</form>
</container>
</body>
snippet from url.py
path('', views.noreq), #shows the html template for the website
path('search/',views.search),
path('searchoutput/',views.searchoutput),
snippet from views.py
def noreq(request):
#when no request is made the html is rendered
return render(request,'base.html')
################The method above is required############################################
def search(request):
return render(request,'search.html')
Alright, you have the right idea but are implementing it a bit wrong let me explain.
base.html
In your base html you want to put everything that every single page will share this normally includes: {% load static %}, <!DOCTYPE html>, <html>, <head>, <body>, <footer>, etc Take a look below for what you base html would sort of look like.
{% load static %}
{% load employee_filters %}
<!DOCTYPE html>
<html lang="en">
<header>
Site Header
</header>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">TweetyBird</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/search">Search by Tweet <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Twitter Bot</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">To be added</a>
</li>
</ul>
</div>
</nav>
{% block content %}{% endblock %}
</body>
</html>
That {% block content %}{% endblock %} is the key. That is where the code will be placed that it another file extends. So in your search.html you would have what is below:
{% extends 'base.html' %}
{% block content %}
<form action="/searchoutput/" method="post">
{% csrf_token %}
Input Text:
<input type="text" name="param" required> <br><br>
{{data_external}}<br><br>
{{data}}
<br><br>
<input type="submit" value="Check tweet">
</form>
{% endblock %}
Think of it this way, you are saying that search.html is extending from base.html and then you are replacing the {% block content %} with whatever you have in that new file.
There are a couple of issues here. For one, I noticed you don't have the opening bracket on % extends 'base.html' %} in search.html but I'm not sure if that was just a pasting error here.
Secondly, you have no content blocks. You need to specify where in your base.html the content from extended templates will go. For instance:
example base.html:
<html>
<head>
<title>My Site</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">TweetyBird</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/search">Search by Tweet <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Twitter Bot</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">To be added</a>
</li>
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
</body>
</html>
In the template that extends base.html:
{% extends 'base.html' %}
{%load static%}
{% block content %}
<container >
<form action="/searchoutput/" method="post">
{% csrf_token %}
Input Text:
<input type="text" name="param" required> <br><br>
{{data_external}}<br><br>
{{data}}
<br><br>
<input type="submit" value="Check tweet">
</form>
</container>
{% endblock %}
More documentation: https://docs.djangoproject.com/en/3.0/ref/templates/language/
Related
views.py
from django.shortcuts import render
from ecommerceapp.models import Product
from django.db.models import Q
def searchResult(request):
products=None
query=None
if 'q' in request.GET:
query = request.GET.get('q')
products=Product.objects.all().filter(Q(name__contains=query) | Q(desc__contains=query))
return render(request,'search.html',{'query':query,'products':products})
In views.py I have imported a model named 'Product' of another application.
search.html
{% extends 'base.html' %}
{% load static %}
{% block metadescription %}
Welcome to FASHION STORE-Your Beauty
{% endblock %}
{% block title %}
Search-FASHION STORE
{% endblock %}
{% block content %}
<div>
<p class="text-center my_search_text">You have searched for :<b>"{{query}}"</b></p>
</div>
<div class="container">
<div class="row mx_auto">
{% for product in products %}
<div class="my_bottom_margin col-9 col-sm-12 col-md-6 col-lg-4" >
<div class="card text-center" style="min-width:18rem;">
<img class="card-img-top my_image" src="{{product.image.url}}" alt="{{product.name}}" style="height:400px; width:100%;">
<div class="card_body">
<h4>{{product.name}}</h4>
<p>₹{{product.price}}</p>
</div>
</div>
</div>
{% empty %}
<div class="row mx_auto">
<p class="text-center my_search_text">0 results found.</p>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
navbar.html
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown {% if 'ecommerceapp' in request.path %} active {% endif %} ">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Shop
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{% url 'ecommerceapp:allProductCategory' %}">All Products</a></li>
{% for cat in links %}
<li><a class="dropdown-item" href="{{cat.get_url}}">{{cat.name}}</a></li>
{% endfor %}
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href=""><i class="fa fa-shopping-cart"></i></a>
</li>
</ul>
<form class="d-flex" action="{% url 'search_app:searchResult' %}" method="get">
{% csrf_token %}
<input class="form-control me-2" type="search" placeholder="Search" name="q" aria-label="Search">
<button class="btn btn-outline-success" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</nav>
When I'm searching using search bar, not getting the correct results. When giving the word completely, correct results are getting.
Example: When I type x in the search bar, it give me the results 'shirt' instead of giving '0 results found'.
Example: When I type x in the search bar, it give me the results 'shirt' instead of giving '0 results found'.
The __contains is used to check whether the field contains given word or not, it is case-sensitive. And using | in Q objects means it is optional and works as OR condition, so maybe it is possible when you type x, the name field doesn't contains x but the field desc contain x that's why you are getting the shirt as instance or else you can simply put the query to Product.objects.filter(Q(name__contains=query)) and .all() only creates the copy of the Queryset so it doesn't require here.
I am having trouble getting my search form to work in Django. When I search anything in the search bar I have set, I get an html page that just has the words Search on it. It's not the html page I set, though. My search template is in my projects templates directory. I am trying to search through my blog posts, and have attached my views and urls code.
This portion of my base template is within a navbar I grabbed from a sample Bootstrap blog template. This is the sample template. I've changed some things within my form.
base.html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
{% load static %}
<!-- Navbar here -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="{% url 'index' %}">ChairBlog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link {% if request.resolver_match.view_name == 'index' %}active{% endif %}" href="{% url 'index' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link {% if request.resolver_match.view_name == 'project_index' %}active{% endif %}" href="{% url 'project_index' %}">Projects </a>
</li>
<li class="nav-item">
<a class="nav-link {% if request.resolver_match.view_name == 'blog_index' %}active{% endif %}" href="{% url 'blog_index' %}">Blog </a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" action="{% url 'search' %}" method="GET">
<input class="form-control mr-sm-2" type="search" name="q" placeholder="Search blog posts...">
<button class="btn my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Jumbotron stuff here -->
<div class="jumbotron d-flex align-items-center" style="margin-top: 56px;">
<div class="container text-center">
{% block jumbo_content %}
{% endblock %}
</div>
</div>
<!-- Main content goes here -->
<div class="container" style="padding-bottom: 200px;">
{% block page_content %}{% endblock %}
</div>
<!-- Footere here -->
<footer style="position: relative;">
<div class= "page-footer bg-dark" style="padding-top: 20px; margin-top: 50px;">
<div class="container" style="display: flex; justify-content: center;">
<div class= "row">
<div class="mb-10 flex-center">
<a class="github" href="https://github.com/ChairMane"><i class="fa fa-github-square fa-2x"></i></a>
</div>
</div>
</div>
<div class="footer-copyright text-center py-3" style="color: white;">Chair Birds Co.</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Nothing within my blocks shows up when I view it. The tags <p>TEST</p> and <p>Is this working?</p> are not showing up. Neither is the block for the jumbo_content. I have set those correctly in my base.html, because they work with my other pages. It's just the search page it doesn't work on.
search.html
{% extends "base.html" %}
{% load static %}
{% block jumbo_content %}
<h1 class="display-4">Search Results</h1>
{% endblock %}
{% block page_content %}
<p>TEST</p>
{% if query %}
{% if results %}
<ul>
{% for post in results %}
<p>Is this working?</p>
<li>
{{ post.title }}, {{ post.body }}
</li>
{% endfor %}
</ul>
{% else %}
<p>Query returned no results.</p>
{% endif %}
{% endif %}
{% endblock %}
app/views.py
...
def search_posts(request):
query = request.GET.get('q', '')
if query:
queryset = (Q(title__icontains=query) | Q(body__icontains=query))
results = Post.objects.filter(queryset).distinct()
else:
results = []
context = {
'results' : results,
'query' : query
}
return render(request, 'search.html', context)
...
app/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.blog_index, name='blog_index'),
path('<int:pk>/', views.blog_detail, name='blog_detail'),
path('<category>/', views.blog_category, name='blog_category'),
path('search/', views.search_posts, name='search'),
]
Here is how the search template is being viewed, I believe. My issues are as shown in the image. The inspector shows nothing within the blocks I've set. I have jumbo_content and page_content, and yet none of what I set within each block shows up.
Can anyone see anything immediately wrong here? I've tried this tutorial as well, and the same thing happens.
EDIT It seems my search_posts(request) function in my views is not even being called when I search something in the search bar. I tried tracebacks, and printing and nothing showed up in my terminal. Am I not correctly calling search_posts(request)?
I finally got my answer. I looked at this post and decided to try something. Apparently, if I change my app/urls.py line from this:
path('search/', views.search_posts, name='search'),
to this:
path('search', views.search_posts, name='search'),
then my whole view works.
Can anyone explain why that is? I had no idea removing a / could help.
I'm having trouble displaying my content with Django in my ecommerce app. This is the base url with only the navigation bar:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/style_store.css' %}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Inicio</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Mi ecommerce</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Inicio<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<form class="form-inline my-4">
<input class="form-control mr-sm-2" type="search" placeholder="Buscá productos" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</ul>
<ul class="navbar-nav">
{% if user.is_authenticated %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ user }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Mi perfil</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Ventas</a>
<a class="dropdown-item" href="#">Compras</a>
</div>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Logueate</a>
</li>
{% endif %}
</ul>
</div>
</nav>
{% block content %}
{% endblock content %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
As you can see, I have the {% block content %} tag so I can extend this website with the homepage. This is home.html:
{% extends 'store/store.html' %}
<h1>HelloWorld</h1>
The issue is that I cannot see "HelloWorld", only the navigation bar from the base html. Any help will be appreciated!
You need to put your content in a block that is defined in the template you are extending for it to render. In this case the content block
{% extends 'store/store.html' %}
{% block content %}
<h1>HelloWorld</h1>
{% endblock content %}
The blocks in the "parent" template define the sections where you can insert content in an extending template, you need to use {% block %} in the extending template to tell the renderer which section you are placing content into. Anything outside of a {% block %} will not be rendered
I am working on my web application using Python and Flask. I have got a navbar and some buttons on it and I would like to hide one of buttons when I am not on the index page. Is that possible? I would like the button "select brand" to be visible only on index.html page.
{% block navbar %}
<nav class="navbar navbar-expand-lg navbar-default fixed-top ">
<div class="container">
<div class="navbar-header">
<button button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="{{ url_for('main.index') }}" title="Mobile phones and accessories">
<img style="max-width:40px; margin-top: -9px;"
src="http://www.logospng.com/images/38/devfest-2016-38885.png" >
</a>
</div>
<div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
{% if current_user.is_authenticated and current_user.admin %}
<li>Add phone</li>
<li>Add brand</li>
{% endif %}
<li class="dropdown">
Select brand <span class="caret"></span>
<ul class="dropdown-menu">
{% for brand in brands %}
<li class="list-group-item">
{{ brand }}
{% endfor %}
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
{% if current_user.is_authenticated %}
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-user"> </span> {{ current_user.username }}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="{{ url_for('auth.logout') }}" >Logout</a></li>
</ul>
</li>
{% else %}
<li><a class="nav-link" href="{{ url_for('auth.login') }}" >Login</a></li>
<li><a class="nav-link" href="{{ url_for('auth.register') }}" >Register</a></li>
{% endif %}
</ul>
<form class="navbar-form navbar-right" method='POST' action="{{ url_for('phones.search') }}">
<div class="form-group">
<input class="search-query form-control" placeholder="Search..." aria-label="Search" type="text" name="search">
</div>
</form>
</div>
</div>
</nav>
{% endblock %}
Create a new variable within your index route and pass that variable into the render_template method of said route. The presence of this variable will determine if the <button> or link within your <nav> should be rendered or not. Since the <nav> will be shared across all other layouts, its HTML code should be put within your base layout, or the layout which all other views are inheriting from.
Something along the lines of:
index route:
#app.route("/")
def index():
# isIndex is the variable we will use to determine
# whether or not to render your navigation link or button
return render_template('index.html', isIndex=True)
base layout file:
<div class="navbar-nav">
{% if isIndex %}
<a class="nav-item nav-link" href="">linkOnlyForIndexPage</a>
{% else %}
<a class="nav-item nav-link" href="">link1</a>
<a class="nav-item nav-link" href="">link2</a>
{% endif %}
</div>
This is exactly what you're already doing with {% if current_user.is_authenticated %} for your navigation links. The reason this works is because the index route is the only route which sets this variable, within your jinja2 templates, so all other routes which render corresponding views will default to false on this conditional check: {% if isIndex %}
Hopefully that helps!
I think this will work.
Set the following on your child pages:
{% set active_page = "index" %}
Then in your base template:
{% if active_page == "index" %}
... button html here
{% endif %}
I'm working on a project using Django(1.11) in which I have created a base.html template in which I have defined all the universal HTML code of my project like required CSS and js files.
But when I extend this template in my child templates it only loads the base template not the content of child template.
Here's what I have tried:
base.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- Favicons -->
<link rel="apple-touch-icon" href="{% static 'images/kit/free/apple-icon.png' %}"/>
<link rel="apple-touch-icon" href="{% static 'images/kit/free/favicon.png' %}"/>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
<link rel="stylesheet" href="{% static 'css/material-kit.css' %}">
{% block title %}
<title> Docrest Web Gui </title>
{% endblock %}
</head>
<body class="signup-page">
<nav class="navbar navbar-color-on-scroll navbar-transparent fixed-top navbar-expand-lg " color-on-scroll="100" id="sectionsNav">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="#">Docrest Gui </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="dropdown nav-item">
<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
<i class="material-icons">apps</i> Components
</a>
<div class="dropdown-menu dropdown-with-icons">
<a href="#" class="dropdown-item">
<i class="material-icons">layers</i> All Components
</a>
<a href="http://demos.creative-tim.com/material-kit/docs/2.0/getting-started/introduction.html" class="dropdown-item">
<i class="material-icons">content_paste</i> Documentation
</a>
</div>
</li>
{% if not user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'users:login' %}">
<i class="material-icons">exit_to_app</i> Login
</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="{% url 'users:signup' %}" target="_blank" data-original-title="Register to Deploy code!">
<i class="material-icons">settings_input_hdmi</i> Signup
</a>
</li>
{% endif %}
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="{% url 'users:signup' %}" target="_blank" data-original-title="Register to Deploy code!">
<i class="material-icons">settings_input_hdmi</i> Dashboard
</a>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="https://www.facebook.com/CreativeTim" target="_blank" data-original-title="Like us on Facebook">
<i class="fa fa-facebook-square"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="https://www.instagram.com/CreativeTimOfficial" target="_blank" data-original-title="Follow us on Instagram">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="page-header header-filter" data-parallax="true" style=" background-image: url('../assets/img/kit/profile_city.jpg'); ">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="title">Your Story Starts With Us.</h1>
<h4>Every landing page needs a small description after the big bold title, that's why we added this text here. Add here all the information that can make you or your product create the first impression.</h4>
<br>
</div>
</div>
</div>
</div>
{% block content %}
{% endblock %}
{% block js %}
<!-- Core JS Files -->
<script src="{% static 'js/core/jquery.min.js' %}"></script>
<script src="{% static 'js/core/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap-material-design.min.js' %}"></script>
<!-- Plugin for Date Time Picker and Full Calendar Plugin -->
<script src="{% static 'js/plugins/moment.min.js' %}"></script>
<!-- Plugin for the Datepicker, full documentation here: https://github.com/Eonasdan/bootstrap-datetimepicker -->
<script src="{% static 'js/plugins/bootstrap-datetimepicker.min.js' %}"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="{% static 'js/plugins/nouislider.min.js' %}"></script>
<!-- Material Kit Core initialisations of plugins and Bootstrap Material Design Library -->
<script src="{% static 'js/material-kit.js' %}"></script>
{% endblock %}
</body>
Here's an example child template signup.html:
{% extends 'base.html' %}
{% block title %}
<title> Signup </title>
{% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-md-10 ml-auto mr-auto">
<div class="card card-signup">
<h2 class="card-title text-center">Register</h2>
<div class="card-body">
<div class="row">
<div class="col-md-5 ml-auto">
<div class="info info-horizontal">
<div class="icon icon-rose">
<i class="material-icons">timeline</i>
</div>
<div class="description">
<h4 class="info-title">Marketing</h4>
<p class="description">
We've created the marketing campaign of the website. It was a very
interesting collaboration.
</p>
</div>
</div>
<div class="info info-horizontal">
<div class="icon icon-primary">
<i class="material-icons">code</i>
</div>
<div class="description">
<h4 class="info-title">Fully Coded in HTML5</h4>
<p class="description">
We've developed the website with HTML5 and CSS3. The client has access to
the code using GitHub.
</p>
</div>
</div>
<div class="info info-horizontal">
<div class="icon icon-info">
<i class="material-icons">group</i>
</div>
<div class="description">
<h4 class="info-title">Built Audience</h4>
<p class="description">
There is also a Fully Customizable CMS Admin Dashboard for this product.
</p>
</div>
</div>
</div>
<div class="col-md-5 mr-auto">
<div class="social text-center">
<button class="btn btn-just-icon btn-round btn-twitter">
<i class="fa fa-twitter"></i>
</button>
<button class="btn btn-just-icon btn-round btn-dribbble">
<i class="fa fa-dribbble"></i>
</button>
<button class="btn btn-just-icon btn-round btn-facebook">
<i class="fa fa-facebook"> </i>
</button>
<h4> or be classical </h4>
</div>
<form class="form" method="" action="">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">face</i>
</span>
</div>
<input type="text" class="form-control" placeholder="First Name...">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">mail</i>
</span>
</div>
<input type="text" class="form-control" placeholder="Email...">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">lock_outline</i>
</span>
</div>
<input type="password" placeholder="Password..." class="form-control"/>
</div>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked>
<span class="form-check-sign">
<span class="check"></span>
</span>
I agree to the
terms and conditions.
</label>
</div>
<div class="text-center">
Get Started
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
and here are the settings for Templates:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
Here's how this template is rendered:
class SignUpView(generic.CreateView):
form_class = forms.SignUpForm
template_name = 'users/signup.html'
success_url = reverse_lazy('users:login')
form_valid_message = 'User has been created successfully!'
form_invalid_message = 'Something wrong'
The child template is rendered from a default login view of Django auth, but it only displays the content of the base template, the child template's contents why not loading?
I already have taken a look at all of related question but couldn't find any solution.
I don't think the templating language will like:
{% block head %}
{% block title %} {% endblock %}
{% endblock %}
Try replacing it with the following in both files.
{% block title %} {% endblock %}
Also, you shouldn't need {% load staticfile %} if you have {% load static %}