Aula 16 – Modelo base – Base Template

Aula 16 – Modelo base – Base Template

Modelo base – Base Template

Modelo base - Base Template

Modelo base – Base Template

 

Voltar para página principal do blog

Todas as aulas desse curso

Aula 15                  Aula 17

Para baixar o código como está até agora, acesse o link abaixo:
https://github.com/toticavalcanti/django_ecommerce/tree/base_template

Antes de começar, quero deixar meu link de afiliados na Hostinger, tá valendo a pena, dêem uma olhada: Hostinger

Dêem um joinha 👍 na página do Código Fluente no Facebook
Facebook

Meu link de referidos na digitalocean pra vocês.

Quem se cadastrar por esse link, ganha $100.00 dólares de crédito na digitalocean:

Digital Ocean

Esse outro é da one.com:

One.com

Vamos lá!

Não queremos nos repetir quando desenvolvemos nosso código.

Organizando os HTMLS de acordo com DRY (Don’t Repeat Yourself)

Uma das principais vantagens de usar modelos Django, está por trás do conceito de DRY (Don’t Repeat Yourself).

As coisas mais repetitivas em desenvolvimento web são tipicamente alguns elementos nos documentos HTML, como por exemplo, a tag head, o doctype, etc.

Então, para tirar proveito do conceito DRY e não nos repetirmos, vamos modificar nossas páginas para que cada uma delas tenha mais ou menos a mesma estrutura.

Para fazer isso nós vamos entrar em nossa pasta de templates e vamos criar um novo arquivo chamado base.html

Chamar esse arquivo de base.html é uma convenção, esse arquivo tem os componentes em comum de todas as páginas.

O base.html é como se fosse o ponto principal de onde todas as páginas herdam.

Crie então o src/templates/base.html.

Agora copie e cole o conteúdo do src/templates/home_page.html nele.

Nosso src/templates/base.html vai ficar assim:


{% load static %}
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel='stylesheet' href='{% static "css/main.css" %}'>
    </head>
    <body>
        <div class='text-center'>
            <h1>{{ title }}</h1>
            <p>{{ content }}</p>
        </div>
        div class='container'>
            <div class='row'>
                <div class='col'>
                    <img src="{% static 'img/eCommerce.jpeg' %}" class='img-fluid' />
                    <p>{{ content }}</p>
                </div>
            </div>

            {% if request.user.is_authenticated %}
                <div class='row'>
                    <div class='col'>
                        <h1>Premium</h1>
                        <p>{{ premium_content }}</p>
                    </div>
                </div>
            {% endif %}
        </div>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

Vamos tirar o que tá em vermelho, que só diz respeito a home, ficando assim nosso src/templates/base.html.


{% load static %}
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel='stylesheet' href='{% static "css/main.css" %}'>
    </head>
    <body>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

O que tá em vermelho no html acima será retirado e posto no src/templates/base/css.html.

Por isso, crie o src/templates/base/css.html

Tire o que tá em vermelho no src/templates/base.html mostrado acima, e cole no src/templates/base/css.html, e bem no início coloque a tag template {% load static %} para que funcione corretamente, ficando assim o css.html:

src/templates/base/css.html


{% load static %}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel='stylesheet' href='{% static "css/main.css" %}'>

E o src/templates/base.html vai ficar assim:


{% load static %}
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

Agora crie src/templates/base/js.html

Tire o que tá em vermelho no src/templates/base.html mostrado acima, e cole no src/templates/base/js.html, e bem no início coloque a tag template {% load static %} para que funcione corretamente, ficando assim o js.html:

src/templates/base/js.html


{% load static %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

O src/templates/base.html vai ficar assim:


{% load static %}
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
		
    </body>
</html>

Nosso src/templates/base.html tá bem enxuto agora.

A primeria coisa a fazer nesse momento é permitir que nossa src/templates/home_page.html funcione fora da nossa src/templates/base.html.

Para fazer isso, vamos inserir {% extends "base.html" %} no início do src/templates/home_page.html antes do {% load static %}.

Então precisamos fazer o replace dessa área usando a template tag {% block content %}{% endblock %}, depois do {% load static %}.

Dentro desse bloco colocaremos todas as coisas relativas a home_page.

Então vamos por partes, primeiro vamos por as tags.

src/templates/home_page.html


{% extends "base.html" %}
{% load static %}
{% block content %}
    <!-- Aqui vai tudo que é referente a home_page  -->
{% endblock %}

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel='stylesheet' href='{% static "css/main.css" %}'>
    </head>
    <body>
        <div class='text-center'>
            <h1>{{ title }}</h1>
            <p>{{ content }}</p>
        </div>
        <div class='container'>
            <div class='row'>
                <div class='col'>
                    <img src="{% static 'img/eCommerce.jpeg' %}" class='img-fluid' />
                    <p>{{ content }}</p>
                </div>
            </div>

            {% if request.user.is_authenticated %}
                <div class='row'>
                    <div class='col'>
                        <h1>Premium</h1>
                        <p>{{ premium_content }}</p>
                    </div>
                </div>
            {% endif %}
    </div>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

O src/templates/home_page.html tá extendendo o src/templates/base.html.

Vamos pegar tudo que tá em vermelho no src/templates/home_page.html logo depois da tag <body> mostrado acima, cortar e colar entre as tags: {% block content %} {% endblock %}

src/templates/home_page.html


{% extends "base.html" %}

{% load static %}
{% block content %}
    <div class='text-center'>
        <h1>{{ title }}</h1>
             <p>{{ content }}</p>
    </div>
    <div class='container'>
	<div class='row'>
	    <div class='col'>
		<img src="{% static 'img/eCommerce.jpeg' %}" class='img-fluid' />
		<p>{{ content }}</p>
	    </div>
	</div>

	{% if request.user.is_authenticated %}
	    <div class='row'>
		<div class='col'>
		    <h1>Premium</h1>
			<p>{{ premium_content }}</p>
		</div>
	    </div>
        {% endif %}
    </div>
{% endblock %}

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel='stylesheet' href='{% static "css/main.css" %}'>
    </head>
    <body>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

No src/templates/base.html precisamos colocar o {% block content %} {% endblock %} da src/templates/home_page.html, que acabamos de criar logo acima, porque isso é o que vai ser sobrescrito.

O src/templates/base.html vai ficar assim então:


{% load static %}
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
        {% block content %} {% endblock %}
    </body>
</html>

Com o servidor rodando acesse:

127.0.0.1:8000

Algumas coisas ficaram diferentes, veja que a home_page.html tá pegando da base.html.

Podemos testar isso para ver, adicione uma tag html <title>, tanto na src/templates/home_page.html como na src/templates/base.html.

src/templates/home_page.html


{% extends "base.html" %}

{% load static %}

<title>Home Page Template</title>
{% block content %}
    <div class='text-center'>
        <h1>{{ title }}</h1>
             <p>{{ content }}</p>
    </div>
    <div class='container'>
	<div class='row'>
	    <div class='col'>
		<img src="{% static 'img/eCommerce.jpeg' %}" class='img-fluid' />
		<p>{{ content }}</p>
	    </div>
	</div>

	{% if request.user.is_authenticated %}
	    <div class='row'>
		<div class='col'>
		    <h1>Premium</h1>
			<p>{{ premium_content }}</p>
		</div>
	    </div>
	{% endif %}
    </div>
{% endblock %}

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel='stylesheet' href='{% static "css/main.css" %}'>
    </head>
    <body>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

src/templates/base.html


{% load static %}
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Base Template</title>
    </head>
    <body>
        {% block content %} {% endblock %}
    </body>
</html>

Com o servidor rodando acesse novamente e confira que a home_page.html tá pegando da base.html:

127.0.0.1:8000

Vamos fazer o mesmo processo que fizemos com a src/templates/home_page.html, agora com a src/templates/contacts/views.html.

src/templates/contacts/views.html


{% extends "base.html" %}

{% block content %} 
{% endblock %}

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

        <title>Formulário de contato</title>
    </head>
    <body>
        <div class='text-center'>
            <h1>{{ title }}</h1>
        </div>
        <div class='container'>
            <div class='row'>
                <div class='col'>
                    <p>{{ content }}</p>
                    <div class='col-sm-6 col-12'>
                        <form method='POST'> {% csrf_token %}
                            {{ form }}
                            <button type='submit' class='btn btn-default'>Enviar</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

Vamos pegar tudo que tá em vermelho logo abaixo da tag <body> do html acima, cortar e colar entre as tags: {% block content %}  {% endblock %} e podemos deletar também todo o restante (em vermelho), ou seja, tudo que tá abaixo do {% endblock %}

src/templates/contacts/views.html


{% extends "base.html" %}

{% block content %}
    <div class='text-center'>
        <h1>{{ title }}</h1>
    </div>
    <div class='container'>
        <div class='row'>
            <div class='col'>
                <p>{{ content }}</p>
                <div class='col-sm-6 col-12'>
                    <form method='POST'> {% csrf_token %}
                        {{ form }}
                        <button type='submit' class='btn btn-default'>Enviar</button>
                    </form>
                </div>
            </div>
        </div>
    </div> 
{% endblock %}

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

        <title>Formulário de contato</title>
    </head>
    <body>
        
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

Toda a parte em vermelho no html acima a partir do <!doctype html> pra baixo, pode ser removida do src/templates/contacts/views.html.

src/templates/contacts/views.html


{% extends "base.html" %}

{% block content %}
    <div class='text-center'>
        <h1>{{ title }}</h1>
    </div>
    <div class='container'>
        <div class='row'>
            <div class='col'>
                <p>{{ content }}</p>
                <div class='col-sm-6 col-12'>
                    <form method='POST'> {% csrf_token %}
                        {{ form }}
                        <button type='submit' class='btn btn-default'>Enviar</button>
                    </form>
                </div>
            </div>
        </div>
    </div> 
{% endblock %}

Vamos repetir o mesmo processo com a src/templates/about/views.html, vamos extender o base.html e criar o block content.

src/templates/about/views.html


{% extends "base.html" %}

{% block content %} 
{% endblock %}
<!doctype html>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

        <title>Código Fluente - About</title>
    </head>
    <body>
        <div class='text-center'>
            <h1>{{ title }}</h1>
            <h2>{{ content }}</h2>
            <h2>E tá funcionando super bem!!!</h2>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

Vamos pegar tudo que tá em vermelho logo abaixo da tag <body> do html acima, cortar e colar entre as tags: {% block content %}  {% endblock %}

src/templates/about/views.html


{% extends "base.html" %}

{% block content %} 
    <div class='text-center'>
        <h1>{{ title }}</h1>
        <h2>{{ content }}</h2>
        <h2>E tá funcionando super bem!!!</h2>
    </div>
{% endblock %}
<!doctype html>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

        <title>Código Fluente - About</title>
    </head>
    <body>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

Toda a parte em vermelho no html acima a partir do <!doctype html> pra baixo, pode ser removida do src/templates/about/views.html.

src/templates/about/views.html


{% extends "base.html" %}

{% block content %} 
    <div class='text-center'>
        <h1>{{ title }}</h1>
        <h2>{{ content }}</h2>
        <h2>E tá funcionando super bem!!!</h2>
    </div>
{% endblock %}

Podemos deletar tudo que tá em vermelho no html abaixo, da home_page.

src/templates/home_page.html


{% extends "base.html" %}

{% load static %}

<title>Home Page Template</title>
{% block content %}
    <div class='text-center'>
        <h1>{{ title }}</h1>
             <p>{{ content }}</p>
    </div>
    <div class='container'>
	<div class='row'>
	    <div class='col'>
		<img src="{% static 'img/eCommerce.jpeg' %}" class='img-fluid' />
		<p>{{ content }}</p>
	    </div>
	</div>

	{% if request.user.is_authenticated %}
	    <div class='row'>
		<div class='col'>
		    <h1>Premium</h1>
			<p>{{ premium_content }}</p>
		</div>
	    </div>
	{% endif %}
    </div>
{% endblock %}

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel='stylesheet' href='{% static "css/main.css" %}'>
    </head>
    <body>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

Ficando assim:

src/templates/home_page.html


{% extends "base.html" %}

{% load static %}

<title>Home Page Template</title>
{% block content %}
    <div class='text-center'>
        <h1>{{ title }}</h1>
             <p>{{ content }}</p>
    </div>
    <div class='container'>
	<div class='row'>
	    <div class='col'>
		<img src="{% static 'img/eCommerce.jpeg' %}" class='img-fluid' />
		<p>{{ content }}</p>
	    </div>
	</div>

	{% if request.user.is_authenticated %}
	    <div class='row'>
		<div class='col'>
		    <h1>Premium</h1>
			<p>{{ premium_content }}</p>
		</div>
	    </div>
	{% endif %}
    </div>
{% endblock %}

Veja que a formatação não tá funcionando! 🙁

Na próxima aula vamos trazer de volta o css e o js fazendo eles funcionarem.

Aula 15                  Aula 17

Todas as aulas desse curso

Voltar para página principal do blog

Para baixar o código como está até agora, acesse o link abaixo:
https://github.com/toticavalcanti/django_ecommerce/tree/base_template

Esse são meus link de afiliados na Hostinger: Hostinger

Link da página do Código Fluente no Facebook para vocês darem um 👍. 🙂
https://www.facebook.com/Codigofluente-338485370069035/

Meu link de referidos na digitalocean .

Quem se cadastrar por esse link, ganha $100.00 dólares de crédito na digitalocean:

Digital Ocean

E o da one.com:

One.com

Obrigado, até a próxima e bons estudos. 😉

About The Author
-
Previous

Aula 15 – Loja Online – Django – URLs dos Produtos

Next

Aula 17 – Loja Online – Django – Include Tag

Related Videos

Aula 66 – Loja Online – JQuery

Aula 66 – Loja Online – JQuery

Aula 20 – Loja Online – Django – Reverse URL

Aula 20 – Loja Online – Django – Reverse URL

Aula 37 – Loja Online – Django – Breve intro de Foreign Keys

Aula 37 – Loja Online – Django – Breve intro de Foreign Keys

Aula 48 – Loja Online – Django – Ícone do Carrinho no Menu

Aula 48 – Loja Online – Django – Ícone do Carrinho no Menu

Aula 50 – Loja Online – Django – Gerando ID do Pedido

Aula 50 – Loja Online – Django – Gerando ID do Pedido

Aula 60 – Loja Online – Gerenciador de perfil de pagamento

Aula 60 – Loja Online – Gerenciador de perfil de pagamento

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>