Web_Dev_Grad

You will want to keep some global templates separate from your apps so that they are accessible across your website. The main examples of this are the constant in your pages such as a header, footer, and navigation section that will be on every page. Creating them in your root directory level templates folder lets you link them to your pages and include or extend them using the Django templating language. Keywords and functionality are explained further in the Django Templating Language section.

• Include: Injects the whole HTML content into your page at that specific part of your HTML file where you include it.
  • {% include "includes/navigation.html" %}
• Extend: Inherits the template structure of the file. This can be seen as the inverse of Include, as you will define 'blocks' in the file you extend and then define what fills them in your file that extends it.
  • The top of your page file that extends the base.html file will have {% extends 'base.html' %}
  • In the base.html file there will be blocks you can assign with any name such as {% block blockname_1 %}{% endblock %} or {% block main_content %}{% endblock %}
  • In your file that extends the base.html file you will have these blocks defined with HTML between the start and end blocks that will appear in the section of that block on the base template

A slightly less complicated way to look with a simple example.

• You will have a navigation.html file that has your navigation sections
• Your base template will include the navigation file and have sections (blocks) X, Y, and Z that are empty
• A new template e.g. in an app will extend the base template (which also has the navigation layout in it) and define what is shown in sections (blocks) X, Y, and Z

This theory can be extended for any reusable section of your website. For instance for code snippets in this website I have a template set up so that all I need to do is extend them and add the code so that they all keep the same layout without having to retype or copy the HTML for it each time.

The root level templates folder may look like:

• templates
  • base.html
  • 404.html
  • includes
    • navigation.html
    • code_snippet.html

There are some things that you should include in your base template, with most of them covered here in the example HTML page.

For instance the head element should contain:

• Meta data
• Bootstrap links
• Static CSS and JS links
• Fontawesome
• Favicon

To set up templates in your app, ensure that you have the template folder set up like app_name/templates/app_name. Then go to your views.py file in that app to define how your project will handle requests and to direct them to the correct template.

This is done by defining a function typically named the same as the template you wish to direct to, talking request as an argument. Inside this function you want to return render (which you will need to import from django.shortcuts and pass it arguments of request and the string of the temple it the form of 'app_name/file_name.html'). The reason you do not need to define 'app_name/templates/app_name/file_name.html' is because it is relative to the template search paths Django uses, not the actual file system path and in the TEMPLATES variable in settings.py we set 'APP_DIRS' to True letting Django know to look for templates inside app folders.

from django.shortcuts import render
def page_name(request):
    return render(request, 'appname/page_name.html')

Then head over to your urls.py file in your app, ensure you have imported views from your app to access the above function and add the path using the syntax:

from . import views
urlpatterns = [
    path('what_the_url_will_look_like_in_the_browser/', views.function_name , name='unique_identifier'),
]

For example it might look like:

urlpatterns = [
    path('home/', views.app_name_home, 'app_name_home'),
]