Creating a common base.html to different templates

Using Django Templates & Frontend
1

Hi everybody, first of all: I am a beginner in this framework. Well my problem is that I am trying to build a structure of templates which extend to another one, whose name is “base.html”, but when I run the server and load the page, it does not recognize the tags where is supposed must be placed the common content to all those templates…and obviously all that content is not either displayed…By the way I am also using TailWindCSS for improving the final view of my page, so: is it possible that I do not know how to integrate TailWindCSS and Django tags all together?

2

Welcome @chesapeakebayy-sketc !

For us to have any chance to assist you here, you’ll need to provide a lot more specific information. I would suggest you put together the smallest possible example of the problem you’re having, along with descriptions of what you’re trying to do and what you’re actually getting.

Side note, template inheritance has nothing to do with css itself, unless it’s a case where an error in your template is preventing the css from being loaded.

3

Firstly, thanks for advanced…

These are the source code snippets:

{% 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 'myapp/css/styles.css' %}">
	<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
	<title>Document</title>
</head>
<body>

<nav class="bg-blue-600 text-white">
	<div class="flex justify-between px-2 py-4">
		<a href="" class="font-bold text-2xl">FoodApp</a>
		<div class="space-x-6">
			<a href="">Contact</a>
			<a href="">Address</a>
			<a href="">About Us</a>
		</div>
	</div>
</nav>
<div class="container">
{% block content %}
{% endblock %}
</div>

</body>
</html>

this first snippet is called base.html.

The following source code is called index.html:

<% extends "myapp/base.html" %>
{%block title %}Food{%endblock%}

<% block content %>

{% for item in item_list %}
\[
{{ item.item_name }} -> {{ item.item_price }} -> {{ item.item_desc }}\]({% url 'myapp:detail' item.id %})
{% endfor %}

<% endblock %>

And finally this one is called detail.html:

<% extends "myapp/base.html" %>

{% block title %}Food Detail{% endblock %}

<% block content %>
Detail:
**Name:** {{item.item_name}}
**Price:** {{item.item_price}}
**Description:** {{item.item_desc}}

'[Back](/myapp/)'= anchored link for backing to index
<% endblock %>
4

By the way class container is defined as:

container{
padding:20px;
}
5

There are a few places in your index.html template where you’re using the wrong brackets on your Django tags, so they won’t work. For example, you have <% block content %> but it should be {% block content %}

6

Right…thank you so much…few sleep hours, and perhaps dyslexic?..:joy: :sweat_smile: