Issue
I am new django. I'm practicing it after finishing youtube videos. I'm facing the following error
django.template.exceptions.TemplateSyntaxError: Invalid block tag on line 42: 'static', expected 'endblock'. Did you forget to register or load this tag?
The problem that it tells me that it can't find the endblock tag but I've put it at the end of the code. I don't know what causes this problem or how to solve it I need help please my html
{% extends "Books/base.html" %}
{% block content %}
<div class="page" id="page">
<div class="main">
<div class="main-content">
{% for book in books %}
<div class="container">
<div class="img">
<img
src="{{ book.image.url }}"
width="250px"
height="300px"
/>
</div>
<div class="title">
<a href="{% url 'details' book.id %}" target="_blank"> {{ book.title }} </a>
</div>
<p class="description">{{ book.mini_description }}</p>
<p class="category">
{% for categ in book.category.all %}
{% if categ == book.category.all.last %}
{{ categ }}
{% else %}
{{categ}}-
{% endif %}
{% endfor %}
</p>
<h2 class="price">{{ book.price }} EGP.</h2>
<h3 class="rate">{{ book.rate }}</h3>
<a href="{% url 'buy' %}" target="_blank"
><button class="buy_now nav buy_now_position">Buy Now</button></a
>
</div>
{% endfor %}
</div>
</div>
<div class="nav-bar">
<header class="nav">
<a class="nav logo">
<img
src="{% static 'images/Main Logo.png' %}"
class="logo"
alt="logo"
/>
</a>
<a class="nav">All</a>
<a class="nav">Horror</a>
<a class="nav">Classics</a>
<a class="nav">Graphic Novel</a>
<a class="nav">Fantasy</a>
<div class="drop_down nav">
<a
class="drop_down_btn nav"
type="button"
data-toggle="dropdown"
aria-haspopup
>
more
</a>
<i class="fa fa-caret-down menu"></i>
<div class="drop_down-content nav">
<a class="nav">Action and Adventure</a>
<a class="nav">Detective and Mystery</a>
<a class="nav">Fiction</a>
<a class="nav">Romance</a>
<a class="nav">Short Stories</a>
<a class="nav">Educational</a>
</div>
</div>
<div class="control">
<button class="filter nav" type="button">
<i
class="fa-solid fa-arrow-down-wide-short"
id="toggle-filter"
></i>
</button>
<label>
<input type="search" placeholder="search..." class="search" />
</label>
</div>
</header>
</div>
<div class="panel nav">
<h2>Filter:</h2>
<p>Enter the range of the prices you want</p>
<br />
<label>
From:
<input type="number" min="0" />
</label>
<br /><br />
<label>
To:
<input type="number" min="0" />
</label>
<br /><br />
<button type="button">Apply</button>
</div>
</div>
{% if is_paginated %}
{% if page_obj.has_previous %}
<a class="btn btn-outline-info mb-4" href="?page=1">First</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
<a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
{% endif %}
{% endif %}
{% endblock content %}
The error is raised at the line
src="{% static 'images/Main Logo.png' %}"
Edit: My Base file is as follows I Forgot to Include it in the question
{% 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" />
<meta name="author" content="Mohammad Ayman" />
<title>{{ title }}</title>
<link rel="stylesheet" href="{% static 'styles/style.css' %}" />
<link rel="stylesheet" href="{% static 'styles/details_style.css' %}" />
<link rel="icon" href="{% static 'images/Title Bar Logo.png' %}" />
<script src="{% static 'js-files/jquery-3.6.0.js' %}"></script>
<script src="{% static 'js-files/home.js' %}"></script>
<script
src="https://kit.fontawesome.com/2a5c8c2bca.js"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="{% static 'styles/buy_style.css' %}" />
<script src="{% static 'js-files/buy.js' %}"></script>
</head>
<body>
{% block content %} {% endblock content %}
</body>
</html>
I've search for an answer but didn't find any thing
Solution
{% extends "Books/base.html" %}
{% load static %} <!--You need to load static here -->
{% block content %}
<div class="page" id="page">
<div class="main">
<div class="main-content">
{% for book in books %}
<div class="container">
<div class="img">
<img
src="{{ book.image.url }}"
width="250px"
height="300px"
/>
</div>
<div class="title">
<a href="{% url 'details' book.id %}" target="_blank"> {{ book.title }} </a>
</div>
<p class="description">{{ book.mini_description }}</p>
<p class="category">
{% for categ in book.category.all %}
{% if categ == book.category.all.last %}
{{ categ }}
{% else %}
{{categ}}-
{% endif %}
{% endfor %}
</p>
<h2 class="price">{{ book.price }} EGP.</h2>
<h3 class="rate">{{ book.rate }}</h3>
<a href="{% url 'buy' %}" target="_blank"
><button class="buy_now nav buy_now_position">Buy Now</button></a
>
</div>
{% endfor %}
</div>
</div>
<div class="nav-bar">
<header class="nav">
<a class="nav logo">
<img
src="{% static 'images/Main Logo.png' %}"
class="logo"
alt="logo"
/>
</a>
<a class="nav">All</a>
<a class="nav">Horror</a>
<a class="nav">Classics</a>
<a class="nav">Graphic Novel</a>
<a class="nav">Fantasy</a>
<div class="drop_down nav">
<a
class="drop_down_btn nav"
type="button"
data-toggle="dropdown"
aria-haspopup
>
more
</a>
<i class="fa fa-caret-down menu"></i>
<div class="drop_down-content nav">
<a class="nav">Action and Adventure</a>
<a class="nav">Detective and Mystery</a>
<a class="nav">Fiction</a>
<a class="nav">Romance</a>
<a class="nav">Short Stories</a>
<a class="nav">Educational</a>
</div>
</div>
<div class="control">
<button class="filter nav" type="button">
<i
class="fa-solid fa-arrow-down-wide-short"
id="toggle-filter"
></i>
</button>
<label>
<input type="search" placeholder="search..." class="search" />
</label>
</div>
</header>
</div>
<div class="panel nav">
<h2>Filter:</h2>
<p>Enter the range of the prices you want</p>
<br />
<label>
From:
<input type="number" min="0" />
</label>
<br /><br />
<label>
To:
<input type="number" min="0" />
</label>
<br /><br />
<button type="button">Apply</button>
</div>
</div>
{% if is_paginated %}
{% if page_obj.has_previous %}
<a class="btn btn-outline-info mb-4" href="?page=1">First</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
<a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
{% endif %}
{% endif %}
{% endblock content %}
Answered By - Iqbal Hussain
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.