Important point is that none of these files can be modified by the server<\/em>. It means these files are transmitted as it is, without any modification.<\/p>\n Static files are those files which can not be processed, generated or modified by the server.<\/em><\/p>\n In the previous section, we learned about the concept of static files. There is a catch here. Images, JavaScript files, etc are types of content or static files. Static files contain all kinds of file types \u2013 from .mpeg, .jpeg to .pdf, etc. You can see that process in this flow-diagram. Also, we can say that static websites are much faster than dynamic websites.<\/p>\n Let\u2019s understand one more important topic, i.e. Template Inheritance.<\/p>\n Static files improve the performance of the website. Developers use it more efficiently with template inheritance method and it is one of Django\u2019s key features<\/a>.<\/strong><\/em><\/p>\n The basic concept is that: We define the common parts of a webpage, such as navigation bars and About section. All these parts are essentially HTML and some static files. Majority of webpages will contain similar sections.<\/p>\n The problem is that when there are lots of webpages, the modification becomes complex. Suppose we want to modify the About section. Then, the developer will have to change the code on every single page. That will lead to chaos and will definitely generate bugs.<\/p>\n Django templating solves this problem, by inheritance. It provides us with the modularity of developing different sections of a webpage. Like we can define a base template, which contains nav bars and About section. Then inherit this page and just add the unique part in other webpages.<\/p>\n Now, let\u2019s implement template inheritance in a project.<\/p>\n 1. Create a New Django application<\/strong><\/p>\n First, we will create a new Django application. For that, start your virtual environment in command prompt. Then go to the root folder. After that, execute this command in terminal\/ PowerShell.<\/p>\n Code:<\/strong><\/p>\n This application will contain all the templates. We will practice on this application in further sections of this article.<\/p>\n Now, install that application in your Django project.<\/p>\n Add this name to INSTALLED_APPS list.<\/p>\n 2. Define Some View Functions<\/strong><\/p>\n Let\u2019s define some view functions for this project. Add this code to your home\/views.py file.<\/p>\n Code:<\/strong><\/p>\n <\/p>\n These are some simple view functions.<\/p>\n 3. Defining Templates<\/strong><\/p>\n Now, we can define our templates. First, create a new folder template in the home app. Inside that folder, create two new files, base.html, and others.html.<\/p>\n Then just paste this code in base.html<\/p>\n Code:<\/strong><\/p>\n <\/p>\n <\/p>\n Don’t forget to check the Django Template Tutorial<\/a><\/strong><\/em><\/p>\n Understand the Code:<\/strong><\/p>\n In this code, you must be noticing that we used some new template tags. The tag, {% block body_block %}<\/strong> is used for template inheritance. We are actually replacing this section of code between {% block body_block %}<\/strong> \u2026. {% endblock %}<\/strong>. The name body_block can be of your choice.<\/p>\n There can be multiple blocks of this type. It\u2019s up to you to change them or use them as it is.<\/p>\n Now, paste this code in others.html<\/p>\n Code:<\/strong><\/p>\n <\/p>\n Understand the code:<\/strong><\/p>\n Here, we used a new tag at the beginning. {% extends \u2018base.html\u2019 %}<\/strong> is clear in itself. This tag will inform Django to add base.html code in others.html. After that we used {% block body_block %}<\/strong> \u2026. {% endblock %}<\/strong>, which contains this page\u2019s unique content. This block is swapped with the block in base.html.<\/p>\n We have to connect our views and urls. So, edit the urls file.<\/p>\n Make a new urls-config in the home app.<\/p>\n Inside home\/urls.py file, paste this<\/p>\n Code:<\/strong><\/p>\n <\/p>\n Now, add this variable in your main urls-config-<\/p>\n urls.py, in root folder<\/p>\n Code:<\/strong><\/p>\n <\/p>\n Must Learn – How to map URL patterns to view functions<\/a><\/strong><\/em><\/p>\n Finally, test our functions. See through it that you have followed the whole tutorial.<\/p>\n In URL bar, enter – localhost:8000<\/p>\n Then search for other\/ in the URL bar.<\/p>\n So, this is the output.<\/p>\n That\u2019s how we perform template inheritance.<\/p>\n Remember, there can be multiple blocks in a single template.<\/p>\n Now, we will add some static files so that our page looks more attractive. We will be modifying our settings.py a little bit.<\/p>\n A good developer also manages static files. Static file management is an important factor in web development. When the website undergoes frequent UI changes and graphics are updated constantly, this condition requires developers to manage static files.<\/p>\n Django provides us with built-in static file handler. It\u2019s a very simple concept and requires some modification in settings.py.<\/p>\n Check the list of INSTALLED_APPLICATIONS<\/strong> in settings.py file.<\/p>\n Application is: django.contrib.staticfiles<\/strong><\/p>\n Moving to the next phase, we have STATIC_URL variable in the last section of the page.<\/p>\n This URL is important as it will be the base URL for all static files of your project. This URL should be of the same name as the folder where your static file is stored.<\/p>\n Then another important setting comes in – STATIC_ROOT. This setting contains the address of the folder where we will be storing static files. When we execute the collectstatic command, the Django will store our files in this directory.<\/p>\n The last is a list of directories – STATICFILES_DIRS. This list has file-paths of the folders where we store our static files. When we execute the collectstatic command, Django will look for static files in these directories. Then it will save them in our STATIC_ROOT folder.<\/p>\n This command is very useful when the website is in production state. When this command is executed, Django performs these operations:<\/p>\n That\u2019s how files are served.<\/p>\n Have you checked – Django Forms Handling & Validation<\/a><\/strong><\/em><\/p>\n Let\u2019s add some static files to our home app. Just add this code in your setting file.<\/p>\n Code:<\/strong><\/p>\n <\/p>\n Here, you can note that we are not using the STATIC_ROOT has a different value. But, that\u2019s fine since we defined Root.<\/p>\n You can test it for some errors here. Try executing this command:<\/p>\n <\/p>\n If it succeeds then no issues, we can move forward.<\/p>\n Now, make a new folder named static same as we named in STATIC_DIRS list. Inside that, make a new folder image and in that folder, store image1.jpeg. This file can be anything that you want to display.<\/p>\n Again run the command: collectstatic<\/strong><\/p>\n This time, it shall produce this output.<\/p>\n It shows that one file is added, then move forward. Otherwise, comment on any errors or check all the steps prior to this point.<\/p>\n Now, we will edit some templates in the home app. Add a new template about.html<\/strong> in the templates folder.<\/p>\n Then, paste this code in the file.<\/p>\n Code:<\/strong><\/p>\n <\/p>\n Understand the Code:<\/strong><\/p>\n See the 3rd line. {% load static %}<\/strong>\u00a0tag will inform Django<\/a> that there are static files in this template. Django will then check for the related static files. Then sends them together with the HTML code.<\/p>\n After that, we gave the src of the image tag. The source of image tag is a Django tag. Here we used static keyword and the path to the image. The path is not specified from the root directory.<\/p>\n The STATIC_URL value is automatically added to the source of the image file, even though it is coming from a different directory altogether.<\/p>\n After that, we have used filters – {{ time |date:\u2018Y\u2019}}<\/strong>.<\/p>\n The | pipe character indicates the use of template filters. Here, the time dictionary contains a\u00a0Python DateTime object<\/a><\/em><\/strong>. Then, we wanted to print only year, therefore we used a date filter. This will chop-off all other parts except year from time.<\/p>\n Template filters are used to make data received from the server more presentable. There are lots of filters to customize the look and feel of the data received. We can also create our own custom data filters. It\u2019s a vast topic and needs a blog of its own. We will be covering the same in upcoming articles.<\/p>\n Let\u2019s make a new view function. Just add this function to your home\/views.py.<\/p>\n Code:<\/strong><\/p>\n <\/p>\n We imported the datetime class to use its methods. We are then passing the same to our about.html.<\/p>\n This time, we are changing the urls file. We will be using relative urls here. They are a professional way of inserting urls in templates and are really helpful.<\/p>\n Paste this code in home\/urls.py<\/p>\n Code:<\/strong><\/p>\n <\/p>\n In this part, just remember the name parameter. They will be very useful.<\/p>\n Bootstrap is one of the most popular front-end frameworks. It contains pre-defined CSS and JavaScript classes<\/a><\/strong> for rapid development. So, today we are going to add the CSS version of Bootstrap to our project.<\/p>\n In home\/templates\/base.html paste this.<\/p>\n Code:<\/strong><\/p>\n <\/p>\n <\/p>\n Understand the Code:<\/strong><\/p>\n In this base.html, we have added some new elements. Let\u2019s understand them one by one.<\/p>\n Bootstrap CSS:<\/strong> <link> tag is used to add CSS file from Bootstrap. Here rather than original CSS file, we just added the server URL of the same. This path can be directly copied from the Bootstrap website, its an opensource project.<\/p>\n Then we used some bootstrap classes with HTML. The classes like navbar, navbar-nav, navbar-link,<\/em> etc are all Bootstrap CSS classes. They are just for front-end and to give you an idea of bootstrap. You can get more details on https:\/\/getbootstrap.com\/<\/p>\n The href of anchor tags:<\/strong>\u00a0This is the implementation of relative urls. See the urls in the href attribute of <a> tags. Instead of using complete urls, we are actually calling view functions directly. In the previous section, we stated you to remember names in urls.<\/p>\n The {% url \u2018url_name\u2019 %} is replaced by the actual URL. And, this is very helpful for bigger projects.<\/p>\n The main advantage is that you can name the function. So, instead of URL (which could go wrong), we write url-name.<\/p>\n Then again run this command of collecting static files.<\/p>\n We have already discussed in the previous section what this command does.<\/p>\n If you get no errors, then move forward.<\/p>\n At last, we will test it. Start your project’s server.<\/p>\n Search in the URL bar: localhost:8000<\/p>\nWhat are Static files?<\/h3>\n
\nThere is a simple concept of working with static files. When a user requests for a webpage, the server will generate the HTML. Then the server will collect all the corresponding static files related to that page. Lastly, this whole data is served.<\/p>\n![\"Django](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/Django-Static-Files-Diagram-1.jpg\")
<\/a><\/p>\nBenefits of Static Files<\/h4>\n
\n
What is Template Inheritance?<\/h3>\n
Making a Project<\/h3>\n
python manage.py startapp home<\/pre>\n
![\"Django](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/Django-Static-Files-settingspy.png\")
<\/a><\/p>\nfrom django.shortcuts import render\r\n\r\n#DataFlair #Views #TemplateInheritance\r\n# Create your views here.\r\ndef home(request):\r\n return render(request, 'base.html')\r\n\r\ndef other(request):\r\n context = {\r\n 'k1': 'Welcome to the Second page',\r\n }\r\n return render(request, 'others.html', context)\r\n\r\n<\/pre>\n![\"Django](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/Django-Static-Files-viewspy.png\")
<\/a><\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>HomePage<\/title>\r\n<\/head>\r\n<body>\r\n <center>\r\n <h1>DataFlair Django Tutorials<\/h1>\r\n{% block body_block %}\r\n<h1>Welcome to the Home-Page<\/h1>\r\n<h2> search for others\/ <\/h2>\r\n <h2>\u00a0we\u00a0are\u00a0in\u00a0the\u00a0block\u00a0of\u00a0home\u00a0page<\/h2>\r\n{% endblock %}\r\n<\/center>\r\n<\/body>\r\n<\/html><\/pre>\n![\"Django](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/Django-static-files-block-of-home-page.png\")
<\/a><\/p>\n{% extends \"base.html\" %}\r\n{% block body_block %}\r\n <h2> search for \/ <\/h2>\r\n <h1>{{ context.k1 }}<\/h1>\r\n{% endblock %}\r\n\r\n<\/pre>\n![\"Django](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/Django-Static-Files-othershtml.png\")
<\/a><\/p>\n4. URL Mappings<\/strong><\/h4>\n
from django.urls import path\r\nfrom .views import *\r\nurlpatterns = [\r\n path('', home, name = 'homepage'),\r\n path('other\/', other, name = 'otherpage'),\r\n]<\/pre>\n![\"Django](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/Django-static-files-urlspy.png\")
<\/a><\/p>\npath('', include('home.urls')),<\/pre>\n![\"Django](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/Django-static-Files-urlspy-2.png\")
<\/a><\/p>\n5. Test Run<\/strong><\/h4>\n
![\"local.php](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/local.php-body.png\")
<\/a><\/p>\n![\"Django](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/Django-Static-Files-local-host.png\")
<\/a><\/p>\nManaging Static Files in Django<\/h3>\n
![\"Django](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/Django-Static-Files-allowed-hosts.png\")
<\/a><\/p>\n![\"Django](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/Django-Static-Files-language-code.png\")
<\/a><\/p>\ncollectstatic command<\/strong><\/h4>\n
\n
1. Setting up Static Files<\/h4>\n
#DataFlair #Django #Static files\r\nSTATIC_URL = '\/static\/'\r\n#--------------------------------------------------\r\nSTATIC_ROOT = os.path.join(BASE_DIR, 'root')\r\n#-----------------------------------------------------\r\nSTATICFILES_DIRS = [\r\n os.path.join(BASE_DIR, 'static'),\r\n]<\/pre>\n
![\"Django](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/Django-Static-Files-DIRS.png\")
<\/a><\/p>\npython manage.py collectstatic<\/pre>\n
![\"Django](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/Django-Static-Files-collect-static.png\")
<\/a><\/p>\n![\"Django](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/Django-Static-Files-collect-static-2.png\")
<\/a><\/p>\n2. Editing Templates for Static files<\/h4>\n
{% extends 'base.html' %}\r\n{% block body_block %}\r\n{% load static %}\r\n <img src = \"{% static 'images\/image1.jpg' %}\">\r\n <h1>This is about the developers of this webpage<\/h1>\r\n <h2>Django is the best framework<\/h2>\r\n <h1>DataFlair Team<\/h1>\r\n <h2>Year : {{ time | date:'Y' }}<\/h2>\r\n <h2>Month : {{ time | date:'M' }}<\/h2>\r\n{% endblock %}\r\n\r\n<\/pre>\n![\"Django](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/Django-Static-Files-Extends.png\")
<\/a><\/p>\nWhat are Django Template Filters?<\/h4>\n
3. Editing View Functions<\/h4>\n
import datetime\r\ndef about(request):\r\n time = datetime.datetime.now()\r\n return render(request, 'about.html',{'time': time})<\/pre>\n![\"Views.py](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/Views-py-import-date-time.png\")
<\/a><\/p>\n4. Editing urls.py<\/h4>\n
from django.urls import path\r\nfrom .views import *\r\nurlpatterns = [\r\n path('', home, name = 'homepage'),\r\n path('other\/', other, name = 'otherpage'),\r\n path('about\/', about, name = 'about'),\r\n]<\/pre>\n![\"urls.py](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/urls-py-path-other-page-about.png\")
<\/a><\/p>\n5. Adding Bootstrap<\/h4>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>HomePage<\/title>\r\n\t<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\" integrity=\"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz\/K68vbdEjh4u\" crossorigin=\"anonymous\">\r\n<\/head>\r\n<body>\r\n\t<center>\r\n\t\t <nav class=\"navbar navbar-default navbar-static-top\">\r\n <div class=\"container\">\r\n <ul class=\"nav navbar-nav\">\r\n <li><a class=\"navbar-brand\" href=\"{% url 'homepage' %}\">HomePage<\/a><\/li>\r\n <li><a class=\"navbar-link\" href=\"{% url 'admin:index' %}\">Admin<\/a><\/li>\r\n <li><a class=\"navbar-link\" href=\"{% url 'otherpage' %}\">Other<\/a><\/li>\r\n <li><a class=\"navbar-link\" href=\"{% url 'about' %}\">About<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/nav>\r\n <div class=\"container\">\r\n \t <h1>DataFlair Django Tutorials<\/h1>\r\n{% block body_block %}\r\n<h1>Welcome to the Home-Page<\/h1>\r\n<h2> search for others\/ <\/h2>\r\n<h2>we are in the block of home page<\/h2>\r\n{% endblock %}\r\n<\/center>\r\n<\/body>\r\n<\/html><\/pre>\n![\"base.html](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/base.html-end-block.png\")
<\/a><\/p>\n6. Collecting Static Files<\/h4>\n
python manage.py collectstatic<\/pre>\n
7. Test Run<\/h4>\n
![\"local.php](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/localphp-pseudo-elements.png\")
<\/a><\/p>\n![\"Local](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/06\/Local-host-Django-tutorials.png\")
<\/a><\/p>\n