4. Templates - Aklinahs/Django-beginner GitHub Wiki

We have all the templates of our website, There are eleven different web pages. So lets place those in our project.

make a folder named template inside our base app and make another folder inside the template folder and named it as base (kind of wired ah) Copy all the HTML, JS and CSS files and paste those in to the newly created base\templates\base folder.

The Django framework really tries to force you not to repeat yourself. Repetition might be good to emphasize a point, but when it comes to web development, it just leads to additional and time consuming work. In fact, the very nature of web development, which operates across multiple-tiers interacting with one another (e.g. HTML templates, business logic methods and databases) lends itself to repetition.

So lets remove the repetitions of the templates. when inspecting the template files, you may notice that the header section is common for all the templates, so lets take out it from the base app and put that in to our main directory. and its best practice to keep default html header tags separate from project code.

create a new folder inside our main directory (studybud) and rename it as templates, create a file named main.html inside it now again open any of the template inside the base/templates/base and cut every thing untill the

tag and paste it in main.html. now remove the closing </body> tag and tag from selected template file and and those end tags in to the main.html file. the main.html file is now look like this

The first thing we can see in every template is navigation bar. This is also same for every template. So take it out from the every template and make a new template. create a file named navbar.html inside our studybud/templates folder, now again open any of the template inside the base/templates/base and cut every thing from the

tag the closing tag and paste it in navbar.html. the navbar.html file is now look like this

now add the nav bar to main.html by adding {% include 'navbar.html' %} to the body.

thats all the common parts. others parts are unique to each template.

now, we have to metion where to putt other child templates in main.html parent template. to to so add {% block content %} and {% endblock %} to the parent template.

in each child template we have to add

{% extends 'main.html' %}

and wrap the code with {% block content %} and {% endblock %}.

now do the same for every template,

finally we have to introduce this template folder to the main app

open the settings.py and add BASE_DIR / 'templates' to the templates DIRS as follows

Now we should connect this template and the models we created earlier, before that we have to create url.py file inside our base file to handle all the links of the bass app. create a file and name it as as urls.py.

next we have ti inform our main app that we have separate url file to handle the app urls, edit the studybud\urls.py as follows