Django REST Browsable API Template Change

4
votes

I want to customize the Django REST Framework Browsable API template (simply to change the branding to a different name and link).

I have read the documentation on how to achieve this and did the following initially in the following path: hints(project)->hints1(app)->templates->rest_framework->api.html

api.html: 

{% extends "rest_framework/base.html" %}


{% block title %} Handy Dev Hints - API {% endblock %}

    {% block branding %}
    <span>
        <a class='navbar-brand' rel="nofollow" href="{% url 'html' %}">
             -----HTML View----- <span class="version">1</span>
         </a>
    </span>
    {% endblock %}

I also modified my settings.py as follows, specifically the DIRS section:

settings.py:

TEMPLATES = [
{
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [BASE_DIR, os.path.join(BASE_DIR, 'templates')],
    'APP_DIRS': True,
    'OPTIONS': {
        'context_processors': [
            'django.template.context_processors.debug',
            'django.template.context_processors.request',
            'django.contrib.auth.context_processors.auth',
            'django.contrib.messages.context_processors.messages',
        ],
    },
},
]

From the tutorials I've watched and the docs I read this should have been enough to implement the change. However, it did not work.

So then I decided to just change the base.html directly in the site-packages library.

base.html:

<!DOCTYPE html>
.
. 
.
{% block body %}
  <body class="{% block bodyclass %}{% endblock %}">

<div class="wrapper">
  {% block navbar %}
    <div class="navbar navbar-static-top {% block bootstrap_navbar_variant %}navbar-inverse{% endblock %}"
         role="navigation" aria-label="{% trans "navbar" %}">
      <div class="container">
        <span>
          {% block branding %}
            <a class='navbar-brand' rel="nofollow" href="{% url 'html' %}">
              -----HTML View-----
            </a>
          {% endblock %}

This solution worked when I ran it on my local server. However, it did not work when I uploaded the files to an external server (I uploaded the rest_framework and rest_framework_jwt site-packages to the external server also, but I assume I'm still missing something).

Any advice on how to get the changes to work on the external server as suggested by the documentation? Or even via the base.html change method? (Or any other method).

Thanks a lot!

1
htmldjangodjango-templatesdjango-rest-framework

1 Answers

4
votes

There are a couple of things that could likely be the reason you are experiencing this problem:

1) Firstly you seem to have your api.htm file created in your app folder while you reference your templates folder at the level of the project directory meaning
[Your app template ref] Proj dir --> app --> templates --> api.html
[django template lookup] Proj dir --> templates --> api.html which result to error

2) Secondly as alternative solution you chose to hack the site-package installation(very bad!! not recommend) while this would work locally, when you deploy your application on an external server, the DRF is reinstall in the external server (which this will not have any modifications you made)

The Recommended course of action will be to either:

1) Move your api.htm to the project level folder .i.e. Proj dir --> templates --> api.html

{% extends "rest_framework/base.html" %}
   {% block title %} Handy Dev Hints - API {% endblock %}
     {% block branding %}
       <span>
        <a class='navbar-brand' rel="nofollow" href="{% url 'html' %}">
         -----HTML View----- <span class="version">1</span>
        </a>
       </span>
{% endblock %}

for django to easily find
OR
2) Your add os.path.join('BASE_DIR','YOUR_APP_DIR', 'templates') to your template dir in the settings .i.e.

    TEMPLATES = [
{

    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [BASE_DIR, os.path.join(BASE_DIR, 'YOUR_APP_DIR', 'templates')],
    'APP_DIRS': True,
    'OPTIONS': {
        'context_processors': [
            'django.template.context_processors.debug',
            'django.template.context_processors.request',
            'django.contrib.auth.context_processors.auth',
            'django.contrib.messages.context_processors.messages',
        ],
    },
},
]

Update:

And if i may add, following the tutorial on how to customise this will work as long as everything is place within the appropriate path such that the framework can find, here is a screen short of a customisation I made.enter image description here