Flask: Dynami c маршрутизация приводит к игнорированию render_template (jinjer2) html -форматирование - PullRequest
0 голосов
/ 03 мая 2020

это мой первый пост о stackoverflow, я обычно ищу до смерти и нахожу решение, но эта проблема, с которой я сталкиваюсь, сводит меня с ума.

Я прохожу курс веб-программирования, где я должен представить проект (страница рецензий на книги). После регистрации и входа на сайт можно искать книгу и проверять ее детали.

В search.html Я использую href="{{ url_for('layout_books', isbn=isbn) }}", который вызывает метод в моем application.py.

Здесь это search.html:

{% extends "layout.html" %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} Find your Book {% endblock %}</title>
</head>
<body>
{% block body %}
  <div class="search-container">
    <form action="{{ url_for('get_books') }}" method="post">
      <input type="text" placeholder="Search..." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
      <small id="username_help" class="form-text text-muted">{{ message }}</small>
  </div>
    <h1>Results:</h1>
    <ul>
        {% for title, author, year, isbn in search_results %}
        <li> <i>Title:</i> <a href="{{ url_for('layout_books', isbn=isbn) }}">{{ title }}</a>,
            <i>Author:</i> {{ author }},
            <i>Year:</i> {{ year }}
            - ISBN {{ isbn }}</li>
        {% endfor %}
    </ul>
        <small style="color:magenta"> {{ result }}</small>
{% endblock %}
</body>
</html>
@app.route("/layout_books/<isbn>")
@project_tools.login_required
def layout_books(isbn):
    # some stuff happens here: getting data from database

    return render_template("layout_books.html",
                           title=title,
                           author=author,
                           year=year,
                           isbn=isbn,
                           review_count=review_count,
                           average_rating=average_score,
                           gr_number_ratings=gr_number_ratings,
                           gr_average_rating=gr_average_rating,
                           message=message,
                           reviews=reviews)

Поэтому вместо получения этого формата (подстраница myreviews): правильно отображаемая панель навигации

Я все испортил форматирование (layout_books / isbn-number-here): введите описание изображения здесь

Полагаю, мне не хватает какой-то концепции, но я не могу понять, что это такое.

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * layout_books.html выглядит так, но даже удаление его до первых двух строк выявляет ту же проблему:

{% extends "layout.html" %}
{% block title %} {{ title }} {% endblock %}
{% block body %}
<h1>{{ title }}</h1>
        <div class="container">
            <ul>
                <li>Title: <i>{{ title }}</i></li>
                <li>Author: <i>{{ author }}</i></li>
                <li>Year: <i>{{ year }}</i></li>
                <li>ISBN: <i>{{ isbn }}</i></li>
                <li>Review Count: <b>{{ review_count }}</b></li>
                <li>Average User Rating: <b>{{ average_rating }}</b></li>
                <li>Goodreads Review Count: <b>{{ gr_number_ratings }}</b></li>
                <li>Average Goodreads Rating: <b>{{ gr_average_rating }}</b></li>
            </ul>
        </div>
    <form action="{{url_for('add_review')}}" method="post">
        <button>Write a book review -></button>
    </form>
    <h3>{{ message }}</h3>
        <div class="container">
            {% for name, title, text, rating in reviews %}
            <ul>
                <li><b>{{ title }}</b> - <small>by {{ name }} </small>Rating: {{ rating }}
                <details>
                    <summary>
                        Collapse for full review.
                    </summary>
                    <p> {{ text }} </p>
                </details>
                </li>
            </ul>
            {% endfor %}
        </div>
{% endblock %}

Edit: добавлен родительский шаблон layout.html

Вот родительский шаблон layout.html. Я не добавил это ранее, потому что я не знал, что это будет иметь значение. Как оказалось, это было ...

<html>
    <head>
        <title>{% block title %} Stuff here {% endblock %}</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
        <link rel="stylesheet" href="static/navigation_bar.css">
<!--    add this workaround because page is not correctly formatted with dynamic routing. It seems as though in this
        case the import of local css file is ignored. This block is used in layout_books.html-->
        <style>
        {% block style %}
        {% endblock %}
        </style>
<!--    end of workaround    -->
    </head>
    <body>
    <head><h1>{% block head %} {% endblock %}</h1></head>
    <!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-custom shadow fixed-top">
  <div class="container">
    <a class="navbar-brand" href="{{ url_for('index') }}">Book Reviews</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 active">
          <a class="nav-link" href="{{ url_for('index') }}">Home
                <span class="sr-only">(current)</span>
              </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{{ url_for('search') }}">Search</a>
        </li>
          {% if session.get('username') %}
        <li class="nav-item">
          <a class="nav-link" href="{{ url_for('my_reviews') }}">My Reviews</a>
        </li>
          <li class="nav-item">
          <a class="nav-link" href="{{ url_for('logout') }}">Logout - {{ session.get('username') }}</a>
        </li>
          {% else %}
          <li class="nav-item">
          <a class="nav-link" href="{{ url_for('login') }}">Login</a>
        </li>
          {% endif %}
          {% if not session.get('username') %}
        <li class="nav-item">
          <a class="nav-link" href="{{ url_for('register') }}">Register</a>
        </li>
          {% endif %}
      </ul>
    </div>
  </div>
</nav>
    {% block body %}
    {% endblock %}
    </body>
</html>

Ответы [ 2 ]

0 голосов
/ 04 мая 2020

Как оказалось, использование динамической c маршрутизации заставляет отрисованный html игнорировать локально связанный файл css, который я определил в родительском html файле layout.html. Поэтому в качестве обходного пути я добавил {% block style %} {% endblock %} в <style> теги. Затем мне пришлось скопировать содержимое моего локального css файла в блок style. Это довольно уродливо, но работает.

0 голосов
/ 03 мая 2020

В layout_books.html отсутствуют все теги html (присутствующие в search.html).

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {{ title }} {% endblock %}</title>
</head>
<body>

и в конце:

</body>
</html>

Следующая ссылка может помочь вам проверить код html: https://validator.w3.org/#validate_by_input

...