I'm learning django. I have a site with a data table that has the following html template:
{% load static %}
{% load table_tags %}
<link href="{% static 'table/css/bootstrap.min.css' %}" rel="stylesheet">
<script src="{% static 'table/js/jquery.min.js' %}"></script>
<script src="{% static 'table/js/bootstrap.min.js' %}"></script>
<link href="{% static 'table/css/datatable.bootstrap.css' %}" rel="stylesheet">
<script src="{% static 'table/js/jquery.browser.min.js' %}"></script>
<script src="{% static 'table/js/jquery.dataTables.min.js' %}"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Impala query metrics</title>
</head>
<body>
<div class="container" style="margin: 10px 10px 10px">
<h1>Impala Query metrics</h1>
<br />
{% render_table people %}
</div>
logout
{% block content %} {% endblock %}
</body>
When i try to inherit with another template by adding
{% extends "base.html" %}
to the first line, it inherits with base.html but my original data table disappears.
Any help on how to keep my original data table or pointing me to the right documentation would be appreciated.
Related
I have a Django website where I have separated the html files into a base.html file as so:
{% include 'head.html' %}
<body>
{% include 'nav.html' %}
{% block content %}
{% endblock content %}
{% include 'footer.html' %}
{% include 'scripts.html' %}
</body>
</html>
Due to including head.html, the title on each page is the same, since head.html has only 1 title. Here is the head.html file:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/materialize.css' %}">
<link rel="stylesheet" href="{% static 'css/materialize.min.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>mytitle</title>
</head>
But i want to display different titles for different pages and I dont know how to. Anyone have any idea?
base.html
{% include 'head.html' with title=title %}
<body>
{% include 'nav.html' %}
{% block content %}
{% endblock content %}
{% include 'footer.html' %}
{% include 'scripts.html' %}
</body>
</html>
views.py
def home(request):
context = {
"title":"Home"
}
return render(request,"template",context)
head.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/materialize.css' %}">
<link rel="stylesheet" href="{% static 'css/materialize.min.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>{{title}}</title>
</head>
Use blocks which are overridable:
head.html
...
<title>{% block page_title %}{% endblock %}</title>
my_concrete_page.html
{% extends base.html %}
{% block page_title %}my concrete title{% endblock %}
I am giving this answer from my knowledge:
Make one file for this :
head.html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/materialize.css' %}">
<link rel="stylesheet" href="{% static 'css/materialize.min.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
make different file for your different title :
title1.html
<title>mytitle</title>
title2.html
<title>mytitle</title>
now add in your main file like this :
<head>
{% include 'head.html' %}
{% include 'title1.html' %}
</head>
<body>
{% include 'nav.html' %}
{% block content %}
{% endblock content %}
{% include 'footer.html' %}
{% include 'scripts.html' %}
</body>
</html>
I hope this works for you.
use include instead of extend for base.html and pass dynamic title to base.html
django link : include
{% include "base.html" with objects=website.title %}
I had to combine the ideas of #Ivan and #Soham. I removed the title tag from my head.html and added that to my base.html. Along with that I used overrideable block tag inside the title tag. So now my base.html looks like this:
<!DOCTYPE html>
<html lang="en">
{% include 'head.html' %}
<title>{% block title %}{% endblock title %}</title>
<body>
{% include 'nav.html' %}
{% block content %}
{% endblock content %}
{% include 'footer.html' %}
{% include 'scripts.html' %}
</body>
</html>
And all I have to do now is use the tags accordingly in other pages:
{% extends 'base.html' %}
{% block title %}whatever i want the title to be{% endblock title %}
Option 1. Base.html file
<link rel="stylesheet" href="{% static 'css/style.css' %}"
.
.
<title>{% block title %} Home-title {% endblock %}</title>
Then add like this code your file
{% block title %} Search Results {% endblock %}
Option 2. To query a model in the view:
{% extends "blog/base.html" %}
{% block title %} {{blog_obj.title}} {% endblock %}
{% block content %}
So I'm trying to develop an app in Django. At the moment I'm trying to do a simple search bar that when you type the title of a fil it show several data of that film. I have successfully developed the search bar and it works. The problem is that when doing the html template and extending it from base.html the data shown dissapears.
base.html
<!DOCTYPE html>
<html lang="es">
<head>
{% load staticfiles %}
<title>Peliculas</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?
family=Tangerine&v1" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?
family=Yanone+Kaffeesatz" />
<link rel="stylesheet" type="text/css" href="{% static 'myapp/style.css' %}"/>
</head>
<body>
<div id="content">
<div id="main">
<div id="header">
<div id="logo">
<h1>SERIAL KILLER</h1>
<div class="slogan">SLOGAN</div>
</div>
<div id="menubar">
<ul id="menu">
<!-- put class="current" in the li tag for the selected page - to highlight which page you're
on -->
{%block menu%}
{% endblock %}
</ul>
</div>
</div>
</div>
<div id="site_content">
{%block lado%}
{% endblock %}
<div id="content">
{% block contenido %}
{% endblock %}
</div>
</body>
</html>
the template where I show the data from the query: buscarResultados.html
{% extends "base.html" %}
{% load staticfiles %}
{% block titulo %} RESULTADOS {% endblock %}
{%block content %}
<ul>
{% for peli in object_list %}
<li>
{{peli.titulo}}, {{peli.descripcion}}
</li>
{% endfor %}
</ul>
{% endblock %}
my form in index.html
<div id="search">
<form action="{% url 'busqueda_resultados' %}" method= 'get'>
<input type="text" name="q" placeholder="Buscar...">
<input type="submit" value="Buscar">
</form>
</div>
my views.py
class BuscarPeliculas(ListView):
model = Pelicula
template_name = 'buscarResultados.html'
def get_queryset(self):
query = self.request.GET.get('q')
object_list = Pelicula.objects.filter(
Q(titulo__icontains=query) | Q(descripcion__icontains=query)
)
return object_list
my urls.py
path('busqueda/', views.BuscarPeliculas.as_view(), name='busqueda_resultados'),
what appears if I extend from base.html
What appears if I don't extend from base.html
as you can see, The data dissapears if I extend from base.html, I tried to do my question as complete as possible, help is much appreciated.
Its because you are addintg it to a block content, but the base.html expects block contenido
fix your block names
I am developing the website on python(Django). I am getting some difficulties to change the background color of the top menu on every page.
What I am doing is, I have an index.html page and templates which are aboutus, contactus and service. When I am on the home page then I am getting the gray background of the menu which is correct. Now I am on aboutus and I have to change the menu color from gray to black but I am getting the only gray.
So I want to know how do I change the class or override the CSS? Should I need to add the class to the body and then override the menu BG? How do I added the class to the body on each page dynamically?
index.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title%}Home{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/style.css'%}" type="text/css">
</head>
<body>
<div class="Wrpper">
<header class="bg_gray"><!--top menu code--></header>
{% block content %}
<!-- template code -->
{% endblock %}
<footer><!--footer code--></footer>
</div>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
style.css
.bg_gray{background-color: #ccc;}
.bg_black{background-color: #000;}
aboutus.html (All template are same)
{% extends 'demo1/index.html' %}
{% load static %}
<title>{% block title %}About us{% endblock %}</title>
{% block content %}
<!--some code here-->
{% endblock %}
you can override the header's class using javascript
first give your header an id :
then include the javascript file:
in app.js
$(document).ready(function() {
$('#top-header').removeClass('bg_gray');
$('#top-header').addClass('bg_blak');
});
<link rel="stylesheet" href="{% static 'js/app.js' %}">
<header class="bg_gray" id="top-header"><!--top menu code--></header>
Give important to bg_black class it will override the css of bg_gray class property...
like this,
.bg_black{
background-color: #000!important;
}
html:
<header class="bg_gray bg_black"><!--top menu code--></header>
I have a django project and i have been trying to link a css file to the base.html document to begin implimenting some css to my file. I have bootstrap linked already but i want to add more customization... Here is what i have so far..
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static 'css/blog.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid blue5">
{% block content %}
{% endblock %}
</div>
</body>
</html>
here is the css file
.blue5 {
background-color: lightblue,
}
You can link a CSS and HTML file like this:
In your HTML code:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static 'css/blog.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="pathToYourCSSfile" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid blue5">
{% block content %}
{% endblock %}
</div>
</body>
</html>
Hope this helps.
if your css file only contains these two lines it will be better to include them in the head of the document
<head>
...
<script ...>
<style>
.blue5 {
background-color: lightblue,
}
</style>
</head>
otherwise just like the others css, add a new link tag:
<link href="{% static 'path to your file.css' %}" rel="stylesheet">
I couldn't get my image reflected using StaticFile process. Here are my global settings:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
('assets', 'C:/Users/dhopkins/PycharmProjects/django_test/static'),
My base.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}My base template.{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% static "assets/css/default.css" %}">
</head>
<body>
<div id="page">
</div>
<div id="sidebar">
{% block sidebar %}
<ul>
<li>Articles</li>
<li>Admin</li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block content %}Content goes here!{% endblock %}
<img scr="{% static "images/python-logo.jpg" %}" width="200"/>
</div>
</body>
</html>
My image folder is located in C:\Users\dhopkins\PycharmProjects\django_test\static\images.
Please help.
Your problem lies in this line
<img scr="{% static "images/python-logo.jpg" %}" width="200"/>
it should be
<img src="{% static "images/python-logo.jpg" %}" width="200"/>
This is not a problem with your static files. You've simply misspelled the <img src> attribute :-)