0

Intenté crear una página web muy simple con un base.html y home.html pero sólo lo que se pone en base.html parece ser mostrado:

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

<body>

    <!-- Header -->
    <header class="intro-header">
      <div class="container">
        <div class="intro-message">
          <h1>ScentMate</h1>
          <h2>Le parfumeur personnel</h2>
          <h5>Prêt à trouver le prochain parfum ? <br> Voici trois façons de trouver le parfum qui vous convient le mieux</h5>
          <hr class="intro-divider">
          <ul class="list-inline intro-social-buttons">
            <li class="list-inline-item">
              <a href="/quiz" class="btn btn-secondary btn-lg">
                <span class="network-name">Take a quiz</span>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="/predict" class="btn btn-secondary btn-lg">
                <span class="network-name">Find similar</span>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="/signin" class="btn btn-secondary btn-lg">
                <span class="network-name">  Sign in   </span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </header>

    <!-- Page Content -->
    <section class="content-section-a" id="about">

      <div class="container">
        <div class="row">
          <div class="col-lg-5 ml-auto">
            <hr class="section-heading-spacer">
            <div class="clearfix"></div>
            <h2 class="section-heading">Personalized recommendations<br>Machine learning backed up</h2>
            <p class="lead">No need to do research and try out everything at beauty stores.
              We believe there's an easier way for you to find your best match.</p>
          </div>
          <div class="col-lg-5 mr-auto">
            <img class="img-fluid" src="img/ipad.png" alt="">
          </div>
        </div>

      </div>
      <!-- /.container -->
    </section>

    <section class="content-section-b">

      <div class="container">

        <div class="row">
          <div class="col-lg-5 mr-auto order-lg-2">
            <hr class="section-heading-spacer">
            <div class="clearfix"></div>
            <h2 class="section-heading">The more ratings you give<br>The better we know you</h2>
            <p class="lead">Register and rate 5 perfumes you have tried.
              You'll be surprised that we know you too well.</p>
          </div>
          <div class="col-lg-5 ml-auto order-lg-1">
            <img class="img-fluid" src="img/dog.png" alt="">
          </div>
        </div>

      </div>
      <!-- /.container -->

    </section>
    <!-- /.content-section-b -->

    <section class="content-section-a">

      <div class="container">

        <div class="row">
          <div class="col-lg-5 ml-auto">
            <hr class="section-heading-spacer">
            <div class="clearfix"></div>
            <h2 class="section-heading">Explore the world of<br>Fine fragrances</h2>
            <p class="lead">The idea comes from our love and passion for fragrances.
              Our goal is to select best fragrances just for you...</p>
          </div>
          <div class="col-lg-5 mr-auto ">
            <img class="img-fluid" src="img/phones.png" alt="">
          </div>
        </div>

      </div>
      <!-- /.container -->

    </section>
    <!-- /.content-section-a -->

    <aside class="banner" id=contact>

      <div class="container">

        <div class="row">
          <div class="col-lg-6 my-auto">
            <h2>Connect to Antoine Coppin:</h2>
          </div>
          <div class="col-lg-6 my-auto">
            <ul class="list-inline banner-social-buttons">
            </li>
            <li class="list-inline-item">
              <a href="https://www.linkedin.com/in/antoine-c-261029b9/" class="btn btn-secondary btn-lg">
                <i class="fa fa-linkedin fa-fw"></i>
                <span class="network-name">Linkedin</span>
              </a>
            </li>
              <li class="list-inline-item">
                <a href="https://github.com/antoinecomp" class="btn btn-secondary btn-lg">
                  <i class="fa fa-github fa-fw"></i>
                  <span class="network-name">Github</span>
                </a>
              <li class="list-inline-item">
                <a href="https://twitter.com/KellyYuweiPeng" class="btn btn-secondary btn-lg">
                  <i class="fa fa-twitter fa-fw"></i>
                  <span class="network-name">Twitter</span>
                </a>
              </li>
            </ul>
          </div>
        </div>

      </div>
      <!-- /.container -->

    </aside>
    <!-- /.banner -->

    <!-- Footer -->
    <footer>
      <div class="container">
        <ul class="list-inline">
          <li class="list-inline-item">
            <a href="/">Home</a>
          </li>
          <li class="footer-menu-divider list-inline-item">&sdot;</li>
          <li class="list-inline-item">
            <a href="#about">About ScentMate</a>
          </li>
          <li class="footer-menu-divider list-inline-item">&sdot;</li>
          <li class="list-inline-item">
            <a href="#contact">Contact</a>
          </li>
        </ul>
        <p class="copyright text-muted small">Copyright &copy; ScentMate 2020. All Rights Reserved</p>
      </div>
    </footer>

    <!-- Bootstrap core JavaScript -->
    <script src="static/vendor/jquery/jquery.min.js"></script>
    <script src="static/vendor/popper/popper.min.js"></script>
    <script src="static/vendor/bootstrap/js/bootstrap.min.js"></script>

  </body>

Aqui esta base.html:

{% load static %}

<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>ScentMate Perfume Recommender</title>

    <!-- Bootstrap core CSS -->
    <link href="static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Cormorant:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Alex+Brush" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="static/css/style.css" rel="stylesheet">

  </head>

      <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">ScentMate</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="/signin">Sign In</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about">About ScentMate</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>     

</html>

Pero me devuelve:

introducir la descripción de la imagen aquí

De hecho, sólo lo que se pone en base.html parece ser mostrado ...

1 respuesta 1

2

Es porque para usar el base.html necesitas tenerlos en bloques asi tu codigo se prodra reutilizar ejemplo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>titulo</title>
</head>

<body>
    {% block content %}
    <!-- el contenido -->
    {% endblock %}
</body>

</html>

Este seria tu base.html y para usarlo en otro template como home.html seria:

{% extends 'base.html' %}

{% block content %}
<!-- el contenido de tu template -->
{% endblock %}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.