This is my base.html
<!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">
</head>
<body>
{% block content %}{% endblock content %}
</body>
</html>
This is home_page where I am using the {% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="container">
<h1>{{ title }}</h1>
<h1>Hello, world!</h1>
<img src="{% static 'img/myImage.jpg' %}" class='img-fluid'>
</div>
{% if premium_content %}
<div class="row">
<div class="col">
<h1>Premium</h1>
{{ premium_content }}
</div>
{% endif %}
</div>
{% endblock content %}
The here is my views.py where I have the home_page and before using the extends tag I could render this page properly
def home_page(request):
context = {
"title":"Hello World We Working"
}
if request.user.is_authenticated:
context["premium_content"] = 'Only premium users see this'
return render(request, 'MainApp/home_page.html', context)
The error message that I am getting is TemplateDoesNotExist at / Which I do not understand I even tried putting the two html files in the same directory but still I get the same error message
You should create templates file in your project or app directory and update TEMPLATES variable in the settings.py like below:
TEMPLATES = [
{
...
'DIRS': [os.path.join(BASE_DIR, 'templates')],
...
},
]
And then put your HTML files on the templates directory
I hope this works for you
Related
So far I am trying to set a paginator in my blog posts. I followed the documentation and other sites tutorial but any of these solutions did not work out for me. Considering my issue I think I am missing out on a simple step.
The blog folder sitemap.
Blog.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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Ubuntu|Roboto'>
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/blog.css">
<title>Blog</title>
</head>
<body>
{% include nav.html %}
<main>
{{paginator.posts}}
<!-- post list -->
<h1>Blog Post List</h1>
<div class="post-list post-list_grid">
{% for post in site.posts %}
<!-- Post start -->
<div class="post-list__post post">
<figure class="post__preview-img">
<a href="{{post.url}}"><img src="{{ site.baseurl }}/assets/thumbnail/{{ post.titleimage }}" alt="">
</a>
</figure>
<div class="post__header">
<time datetime="2019-11-09" class="post__time">november 09, 2019</time>
<h2>{{ post.title }}</h2>
</div>
</div>
{% endfor %}
<!-- Post end -->
</div><!-- / .post-list -->
<!--scroller-->
<div id="jsScroll" class="scroll" onclick="scrollToTop();">
<i class="fa fa-angle-up"></i>
</div>
</body>
{% include scroll.html %}
{% include toggle.html %}
</script>
</html>
posts/index.html
---
layout: blog
---
{% if paginator.total_pages > 1 %}
<div class="pagination">
{% if paginator.previous_page %}
« Prev
{% else %}
<span>« Prev</span>
{% endif %}
{% for page in (1..paginator.total_pages) %}
{% if page == paginator.page %}
<em>{{ page }}</em>
{% elsif page == 1 %}
{{ page }}
{% else %}
{{ page }}
{% endif %}
{% endfor %}
{% if paginator.next_page %}
Next »
{% else %}
<span>Next »</span>
{% endif %}
</div>
{% endif %}
blog.md
---
layout: blog
title: Blog
pagination:
enabled: true
---
I even tried with the paginate version 2. But the result was same. It did not show any repsonse.
_config.yaml
email: your-email#example.com
description: >- # this means to ignore newlines until "baseurl:"
Write an awesome description for your new site here. You can edit this
line in _config.yml. It will appear in your document head meta (for
Google search results) and in your feed.xml site description.
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: jekyllrb
github_username: jekyll
# Build settings
theme: minima
plugins:
- jekyll-feed
- jekyll-paginate
# Pagination Settings
paginate: 2
paginate_path: /posts/page:num/
I am trying to add static file to my project but css doesn't load. I used findstatic but django doesn't see any static directory:
In another project django still can find static folder:
My settings.py:
STATIC_URL = '/static/'
My base.html:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<link href = "{% static 'css/base.css' %}" rel = 'stylesheet'>
<title>{% block title %}Educa{% endblock %}</title>
</head>
<body>
<div id = 'header'>
<a href = "/" class = 'logo'>EDUCATION</a>
<ul class = 'menu'>
{% if request.user.is_authenticated %}
<li>Logout</li>
{% else %}
<li>Login</li>
{% endif %}
</ul>
</div id ='content'>
{% block content %}{% endblock %}
<script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/
jquery.min.js'></script>
<script>
$(document).ready(function(){
{% block domready %}
{% endblock %}
});
</script>
</body>
</html>
Thank you
I don't know how it even possible but i tried to rename my static folder and i found out there was an space after 'static'. After that css loaded BUT not for this project. It was css from another environment so i renamed it to main.css from base.css and also changed:
<link href = "{% static 'css/main.css' %}" rel = 'stylesheet'>
and everything works fine. Thank you all for help, interesting experience, sorry)
I am trying to use more different views in one template via different blocks or include method but I have got stuck. My aim is to implement my different views into one template. I tried to more solution but these haven't worked for me. I show these solution:
My views:
def dashboard_data(request):
# Here I collect data from my PostgreSQL database I push these into
#Objects and I send it to my test_a.html via render like below.
return render(request, 'my_project/test_a.html', send_data)
def chart_data(request):
#In these view my final goal is to collect data from database and create
#charts but for the simplicity I just use a list (a=[1,2,3,4]) and I
#push it to the test_b.html and I render it.
render(request, 'my_project/test_b.html', send_data))
My templates:
1, base.html
<!DOCTYPE html>
<html lang="en">
<head>
{% block title %}<title>My project</title>{% endblock %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include CSS files -->
{% load static %}
<!-- Include CSS files -->
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-table.css' %}">
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}">
</head>
<body>
{% block sidebar %}
{% endblock %}
{% block content%}
{% endblock %}
</body>
</html>
1, test_a.html
{% extends "monitor/base.html" %}
{%block content%}
{%for i in table%}
<p> {{i.record}}</p>
{%endfor%}
{%endblock}
2, test b.html
{%for i in a%}
<p> {{i}}</p>
{%endfor}
So my goal would be that the test_b.html's result could appear in the base.html.
My solutions:
A: I tried to put into a block the test_b.html and integrate in the base.html
1, base.html (test1):
{% block conent%}
{% endblock %}
{% block chart%}
{% endblock %}
1, test_b.html (test1):
{% extends "monitor/base.html" %}
{%block chart%}
{%for i in a%}
<p> {{i}}</p>
{%endfor}
{%endblock%}
B: I tried to use {{ block.super }}
1, base.html (test1):
{% block conent%}
{% endblock %}
1, test_b.html (test1):
{% extends "monitor/base.html" %}
{%block content%}
{{ block.super }}
{%for i in a%}
<p> {{i}}</p>
{%endfor}
{%endblock%}
C: Finally I used include method too but I didn't work for me as well. Here I tried to use simple html tags like (<p>Hello world</p>) int the test_b.html and worked. So If I do not use variables it works but I have to use my variables from my views.
1, test_a.html
{% extends "monitor/base.html" %}
{%block chart%}
{%for i in a%}
<p> {{i}}</p>
{%endfor}
{%endblock%}
{% include "my_project/test_b.html" %}
2, test_b.html
{%for i in a%}
<p> {{i}}</p>
{% endfor %}
To include an HTML file from another file just use {% include 'htmlfilename.hml' %}
outside {% block your_block_name %}{% endblock %} if it's a base template.
You can learn more about it here.
<body>
{% include 'header.html' %}
{% block sidebar %}{% endblock %}
{% block content%}{% endblock %}
{% include 'footer.html' %}
</body>
If you want to use some functionality across several templates then use inclusion_tags.
As #alessioferri20 mentioned, you cannot render 2 views at the same time. Basically, one view corresponds to one HTTP request & response.
You can achieve what you want by using custom template tags:
https://docs.djangoproject.com/en/2.0/howto/custom-template-tags/
but I have to use my variables from my views.
For example, chart_data could be an inclusion tag (https://docs.djangoproject.com/en/2.0/howto/custom-template-tags/#inclusion-tags), here is some pseudo-code:
Let's say you want to show a chart for the age_stats from your view:
def your_view(request, ...):
age_stats = {...}
....
return render(request, "template...", {'age_stats': age_stats})
In your template:
{% chart age_stats %}
In your template tags:
#register.inclusion_tag('path-to/chart.html')
def chart(input_data):
# collect data from database & use the input_data coming from your view
data = ...
return {'data': data}
The {% include %} tag is how you insert other templates into blocks. These templates don't need to be registered in views.py or urls.py.
For example:
{% extends 'base.html' %} {% block home %} {% load static %}
<div>
<h1>Some Title</h1>
<p>Some text</p>
</div>
<div>
{% include 'some-other-template.html' %}
</div>
{% endblock %}
For more information: https://docs.djangoproject.com/en/4.1/ref/templates/builtins/
I have a problem in inheriting template from base.html for my about page (about.html). Meanwhile, I am able to extend base.html to home.html. I suspect it is an issue of syntax somewhere either in base.html or about.html, but could not possibly find it. It might also be base.html is only inherited by home.html. Can you please help?
My base. html:
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<title> {% block title %}{% endblock %} </title>
<h1> {% block h1 %}{% endblock %} </h1>
</head>
<body>
{% block content %}
{% endblock %}
{% block two %}
{% endblock %}
</body>
<!DOCTYPE html>
My about.html:
{% extends "base.html" %}
{% load staticfiles %}
<html lang="en">
<head>
{% block title %}About{% endblock %}
{% block h1 %}Hi,About!{% endblock %}
</head>
<body>
</body>
</html>
Part of my views.py:
from django.shortcuts import get_object_or_404, render_to_response
from ecomstore.catalog.models import Category, Product
from django.template import RequestContext
def about(request, template_name="about.html"):
page_title='About'
return render_to_response(template_name, locals(),RequestContext(request))
My urls.py:
from django.conf.urls import url
from . import views as catalog_views
urlpatterns = [
url(r'$',catalog_views.home,name='home'),
url(r'^about/$',catalog_views.about,name='about'),
In your about.html template you need to add
{% block content %}
<!-- Add your about content here -->
{% endblock content %}
You also don't need <html>, <head> or <body> tags in the about.html file as they are in the base.html file already
When you extend base.html your base.html defines entire html page. In your about.html you just need to code what you want to insert in base.html blocks. So, your about.html have to like this
{% extends "base.html" %}
{% load staticfiles %}
{% block title %}
About
{% endblock %}
{% block h1 %}
Hi,About!
{% endblock %}
I think you want you about.html to look like this.
{% extends "base.html" %}
{% load staticfiles %}
{% block title %}About{% endblock %}
{% block content %}Hi,About!{% endblock %}
Note: You have an <h1> in your header and I think you actually want that in your <body>
I have a fairly simple setup. I created a flask app and call index.html on route '/'.
index.html contains this:
{% extends "template.html" %}
{% block content %}
<h4 class="centeredText">
HEADER TEXT
</h4>
{% for p in paragraph %}
<p class="centeredText">
{{ p }}
</p>
{% endfor %}
{% endblock %}
My template.html is also very simple:
<html>
<link rel="stylesheet" media="screen" href = "{{ url_for('static', filename='bootstrap.min.css') }}">
<link rel="stylesheet" media="screen" href = "{{ url_for('static', filename='custom.css') }}">
<link rel="stylesheet" media="screen" href = "{{ url_for('static', filename='custom_navbar.css') }}">
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300' rel='stylesheet' type='text/css'>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<h1>{% if pageType = 'home' %} HOME {% endif %}</h1>
</head>
<body> <h1>TEMPLATE</h1>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
While testing I get this error:
expected token 'end of statement block', got '='
Edit: I missed including the variable in the header in template.html. Which I now know, to be the source of the error. Is there anyway to pass a variable to template.html, or is that not good practice?
Help!
The pageType variable should appear in your template.html so long as you pass it to the render_template function. In your case, you have a syntax error here:
{% if pageType = 'home' %}
You need to use == instead, so it should look like this:
{% if pageType == 'home' %}