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 %}
Related
I am trying to apply bootstrap in my shared html file in a Django project and the dropdown list just won't work I tried everything I could cdn local bootstrap and when I click the dropdown list nothing happens.
Below is the template file:
{% load static %}
<!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">
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
<title> {% block title %}{% endblock %} </title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="{% url 'home' %}">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
{% if user.is_authenticated %}
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="userMenu"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
{{ user.username }}
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="userMenu">
<a class="dropdown-item"
href="{% url 'upload'%}">Upload</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}">
Log Out</a>
</div>
</li>
</ul>
{% else %}
<form class="form-inline ms-auto">
<a href="{% url 'login' %}" class="btn btn-outline-secondary">
Log In</a>
<a href="{% url 'signup' %}" class="btn btn-primary ms-2">
Sign up</a>
</form>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<script src="{% static 'js/bootstrap.bundle.js'%}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
Use data-bs-toggle='dropdown', refer from boostrap 5.0 docs and make sure that the user is authenticated.
Try this template code:
{% if user.is_authenticated %}
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="userMenu"
data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
{{ user.username }}
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="userMenu">
<a class="dropdown-item"
href="#">Upload</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
Log Out</a>
</div>
</li>
</ul>
{% else %}
<form class="form-inline ms-auto">
<a href="#" class="btn btn-outline-secondary text-white">
Log In</a>
<a href="#" class="btn btn-primary ms-2 text-white">
Sign up</a>
</form>
{% endif %}
I am making a news website and i have made a model of an image, title, description,url(for clickable image), but the final output is not just showing up and there is no error .
Please also look into image links I have attached The output Screenshot and The admin Page screenshot
Main Code
{% load static %}
{% block content %}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>World Vision</title>
<!-- plugin css for this page -->
<link
rel="stylesheet"
href="{% static 'techworld/assets/vendors/mdi/css/materialdesignicons.min.css' %}"
/>
<link rel="stylesheet" href="{% static 'techworld/assets/vendors/aos/dist/aos.css/aos.css' %}" />
<link
rel="stylesheet"
href="{% static 'techworld/assets/vendors/owl.carousel/dist/assets/owl.carousel.min.css' %}"
/>
<link
rel="stylesheet"
href="{% static 'techworld/assets/vendors/owl.carousel/dist/assets/owl.theme.default.min.css' %}"
/>
<!-- End plugin css for this page -->
<link rel="shortcut icon" href="{% static 'techworld/assets/images/favicon.png' %}" />
<!-- inject:css -->
<link rel="stylesheet" href="{% static 'techworld/assets/css/style.css' %}">
<!-- endinject -->
<!-- Bootstrap -->
<link href="{% static 'techworld/box/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'techworld/box/ionicons/css/ionicons.min.css' %}" rel="stylesheet">
<!-- main css -->
<link href="{% static 'techworld/box/css/style.css' %}" rel="stylesheet">
<!-- modernizr -->
<script src="{% static 'techworld/box/js/modernizr.js' %}"></script>
<link
rel="stylesheet"
href="{% static 'techworld/worldtime/assets/vendors/mdi/css/materialdesignicons.min.css' %}"
/>
<link rel="stylesheet" href="{% static 'techworld/worldtime/assets/vendors/aos/dist/aos.css/aos.css' %}" />
<!-- End plugin css for this page -->
<link rel="shortcut icon" href="{% static 'techworld/worldtime/assets/images/favicon.png' %}" />
<!-- inject:css -->
<link rel="stylesheet" href="{% static 'techworld/worldtime/assets/css/style.css' %}">
<!-- endinject -->
<title>Tech-World</title>
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div class="pre-container">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
<!-- end Preloader -->
<!-- Intro Slide
<div class="container-fluid">
<section class="box-intro">
<div class="table-sell">
<h1 class="box-headline letters rotate-2">
<span class="box-words-wrapper">
<b class="is-visible">Choose What you Read</b>
<b> To see all the latest talks Scroll down</b>
</span>
</h1>
<h5>More than everything You need</h5>
</div>
<div class="mouse">
<div class="scroll"></div>
</div>
</section>
</div>-->
<!-- End Intro slide -->
<div class="container-fluid">
<!-- box header -->
<!-- end box header -->
<!-- box-intro -->
<section class="box-intro">
<div class="table-cell">
<h1 class="box-headline letters rotate-2">
<span class="box-words-wrapper">
<b class="is-visible">design. mbkm</b>
<b> coding.</b>
<b>graphic.</b>
</span>
</h1>
<h5>We always server more than everythin you need </h5>
</div>
<div class="mouse">
<div class="scroll"></div>
</div>
</section>
<!-- end box-intro -->
</div>
<!-- portfolio div -->
<div class="portfolio-div">
<div class="portfolio">
<div class="no-padding portfolio_container">
<!-- single work -->
<div class="col-md-3 col-sm-6 fashion logo">
<a href="single-project.html" class="portfolio_item">
<img src="{% static 'techworld/img/apple.png' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Latest Talks from Apple</span>
<em>Apple TechWorld</em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
<div class="col-md-3 col-sm-6 ads graphics">
<a href="#" class="portfolio_item">
<img src="{% static 'techworld/img/tablet.png' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Latest Productivity Tablets</span>
<em>Latest Tablets</em>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-6 col-sm-12 photography">
<a href="#" class="portfolio_item">
<img src="{% static 'techworld/img/mobile.jpg' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Its all About SmartPhones</span>
<em>Reviews,Latest news and much more</em>
</div>
</div>
</div>
</a>
</div>
<!-- Single workflow area end -->
<!-- Dual workflow area part 2 -->
<div class="col-md-3 col-sm-6 fashion ads">
<a href="#" class="portfolio_item">
<img src="{% static 'techworld/img/samsung.png' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Empty space</span>
<em>Empty space</em>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6 graphics ads">
<a href="#" class="portfolio_item">
<img src="{% static 'techworld/img/samsung.png' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Empty space</span>
<em>Empty space</em>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-6 col-sm-12 photography">
<a href="#" class="portfolio_item">
<img src="{% static 'techworld/img/samsung.png' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Empty space</span>
<em>Empty space</em>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6 graphics ads">
<a href="#" class="portfolio_item">
<img src="{% static 'techworld/img/samsung.png' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Empty space</span>
<em>Empty space</em>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6 graphics ads">
<a href="#" class="portfolio_item">
<img src="{% static 'techworld/img/samsung.png' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Empty space</span>
<em>Empty space</em>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6 graphics ads">
<a href="#" class="portfolio_item">
<img src="{% static 'techworld/img/samsung.png' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Empty space</span>
<em>Empty space</em>
</div>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6 graphics ads">
<a href="#" class="portfolio_item">
<img src="{% static 'techworld/img/samsung.png' %}" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Empty space</span>
<em>Empty space</em>
</div>
</div>
</div>
</a>
</div>
</div>
<!-- end portfolio_container -->
</div>
<!-- portfolio -->
</div>
<!-- end portfolio div -->
<br>
<br>
<br>
<div class="container-scroller">
<div class="main-panel">
<!-- partial:partials/_navbar.html -->
<!-- partial -->
<div class="content-wrapper">
<div class="container">
<div class="row" data-aos="fade-up">
{% for AllProject in allprojects %}
<div class="col-xl-8 stretch-card grid-margin">
<div class="position-relative">
{% if AllProject.url %}
<a href="{{ AllProject.url }}"><img
src="{{ AllProject.image.url }}"
alt="banner"
class="img-fluid" />
</a>
{% else %}
<img src="{{ AllProject.image.url }}" alt="banner" class="img-fluid" />
{% endif %}
<div class="banner-content">
<div class="badge badge-danger fs-12 font-weight-bold mb-3">
global news
</div>
<h1 class="mb-0">{{ AllProject.title }}</h1>
<h1 class="mb-2">
{{ AllProject.description }}
</h1>
<div class="fs-12">
<span class="mr-2">Photo </span>10 Minutes ago
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="row" data-aos="fade-up">
<div class="col-lg-3 stretch-card grid-margin">
<div class="card">
<div class="card-body">
<h2>Category</h2>
<ul class="vertical-menu">
<li>Politics</li>
<li>International</li>
<li>Finance</li>
<li>Health care</li>
<li>Technology</li>
<li>Jobs</li>
<li>Media</li>
<li>Administration</li>
<li>Sports</li>
<li>Game</li>
<li>Art</li>
<li>Kids</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-9 stretch-card grid-margin">
<div class="card">
<div class="card-body">
{% for Flash in flashes %}
<div class="row">
<div class="col-sm-4 grid-margin">
<div class="position-relative">
<div class="rotate-img">
{% if Flash.url %}
<a href="{{ Flash.url }}">
<img src="{{ project.image.url }}" alt="thumb" class="img-fluid" />
</a>
{% else %}
<img src="{{ project.image.url }}" alt="thumb" class="img-fluid" />
{% endif %}
</div>
<div class="badge-positioned">
<span class="badge badge-danger font-weight-bold"
>Flash news</span
>
</div>
</div>
</div>
<div class="col-sm-8 grid-margin">
<h2 class="mb-2 font-weight-600">
{{ Flash.title }}
</h2>
<div class="fs-13 mb-2">
<span class="mr-2">Photo </span>10 Minutes ago
</div>
<p class="mb-0">
{{ Flash.description }}
</p>
</div>
</div>
{% endfor %}
{% endblock %}
</div>
</div>
</div>
</div>
Views.py
from django.shortcuts import render
from .models import AllProject
from .models import Flash
def techhome(request):
allprojects = AllProject.objects.all()
return render(request, 'techworld/techhome.html', {'allprojects':allprojects})
def Flashnews(request):
flashes = Flash.objects.all()
return render(request, 'techworld/techhome1.html', {'flashes':flashes})
Models.py
from django.db import models
class AllProject(models.Model):
title = models.CharField(max_length=100)
description = models.CharField(max_length=250)
image = models.ImageField(upload_to='techworld/images/')
url = models.URLField(blank=True)
date = models.DateField(blank=True)
def __str__(self):
return self.title
class Flash(models.Model):
title = models.CharField(max_length=100)
description = models.CharField(max_length=250)
image = models.ImageField(upload_to='techworld/images/')
url = models.URLField(blank=True)
date = models.DateField(blank=True)
def __str__(self):
return self.title
Please also look into image links I have attached The output Screenshot and The admin Page screenshot
You are using both allprojects and flashes in your template, but you pass them in separate views to different templates.
It's not clear (to me, at least) which of these views corresponds to this template. I'm guessing you're trying to use the techhome() view, since you appear to be unable to get the Flash data to appear. You'll need to pass both allprojects and flashes as context to the template so they can be rendered. If, for example, you wish techhome() to display both, you could do the following:
def techhome(request):
allprojects = AllProject.objects.all()
flashes = Flash.objects.all()
context = {'allprojects':allprojects, 'flashes':flashes}
return render(request, 'techworld/techhome.html', context)
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/
I have ~26k pictures inside my static folder that I want to load using a template that I have in Django
{% for movie in movies %}
<div class="col-6 col-sm-12 col-lg-6">
<div class="card card--list">
<div class="row">
<div class="col-12 col-sm-4">
<div class="card__cover">
<img src="{% static 'img/covers/{{ movie.movie_id }}.jpg' %}">
<a href="/movie/{{ movie.movie_id }}" class="card__play">
<i class="icon ion-ios-play"></i>
</a>
</div>
</div>
<div class="col-12 col-sm-8">
<div class="card__content">
<h3 class="card__title">{{ movie.movie_title}}</h3>
<span class="card__category">
Comedy
Adventure
</span>
<div class="card__wrap">
<span class="card__rate"><i class="icon ion-ios-star"></i>{{ movie.movie_rating }}</span>
<ul class="card__list">
<li>HD</li>
<li>16+</li>
</ul>
</div>
<div class="card__description">
<p>{{ movie.movie_overview }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
The line
<img src="{% static 'img/covers/{{ movie.movie_id }}.jpg' %}">
is where I am facing an issue, the console shows img/covers/&7B&Dmovie.movie_id&3B&D.jpg
Move nested curly braces outside:
<img src="{% static 'img/covers/' %}{{ movie.movie_id }}.jpg">
static template tag only converts relative "static" url to "absolute" one, so appending some details like filename or query params like shown is fine.
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