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 %}
Related
How can I include the following template (there are many of such template) in the main template so that each block gets appended to the corresponding block in the main template? Actually I want to avoid adding CSS and JavaScript separately each time I include a template, so asking this question.
{% block head %}
<link rel="stylesheet" href="/static/navbar.css">
{% endblock %}
{% block body %}
<div id="navbar"></div>
{% endblock %}
{% block script %}
<script src="/static/navbar.js"></script>
{% endblock %}
Main template:
<!DOCTYPE html>
<html>
<head>
{% block head %}
<link rel="stylesheet" href="/static/main.css">
{% endblock %}
</head>
<body>
<div id="header"></div>
{% block body %} {% endblock %}
<div id="footer"></div>
{% block script %}
<script src="/static/main.js"></script>
{% endblock %}
</body>
</html>
I am learning djnago , I would like to display an html page (in template forlder) into another html file by keeping {% extends 'base.html' %} which my template HTML that has my nav bar, CSS , javascritp..
the structure:
App1=>templates=>App1=>map.html (is a map app html file generated with folium https://python-visualization.github.io/folium/)
App1=>templates=>App1=>home.html
Src=>templates=>base.html
in home.html I would like to diplay map.html and all base.html elements (nav bar, CSS, javasript)
Here is my base .html code :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- semantic UI -->
<!--Chart js-->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>skill-site | {% block title %} {% endblock title %}</title>
</head>
<body>
{% include 'navbar.html' %}
{% block scripts %}
{% endblock scripts %}
<div class="container ui">
{% block content %}
{% endblock content %}
</div>
</body>
</html>
here is the code for home.html but it is not working:
{% extends 'base.html' %}
{% block title %}my map{% endblock title %}
{% block content %}
{% include './map.html' %}
{% endblock content %}
Thanks for your help
I'm having trouble trying to get Flask (along with Flask-Bootstrap) to only produce one head element to my HTML document. The problem I'm having right now is that the head element is correct, but Flask is dropping it into the beginning of the body as well.
/personal_website/app/templates/index.html:
{% extends "bootstrap/base.html" %}
#! I have not changed bootstrap/base.html
{% block head %}
{{super()}}
{% block title %}My_Name | Home{% endblock title %}
{% block styles %}
{{super()}}
<link href="{{url_for('static',filename='stylesheets/style.css')}}"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto"
rel="stylesheet">
{% endblock styles %}
{% endblock head %}
Console output:
<head>
<title>My_Name | Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/stylesheets/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
My_Name | Home
<!-- Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/stylesheets/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
I actually was able to correct this by taking the contents of what was in the header (ex: Title and Styles) out of the block head.
/personal_website/app/templates/index.html:
{% extends "bootstrap/base.html" %}
{% block title %}My_Name | Home{% endblock %}
{% block styles %}
{{super()}}
<link href="{{url_for('static',filename='stylesheets/style.css')}}"
rel="stylesheet">
{% endblock styles %}
{% block head %}
{{ super() }}
{% endblock %}
This still alowed me to inherit the contents of the head from bootstrap/base.html
I think you just need to remove this line (probably both times):
{{super()}}
In Django can you have one template base layer inheriting from another?
For example:
base.html
<!DOCTYPE html>
<html>
{% load staticfiles %}
<meta charset="UTF-8">
<title>Cloud Fabric || Product Calculator</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
{% block additionalStyles %}
<link rel="stylesheet" type= "text/css" href = "{% static 'fabric/editionsStylesheet.css' %}" />
{% endblock additionalStyles %}
</head>
<body>
<div id="header">
<h1 id="HeaderH1"><i>{{EditionName}}</i></h1>
</div>
{% block content %}
{% endblock content %}
</body>
</html>
So that will be the main base layer now is there a way to make another base layer to inherit from it for different parts of a website? like so:
base2.html
{% extends "base.html" %}
{% block additionalStyles %}
{% load staticfiles %}
<link rel="stylesheet" type= "text/css" href = "{% static 'fabric/monthlyEditionsStylesheet.css' %}" />
{% endblock additionalStyles %}
{% block content %}
<h1 id="chooseMonthH1">Choose The Monthly Range:</h1>
{% block monthlyForm %}
{% endblock monthlyForm %}
<button type="submit" class="pure-button pure-button-primary" id="subButton">Submit</button>
{% block formend %}
</form>
{% endblock formend %}
</div>
{% endblock content %}
So then further html can inherit from base2.html? i have already tried this but the form stopped working and the css messed up.
Your base2.html template overwrites contents of the additionalStyles block from the base.html template.
To preserve parent's block content, you must use the magic block.super variable like this:
{% extends "base.html" %}
{% block additionalStyles %}
{{ block.super }}
<link ... >
{% endblock additionalStyles %}
The above notation appends content to the additionalStyles block.
in index.html.twig
{% extends 'CvutFitBiWt1PollBundle::layout.html.twig' %}
{% block head %}
<link rel="stylesheet" href="{{ asset('bundles/cvutfitbiwt1poll/css/style.css') }}" />
{% endblock %}
{% block body %}
<h2>Text</h2>
...
in layout.html.twig
{% extends '::base.html.twig' %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ asset('bundles/cvutfitbiwt1poll/css/style.css') }}"
{% endblock %}
css I have in src/......./Resources/public/css/style.css
in style.css
#CHARSET "UTF-8";
label, input[type="submit"] {
display: block;
padding: 0.5em;
}
h2{
color:blue;
}
I didn't see any css
Thanks for help
php app/console assets:install --Installs bundles web assets under a public web directory
you need run this command to copy files(css js img) to the web directory
Your blocks are defined wrong.
This will solve it:
in index.html.twig
{% extends 'CvutFitBiWt1PollBundle::layout.html.twig' %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('bundles/cvutfitbiwt1poll/css/style.css') }}" />
{% endblock %}
{% block body %}
<h2>Text</h2>
in layout.html.twig
{% extends '::base.html.twig' %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ asset('bundles/cvutfitbiwt1poll/css/style.css') }}"
{% endblock %}