Question

我一直在尝试使用导航瓶在导航栏中创建此搜索功能，该功能将在网站的所有页面中提供。

我需要将其添加到布局模板中，该模板可以扩展到所有其他模板。有没有一种简单的方法，而不必遍历每条路线并将此表单添加到其中？现在，这只是给我一个错误，因为我的所有其他路线都无法识别该表格。

如果我必须在所有路线中都添加此特定的搜索表单，这确实很繁琐。

我的导航栏搜索功能如下：

        <form method="POST" action="{{ url_for('main.searchresults', search=searchq) }}" enctype="multipart/form-data">
              <div class="md-form active-cyan active-cyan-2">
                  <a class="md-form active-cyan active-cyan-2" type="text" placeholder="Search" aria-label="Search">{{ searchbar.search }}</a>

              </div>
        </form>
                  <a class="ml-2" href="{{ url_for('main.searchresults', search=searchq) }}">{{ searchbar.submit(class="btn btn-outline-primary") }}</a>

我可以通过在所有路线中添加即时通讯使用的Flaskform（定义为搜索栏）来解决此问题，但我希望（并假设）有一种更简单的方法来执行此操作，因为这似乎效率很低。

Answer 1

如果您使用jinja作为模板，则可以为导航栏创建文件（例如includes/_navbar.html）并将其包含在模板中。

{% include 'includes/_navbar.html' %}

通常，您会拥有某种“基本” HTML文件，所有其他文件都将继承/包含这些HTML文件。一个例子是：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My website</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        {% include 'includes/_navbar.html' %}

        <div class="container">
            {% block body %}{% endblock %}
        </div>


        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
</html>

然后，为您的所有模板扩展此基本模板。例如

{% extends 'base.html' %}

{% block body %}

    <div class="jumbotron text-center">
        <img src="../static/logo.png" alt="Logo" width="160" height="120">
        {% if session.get('logged_in') %}
            <h1>Welcome {{ session.user.username }}!</h1>
        {% else %}
            <h1>Welcome to My website!</h1>
        {% endif %}
    </div>

{% endblock %}

有没有一种方法可以对所有模板使用一种形式？

1 个答案: