Hello World, Welcome to projectsplaza.com. This is the third tutorial of the series “learn Django from scratch with example“. In this tutorial, we will create a static blog application with Django. We will learn the following things in this tutorial.
- How to create view templates in Django?
- How to add static files in Django templates?
- How to extend a template in Django?
- How to share common data in all views?
How to create view templates in Django?
- Create “templates” folder in newly created “post” application.
- Create “index.html” file in “templates” folder.
- Add the following code in “index.html” file.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Blog appication with django</title>
</head>
<body>
<div class="container">
<h3>This is blog application created with django</h3>
</div>
</body>
</html>
- Our template will load from “views.py” in “post” folder.
- Open “views.py” and create the following function in it.
from django.shortcuts import render
# Create your views here.
def home(request):
return render(request,"index.html")
- View’s function work with “post/urls.py“. Currently we do not have “urls.py“.
- Create “urls.py” in “post” application and add the following code.
from django.urls import path
from . import views
urlpatterns = [
path("",views.home,name='home')
]
- Now we will connect our post application with blog project.
- In blog project folder, you will see the another blog folder. This blog folder contains all general setting of this project.
- Open “urls.py” from this blog folder
- Make the following changes in this file like following.
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
path('post/', include('post.urls')),
]
- Open “setting.py” from “blog” folder. Add “post” in “INSTALLED_APPS” list.
- Run application with post suffix. for example, http://127.0.0.1:8000/post
DJango follow model-view-template architecture.
How to add static files in Django template?
- In this part, we will add css, js and imgs.
- Create “static” folder in “post” folder.
- We can put all the css and js files in this folder.
- I am using bootstrap 4, so download bootstrap files and add the following changes in “index.html“
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Blog appication with django</title>
<!-- Add Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}" />
</head>
<body>
<div class="container">
<h3>This is blog application created with djangp</h3>
</div>
</body>
</html>
- Stop the server with CTRL+C and run again with same command py manage.py runserver.
- When you see source code of this page, you will see that bootstrap css is attached with this page.
Please add your feedback in the comment section. Thank you 🙂 🙂