Я пытаюсь сгенерировать контент из нескольких html файлов на одной веб-странице, используя шаблон jinja - PullRequest
Новая
       5

Я пытаюсь сгенерировать контент из нескольких html файлов на одной веб-странице, используя шаблон jinja

0 голосов
/ 04 апреля 2020 
index.html
...
...
    <!-- ######################     Main Navigation   ########################## -->
  <header>
    <nav>
      <ul>
        {% for href, caption in [('#home','Home'),('#aboutme','About Me'), 
        ('#resume','Portfolio'),('#contact','Contact')] %}
            {% if href == '#home' %}
                <li><a class = "active" href="{{ href }}">{{ caption }}</a></li>
            {% else %}
                <li><a href="{{ href }}">{{ caption }}</a></li>
            {% endif %}
        {% endfor %}
      </ul>
    </nav>
  </header>

    <div class="content">
      {% for item in ['home','aboutme','resume','contact'] %}
      <section id="{{ item }}">{% block content %}{% endblock %}</section>
      {% endfor %}
    </div>

  </body>
  </html>

---------------------
home.html


{% extends "index.html" %}
{% block content %}
<div class ="home">
    <h1>My Home page header</h1>
    <p>test text here</p>
</div>
{% endblock %}

Как видно из исходного кода на страницах, все работает, кроме двух тегов раздела. Вот где должен выводиться мой контент из другого файла (home. html). вывод исходного кода

1 Ответ

0 голосов
/ 04 апреля 2020

Если вы визуализируете index.html, вам нужно изменить шаблон следующим образом: 

index.html
...
...
    <!-- ######################     Main Navigation   ########################## -->
  <header>
    <nav>
      <ul>
        {% for href, caption in [('#home','Home'),('#aboutme','About Me'), 
        ('#resume','Portfolio'),('#contact','Contact')] %}
            {% if href == '#home' %}
                <li><a class = "active" href="{{ href }}">{{ caption }}</a></li>
            {% else %}
                <li><a href="{{ href }}">{{ caption }}</a></li>
            {% endif %}
        {% endfor %}
      </ul>
    </nav>
  </header>

    <div class="content">
      {% for item in ['home','aboutme','resume','contact'] %}
      <section id="{{ item }}">{% include 'home.html' %}</section>
      {% endfor %}
    </div>

  </body>
  </html>

---------------------
home.html

<div class ="home">
    <h1>My Home page header</h1>
    <p>test text here</p>
</div>

{% include 'home.html' %} поместит home.html контент туда, где вы его используете. Вы можете использовать его, когда хотите включить содержимое другого шаблона.

{% extends "index.html" %} означает, что вы добавляете больше содержимого в базовый файл, который здесь index.html. Вы должны использовать его при рендеринге home.html. Джинджа не будет читать все файлы шаблонов перед отображением страницы, чтобы найти блоки и расширить теги, чтобы включить их в вашу страницу. вот почему ваш код не работает.

...