Legacy of Templates not working

Asked

Viewed 501 times

1

I’m trying to create blocks within my base template (index.html), but apparently the block is not used.

index.html

{% load static %}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Portfolio's</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{% static 'content/css/bootstrap.css' %}">
    <link href="https://fonts.googleapis.com/css?family=Lobster|Oswald|Port+Lligat+Slab" rel="stylesheet">
     .
     .
     .
    <div class='container'>
        <div class='row'>
            <div id='artigo' class='col-lg-8'>

                {% block corpo_artigo %}

                {% endblock %}
     .
     .
     .

When I call it in a separate file, it is not effective

corpo_article.html

{% extends "index.html" %}
{% block corpo_artigo %}

    {% for item in conteudo_artigo%}

        {% if item.photo %}
        <img src="{{item.photo}}" class="img-responsive" alt="..."> 
        {% endif %}

            <a id='titulo' href="/artigos/{{item.id}}"><h1>{{item.titulo}}</h1></a>
            <h5 id ='autor'>{{item.autor}}</h5>
            <h5 id ='tag'>{{item.tag}}</h5>

            {% if item.corpo|length > 1000 %}
                <p id = 'corpo_artigo'>{{item.corpo|truncatewords:200|safe}}</p> 
                <button class="btn btn-default navbar-btn"> <a href="/artigos/{{item.id}}">Continue lendo</a></button>
            {% else %}
                <p>{{item.corpo}}</p>
            {% endif%}
                <h5 id ='data'>{{item.data}}</h5>

        {% endfor %}

{% endblock %}

Obs I’m using a directory called templates using:

'DIRS': [os.path.join(BASE_DIR, 'templates')],

EDIT: I noticed that the {% extends "index.html"%} tag works normally, but everything I put inside {% block % doesn’t work.

'extends' funciona.

  • Why would you be using a style tag inside a block ? wouldn’t it be easier just to call the style sheet ? in Django just create a folder named Static and place the stylesheet there then create olink for it in html using <link rel="stylesheet" type="text/css" href="{% Static 'style.css' %}" />

  • Yes, I guess I wasn’t very happy with my example. I actually know about this feature, but the problem persists with whichever element I put inside a block.

  • can inform if there is an error ? or just does not appear the template ?

  • The template simply does not appear. If I only use {% extends "index.html" %} it extends the code of the index page, but if I put something inside a block it does not display.

1 answer

0


During my researches I realized that this type of error is a recurring thing with respect to the heritage of Templates so I decided to leave here the solution to the problem and if possible contribute with the knowledge of others who will fall into the same impasse.

I believe the confusion is in how the {%extends%} tag works. The examples given in the documentation and in some posts across the web lead us to believe that it behaves like a 'include', but in fact it not has nothing to do with it.

A Tag {%extends%} really extend content from one particular page to another. It may seem trivial, but I will give an example that elucidates such behavior, so let’s start from the beginning:

py.

from heranca import views
from django.conf.urls import url
from django.contrib import admin

urlpatterns = [
   url(r'^admin/', admin.site.urls),
   url(r'^$', views.home), #Exemplo simles de URL 
]

We create a simple URL and import our view called 'home'.

heranca/views.py

from django.shortcuts import render

def home(request):
    return render(request, 'index.html')

This is where the main confusion comes in. It would be intuitive to call an html that is actually our html base but actually what we should call in our view is the html where our blocks will be, thus generating another html that serves as a skeleton.

index.html

{% extends 'esqueleto.html'%}
{% block conteudo %}
   <p> Ja o conteudo presente dentro dos blocos apareceria somente caso o bloco seja devidamente declarado na pagina 'esqueleto'
    Dessa forma a pagina 'esqueleto' age como um esqueleto do nosso site possibilitando rodar elementos que são comuns a 
    todas as páginas.
   </p>
 {% endblock%}

In this way we should store on the 'skeleton' page the content that we really want to be relevant to other pages that make reference to it.

 <!DOCTYPE html>
 <html>
 <head>
    <title>Teste de herança </title>
 </head>
 <body>
 <div>
    <h1>Titulo do site</h1>
    <p>O conteudo presente na pagina 'esqueleto' será comum a pagina 'index' pois a mesma 'extende' seu conteudo a partir da tag 'extends'</p>

    {% block conteudo%}

    {% endblock%}
</div>

If you reread the question of this post you will notice that there the tag {% extends %} was being used in a similar way to a include in python, when it works differently.

I hope to contribute to the community in some way with this. This post helped me to reach this conclusion

Browser other questions tagged

You are not signed in. Login or sign up in order to post.