Merge pull request #531 from marcgibbons/feature/526-template-overrides

Feature/526 template overrides
marcgibbons · Aug 20, 2016 · 571d29e · 571d29e
2 parents 3dd6d32 + 358c061
commit 571d29e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git a/docs/customization.md b/docs/customization.md
@@ -0,0 +1,12 @@
+# Customization
+
+## Template
+The template used for the SwaggerUIRenderer can be customized by writing overriding
+`rest_framework_swagger/index.html`.
+
+Here are a few basic areas which can be customized:
+
+- `{% block extra_styles %}` Add additional stylsheets
+- `{% block extra_scripts %}` Add additional scripts.
+- `{% block user_context_message %}` Customize the "Hello, user" message (Django session only)
+- `{% block extra_nav %}` Placeholder for additional content in the nav bar.
diff --git a/rest_framework_swagger/templates/rest_framework_swagger/base.html b/rest_framework_swagger/templates/rest_framework_swagger/base.html
@@ -11,6 +11,9 @@
   <link href='{% static "rest_framework_swagger/css/screen.css" %}' media='screen' rel='stylesheet' type='text/css'/>
   <link href='{% static "rest_framework_swagger/css/reset.css" %}' media='print' rel='stylesheet' type='text/css'/>
   <link href='{% static "rest_framework_swagger/css/print.css" %}' media='print' rel='stylesheet' type='text/css'/>
+  {% block extra_styles %}
+  {# -- Add any additional CSS scripts here -- #}
+  {% endblock %}
 
   <script src='{% static "rest_framework_swagger/lib/object-assign-pollyfill.js" %}' type='text/javascript'></script>
   <script src='{% static "rest_framework_swagger/lib/jquery-1.8.0.min.js" %}' type='text/javascript'></script>
@@ -36,6 +39,7 @@
 </head>
 
 <body class="swagger-section">
+{% block header %}
 <div id='header'>
   <div class="swagger-ui-wrap">
     <a id="logo" href="http://swagger.io"><img class="logo__img" alt="swagger" height="30" width="30" src="{% static 'rest_framework_swagger/images/logo_small.png' %}" /><span class="logo__title">swagger</span></a>
@@ -44,16 +48,30 @@
       {% if USE_SESSION_AUTH %}
         {% csrf_token %}
         {% if request.user.is_authenticated %}
-          <div class="input">Hello, {{ request.user }}</div>
+          <div class="input">
+            {% block user_context_message %}
+              {# Override this block to customize #}
+              Hello, {{ request.user }}
+            {% endblock %}
+          </div>
+        {% endif %}
+        {% block extra_nav %}
+          {# Override this block to add more buttons, content to nav bar. #}
+        {% endblock %}
+      {% endif %}
+
+      {% if USE_SESSION_AUTH %}
+        {% if request.user.is_authenticated %}
           <div class='input'><a id="auth" class="header__btn" href="{{ LOGOUT_URL }}?next={{ request.path }}" data-sw-translate>Django Logout</a></div>
         {% else %}
-        <div class='input'><a id="auth" class="header__btn" href="{{ LOGIN_URL }}?next={{ request.path }}" data-sw-translate>Django Login</a></div>
+          <div class='input'><a id="auth" class="header__btn" href="{{ LOGIN_URL }}?next={{ request.path }}" data-sw-translate>Django Login</a></div>
         {% endif %}
       {% endif %}
       <div id='auth_container'></div>
     </form>
   </div>
 </div>
+{% endblock %}
 
 <div id="message-bar" class="swagger-ui-wrap" data-sw-translate>&nbsp;</div>
 <div id="swagger-ui-container" class="swagger-ui-wrap"></div>
@@ -63,5 +81,8 @@
 </script>
 
 <script src='{% static "rest_framework_swagger/init.js" %}' type='text/javascript'></script>
+{% block extra_scripts %}
+{# -- Add any additional custom JS scripts here -- #}
+{% endblock %}
 </body>
 </html>