Web development with python- Django (part-5)

So, far we have seen how to make templete and how to use html templete.
We know that every website uses static files like css,js,image etc.
They more likely never change and remain static throughout website.
So in django style , all static files should be kept in a special directory named static ,
although this can be changed from setting.py file.
You will find this setting in main webproject’s settings.py file.



We want to make a template which will be like this


Html code to make this UI can be found here CODE

You can check it using online editor , just goto  this link and copy past the above code in the editor and you will see our desired UI.

If you see the UI code then you will find that we have used some CDN for using bootstrap css,js files

But we dont want to use CDN that’s why we will use offline files.
As they are static file, according to django we will keep them inside a folder named static. Download them from the respective url.

Now goto personal/templates/personal/header.html and modify like below


Full code of header.html can be found here

We use the load staticfiles command to load in all available static files. Next, we specifiy the path to the one we want in this case to reference for our stylesheet. The static directories start with /static/ and then we need to specify the rest of the way. For us, the rest of the way to the bootstrap.min.css file is personal/bootstrap.min.css. It is important to note here that we can use this identical reference from any other app, Django is going to look in all /static/ directories in any installed apps for this path.


Full code of home.html can be found here

Finally we will get the output.


So, we have used static file,templete and used it like django style.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s