STAY INFORMED
following content serves as a personal note and may lack complete accuracy or
certainty.
Minimal-Mistakes instruction
Useful vscode Shortcut Keys
Unix Commands
npm Commands
Vim Commands
Git Note
Useful Figma Shortcut Keys
Django Template
Template(HTML)
Generally create templates directory in app’s directory and create app’s directory again in templates directory and create HTML file in that. project
└── project
└── app
└── templates
└── app
└── index.html
<h2>Hello django</h2>
<p> hello</p>
After you run the server, you see the index page at ‘http://127.0.0.1:8000/app-directory-name/index.
Static files
Create static/app-name/ in app’s directory and these will manage inside of it(css, images, font, etc).
Go to index.html and add
{% load static %}
at very top so that this file is using the static files.
After, to get the files like img or css,
<link rel="stylesheet" href={% static 'foods/css/styles.css' %}> <img src={%
static 'foods/images/chicken.jpg' %}/>
Templates
Parent Template
<!-- base.html -->
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Restaurant</title>
<meta charset="utf-8" />
<link rel="stylesheet" href={% static 'foods/css/styles.css' %}>
</head>
<body>
<div>{% block date-block %}</div>
<div>{% endblock date-block %}</div>
<hr />
<div class="food-container">
{% block food-container %} {% endblock food-container %}
</div>
</body>
</html>
Child Template
<!-- index.html -->
{% extends './base.html' %} {% load static %} {% block date-block%}
<div>26 June, 2024</div>
{% endblock date-block%} {% block food-container%}
<div class="food">
<img src={% static 'foods/images/chicken.jpg' %}/>
<div class="info"></div>
</div>
<div class="food">
<img src={% static 'foods/images/sushi.jpg' %}/>
<div class="info"></div>
</div>
<div class="food">
<img src={% static 'foods/images/burger.jpg' %}/>
<div class="info"></div>
</div>
<div class="food">
<img src={% static 'foods/images/bibimbap.jpg' %}/>
<div class="info"></div>
</div>
<div class="food">
<img src={% static 'foods/images/croquette.jpg' %}/>
<div class="info"></div>
</div>
<div class="food">
<img src={% static 'foods/images/pumpkin_soup.jpg' %}/>
<div class="info"></div>
</div>
<div class="food">
<img src={% static 'foods/images/banana.jpg' %}/>
<div class="info"></div>
</div>
{% endblock food-container%}
Pass variable to html
# views.py
def index(request):
today = datetime.today().date()
contextv = {"date": today} # key: value
return render(request, 'foods/index.html', context=contextv)
<!-- index.html -->
{% block date-block%}
<div>{{date}}</div>
{% endblock date-block%}
Dynamic URL
# urls.py
urlpatterns = [
path('index/', views.index),
path('menu/<str:food>/', views.food_detail, name='food-detail'),
]
This ‘food’ variable can be passed to
# views.py
def food_detail(request, food):
context = {"name":food}
return render(request, 'foods/detail.html', context=context)
food parameter here.
Now, create detail.html file in templates and
<!-- detail.html -->
<h2>{{name}}</h2>
Use Static file in Dynamic file
You need {% get_static_prefix%} to use it
<!-- e.g. -->
<img src={% get_static_prefix%}{{img}} />
404 page
from django.http import Http404
if food == 'chicken':
context["name"] = "chicken"
context["description"] = "chiken des"
context["price"] = 12
context["img"] = "foods/images/chicken.jpg"
elif food == 'beef':
context["name"] = "beef"
.
.
.
else:
raise Http404("no food")