Сделайте так, чтобы кнопка входа / выхода из системы, определенная в base.html, появлялась на всех страницах, которые ее расширяют - PullRequest
Новая
       17

Сделайте так, чтобы кнопка входа / выхода из системы, определенная в base.html, появлялась на всех страницах, которые ее расширяют

0 голосов
/ 06 июня 2019

Я пытаюсь реализовать функцию входа / выхода из системы, используя систему аутентификации по умолчанию в Django 2.2. В моем base.html

есть следующее 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <!-- navbar area start -->
  <nav class="navbar navbar-area navbar-expand-lg absolute">
      <div class="container-fluid nav-container">
          <div class="logo-wrapper navbar-brand">
              <a href="{% url 'home' %}" class="logo ">
                  <img src="/static/asset/img/logo.png" alt="logo">
              </a>
          </div>
          <div class="collapse navbar-collapse" id="cgency">
              <!-- navbar collapse start -->
              <ul class="navbar-nav" id="primary-menu">
                  <!-- navbar- nav -->
                  <li class="nav-item active dropdown">
                      <a class="nav-link" href="{% url 'home' %}">Home</a>
                  </li>
                  <li class="nav-item dropdown">
                      <a class="nav-link" href="{% url 'features' %}">Features</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="{% url 'pricing' %}">Pricing</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="{% url 'ARprogram' %}">Academic Program</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="{% url 'ARcertification' %}">Certification</a>
                  </li>
                  <li class="nav-item dropdown">
                      <a class="nav-link" href="{% url 'knowledgebase' %}">Help</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="{% url 'contactus' %}">Contact</a>
                  </li>
              </ul>
              <!-- /.navbar-nav -->
          </div>
          <!-- /.navbar btn wrapper -->
          <div class="responsive-mobile-menu">
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#cgency" aria-controls="cgency"
                  aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
              </button>
          </div>
          <!-- navbar collapse end -->
          <div class="nav-right-content">
              <ul>
                  <li class="nav-btn">
                    {% if request.user.is_authenticated %}
                      <!-- Hi {{ user.username }}! -->
                      <a href="{% url 'loggedout' %}" class="boxed-btn blank">logout</a>
                    {% else %}
                      <a href="{% url 'login' %}" class="boxed-btn blank">login</a>
                    {% endif %}
                  </li>
                  <li class="nav-btn">
                    <a href="#" class="boxed-btn blank">Download</a>
                  </li>
              </ul>
          </div>
      </div>
  </nav>
  <!-- navbar area end -->
    {% block content %}
    {% endblock %}
  <!-- footer area start -->
  <footer class="footer-area footer-bg">
      <div class="container">
          <div class="row">
              <div class="col-lg-3 col-md-6">
                  <div class="footer-widget widget about_widget"><!-- footer widget -->
                      <a href="{% url 'home' %}" class="footer-logo"><img src="/static/asset/img/footer-logo.png" alt=""></a>
                      <ul class="social-icon text-center">
                          <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                          <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
                      </ul>
                      <div class="copyright-text margin-top-30">© Copyrights 2019 EnablAR </div>
                  </div><!-- //. footer widget -->
              </div>
              <div class="col-lg-3 col-md-6">
                  <div class="footer-widget widget"><!-- footer widget -->
                      <h4 class="widget-title">Useful Links</h4>
                      <ul>
                          <li><a href="{% url 'features' %}">Features</a></li>
                          <li><a href="{% url 'pricing' %}">Pricing</a></li>
                          <li><a href="{% url 'gettingstarted' %}">Getting Started</a></li>
                          <li><a href="{% url 'ARprogram' %}">Academic Program</a></li>
                          <li><a href="{% url 'ARcertification' %}">Certification</a></li>
                      </ul>
                  </div><!-- //. footer widget -->
              </div>
              <div class="col-lg-3 col-md-6">
                  <div class="footer-widget widget"><!-- footer widget -->
                      <h4 class="widget-title">Need Help?</h4>
                      <ul>
                          <li><a href="{% url 'faq' %}">FAQS</a></li>
                          <li><a href="{% url 'knowledgebase' %}">Help</a></li>
                          <li><a href="{% url 'contactus' %}">Contact</a></li>
                      </ul>
                  </div><!-- //. footer widget -->
              </div>
              <div class="col-lg-3 col-md-6">
                  <div class="footer-widget widget"><!-- footer widget -->
                      <h4 class="widget-title">Download</h4>
                      <ul>
                          <li><a href="#">For windows</a></li>
                      </ul>
                  </div><!-- //. footer widget -->
              </div>
          </div>
      </div>
  </footer>
  <!-- footer area end -->
</body>
</html>

Index.html 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>About EnablAR</title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta content="" name="keywords">
  <meta content="" name="description">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="/static/asset/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/asset/css/fontawesome.min.css">
  <link rel="stylesheet" href="/static/asset/css/flaticon.css">
  <link rel="stylesheet" href="/static/asset/css/animate.css">
  <link rel="stylesheet" href="/static/asset/css/slick.min.css">
  <link rel="stylesheet" href="/static/asset/css/magnific-popup.css">
  <link rel="stylesheet" href="/static/asset/css/style.css">
  <link rel="stylesheet" href="/static/asset/css/responsive.css">

</head>

<body>
    {% extends "base.html" %}

    {% block content %}

    <!-- breadcrumb area start-->
    <div class="breadcrumb-area">
        <div class="container">
            <div class="row">
               <div class="col-lg-12">
                    <div class="breadcrumb-inner">
                        <h1 class="page-title">About</h1>
                        <ul class="page-list">
                            <li class="index.html"><a href="index.html">Home</a></li>
                            <li>About</li>
                        </ul>
                    </div>
               </div>
            </div>
        </div>
    </div>
    <!-- breadcrumb area end-->

    <!-- block feature area start -->
    <div class="block-feature-area padding-top-120" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="block-feature-item">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="img-wrapper box-shadow-90">
                                    <img src="/static/asset/img/softawe-1.jpg" alt="software image">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="content-block-area padding-left-50">
                                    <h4 class="title wow fadeInUp">Three step process to make your learning content AR enabled</h4>
                                    <p>If you don’t know coding, youre covered!. Simply follow EnablAR’s 3 step process to create your own AR apps.</p>
                                    <ul style="margin-left: -5%;">
                                        <li>Create your 3d models</li>
                                        <li>Use EnablAR</li>
                                        <li>Deploy your App</li>
                                    </ul>
                                    <div class="btn-wrapper margin-top-20 wow fadeInDown">
                                        <a href="#" class="boxed-btn gd-bg br-5 w180px">Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>  
            </div>
        </div>
    </div>
    <!-- block feature area end -->

    <!-- block feature area start -->
    <div class="block-feature-area padding-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="block-feature-item">
                        <div class="row reorder-xs">
                            <div class="col-lg-6">
                                <div class="content-block-area padding-right-50">
                                    <h4 class="title wow fadeInUp">Track student usage of your apps</h4>
                                    <p>Using enabler helps you track student engagement on the apps created by you. This is a first of its kind platform that helps teachers track how their students are learning</p>
                                    <div class="btn-wrapper margin-top-20">
                                        <a href="#" class="boxed-btn gd-bg br-5 w180px">Read More</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="img-wrapper box-shadow-90 wow fadeInDown">
                                    <img src="/static/asset/img/softawe-2.jpg" alt="software image">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>  
            </div>
        </div>
    </div>
    <!-- block feature area end -->

    <div class="back-to-top base-color-2">
        <i class="fas fa-rocket"></i>
    </div>

    <script src="/static/asset/js/jquery.js"></script>
    <script src="/static/asset/js/popper.min.js"></script>
    <script src="/static/asset/js/bootstrap.min.js"></script>
    <script src="/static/asset/js/slick.min.js"></script>
    <script src="/static/asset/js/jquery.magnific-popup.js"></script>
    <script src="/static/asset/js/wow.min.js"></script>
    <script src="/static/asset/js/TweenMax.js"></script>
    <script src="/static/asset/js/mousemoveparallax.js"></script>
    <script src="/static/asset/js/contact.js"></script>
    <script src="/static/asset/js/main.js"></script>
    {% endblock content %}
</body>
</html>

Однако, хотя я расширяю свой index.html с помощью base.html, он не показывает кнопку входа / выхода из системы правильно.

Даже когда пользователь вошел в систему, он всегда показывает кнопку входа вместо кнопки выхода. Принимая во внимание, что, если я включу вышеупомянутый фрагмент в мой index.html, он будет работать правильно. Чего мне не хватает?

Я не хочу иметь избыточный код во всех моих htmls.

...