How to split the base template into two parts?

M

mkone1122020-12-27 00:56:29

Django

mkone112, 2020-12-27 00:56:29

There is such

sample.

base.html

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>{% block title %}{% endblock %}</title>
    <link rel="shortcut icon" type="image/png" href="{% static 'images/favicons/favicon.ico' %}"/>
    <link href="{% static "account/css/base.css" %}" rel="stylesheet">
  </head>
  <body>
    <div id="header">
      <span class="logo"><a href="{% url "dashboard" %}">Bookmarks</a></span>
        <ul class="menu">
          <li {% if section == "dashboard" %} class="selected"{% endif %}>
            <a href="{% url "dashboard" %}">My dashboard</a>
          <li {% if section == "images" %}class="selected"{% endif %}>
            <a href="#">Images</a>
          <li {% if section == "people" %}class="selected"{% endif %}>
            <a href="#">People</a>
        </ul>
      {% endif %}
      <span class="user">
        {% if request.user.is_authenticated %}
          Hello {{ request.user.first_name }},
          <a href="{% url "logout" %}">Logout</a>
        {% else %}
          <a href="{% url "login" %}">Log-in</a>
        {% endif %}
      </span>
    </div>
    {% if messages %}
      <ul class="messages">
        {% for message in messages %}
          <li class="{{ message.tags }}">{{ message|safe }}
        {% endfor %}
      </ul>
    {% endif %}
    <div id="content">
      {% block content %}{% endblock %}
    </div>
    <script
      src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/src/js.cookie.min.js">
    </script>
    {% block imports %}{% endblock %}
    <script>
      'use strict';
      let csrftoken = Cookies.get('csrftoken');
      const csrfSafeMethod = (method) => {
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
      }
      $.ajaxSetup({
        beforeSend: (xhr, settings) => {
          if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
          }
        }
      });
      $(document).ready(() => {
        {% block domready %}{% endblock %}
      })
    </script>
  </body>
</html>

I would like to put the logic associated in JQuery into a separate template, approximately

So:

base.html

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>{% block title %}{% endblock %}</title>
    <link rel="shortcut icon" type="image/png" href="{% static 'images/favicons/favicon.ico' %}"/>
    <link href="{% static "account/css/base.css" %}" rel="stylesheet">
  </head>
  <body>
    <div id="header">
      <span class="logo"><a href="{% url "dashboard" %}">Bookmarks</a></span>
        <ul class="menu">
          <li {% if section == "dashboard" %} class="selected"{% endif %}>
            <a href="{% url "dashboard" %}">My dashboard</a>
          <li {% if section == "images" %}class="selected"{% endif %}>
            <a href="#">Images</a>
          <li {% if section == "people" %}class="selected"{% endif %}>
            <a href="#">People</a>
        </ul>
      {% endif %}
      <span class="user">
        {% if request.user.is_authenticated %}
          Hello {{ request.user.first_name }},
          <a href="{% url "logout" %}">Logout</a>
        {% else %}
          <a href="{% url "login" %}">Log-in</a>
        {% endif %}
      </span>
    </div>
    {% if messages %}
      <ul class="messages">
        {% for message in messages %}
          <li class="{{ message.tags }}">{{ message|safe }}
        {% endfor %}
      </ul>
    {% endif %}
    <div id="content">
      {% block content %}{% endblock %}
    </div>
    {% include "JQuery_load.html" %}
  </body>
</html>

JQuery_load.html

<script
      src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/src/js.cookie.min.js">
    </script>
    {% block imports %}{% endblock %}
<script>
  'use strict';
  let csrftoken = Cookies.get('csrftoken');
  const csrfSafeMethod = (method) => {
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  }
  $.ajaxSetup({
    beforeSend: (xhr, settings) => {
      if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
        xhr.setRequestHeader("X-CSRFToken", csrftoken);
      }
    }
  });
  $(document).ready(() => {
    {% block domready %}{% endblock %}
  })
</script>

How can this be done without breaking anything?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

V

VkolV, 2020-12-30
@VkolV

I would venture to guess, since I myself am a beginner, the {% extends %} tag