¿Cómo incluyo un archivo HTML en una plantilla Jinja2?


82

Estoy usando el micro-framework Flask para mi servidor que usa plantillas Jinja.

Tengo una template.htmlplantilla para padres y algunas para niños llamadas child1.htmly child2.html, algunas de estas plantillas para niños son archivos HTML bastante grandes y me gustaría dividirlos de alguna manera para una mejor lucidez sobre mi trabajo.

Contenido de mi main.pyguión:

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/')
@app.route('/<task>')
def home(task=''):
  return render_template('child1.html', task=task)

app.run()

El simplificado template.html:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div class="container">
      {% block content %}{% endblock %}
    </div>
  </body>
</html>

La magia está en child1.html:

{% extends 'template.html' %}
{% block content %}
  {% if task == 'content1' %}
    <!-- include content1.html -->
  {% endif %}
  {% if task == 'content2' %}
    <!-- include content2.html -->
  {% endif %}
{% endblock %}

En lugar de los comentarios:

<!-- include content1.html -->

Tengo una gran cantidad de texto html y es muy difícil hacer un seguimiento de los cambios y no cometer algunos errores, que luego son bastante difíciles de encontrar y corregir.

Me gustaría simplemente cargar el en content1.htmllugar de escribirlo todo child1.html.

Me encontré con esta pregunta , pero tuve problemas para implementarla.

Creo que Jinja2 podría tener una mejor herramienta para eso.

NOTA: Es posible que el código anterior no funcione correctamente, solo lo escribí para ilustrar el problema.

Respuestas:


179

Utilice la {% include %}directiva jinja2 .

{% extends 'template.html' %}
{% block content %}
    {% if task == 'content1' %}
        {% include 'content1.html' %}
    {% endif %}
    {% if task == 'content2' %}
        {% include 'content2.html' %}
    {% endif %}
{% endblock %}

Esto incluirá el contenido del archivo de contenido correcto.


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.