Flask 未在 HTML 页面中呈现某些元素答案

【问题标题】：Flask not rendering some elements in HTML pageFlask 未在 HTML 页面中呈现某些元素
【发布时间】：2022-10-04 22:21:17
【问题描述】：

我在 Chrome 开发工具中没有看到样式或链接元素。我一直试图让图标显示，但看起来它从未呈现过。

编辑：我做了更多的测试。有一个 h1 元素也不会呈现。它根本不会出现在开发工具的 HTML 中。

为什么 Flask 没有在网页上包含它们？

这是我的（完整的）base.html

<!-- Base HTML File -->
{% extends \'bootstrap/base.html\' %}
{% import \'bootstrap/wtf.html\' as wtf %}
<html>
    <head>
        {% block title %}
        {{ base[\'title\'] }}
        {% endblock %}
        <style>
          .navbar-toggle {
              position: absolute;
              right: 0;
            }
          @media (max-width: 786px) {
              .navbar-brand {
                  padding-right: 60px;
                  height: auto;
              }
          }
        </style>
        <link rel=\"shortcut icon\" href=\"{{ url_for(\'favicon\') }}\">
    </head>
    <body>
        {% block navbar %} <!-- Nav Bar -->
        <nav class=\"navbar navbar-default\">
          <div class=\"container\">
            <div class=\"navbar-header\">
              <a style=\"font-size: 20px; padding-top: 16px;\" class=\"navbar-brand\" href=\"{{ url_for(\'index\') }}\">My Website!</a>
              
              <button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#main-menu\" aria-expanded=\"false\">
                <span class=\"sr-only\">Toggle navigation</span>
                <span class=\"icon-bar\"></span>
                <span class=\"icon-bar\"></span>
                <span class=\"icon-bar\"></span>
              </button>
            </div>
            
            {% if base[\'search_bar\'] %}
            <div class=\"navbar-form navbar-left\">
              <div class=\"input-group\">
                <form method=\"POST\" action=\"{{ url_for(\'search\') }}\">
                  {{ base[\'search_bar\'].hidden_tag() }}
                  <div class=\"input-group\">
                      {{ base[\'search_bar\'].search_for(class=\"form-control\", placeholder=\"Search with Barcode\", size=\"25\") }}
                    <span class=\"input-group-btn\">
                      {{ base[\'search_bar\'].start_search(class=\"btn btn-primary\") }}
                    </span>
                  </div><!-- /input-group -->
                </form>
              </div><!-- /input-group -->
            </div><!-- /nav bar form -->
            {% endif %}

            <div id=\"main-menu\" class=\"collapse navbar-collapse\">
              <ul class=\"nav navbar-nav navbar-right\">
                {% if current_user.is_anonymous %}
                <li><a href=\"{{ url_for(\'login\') }}\"><span class=\"glyphicon glyphicon-log-in\"></span> Login</a></li>
                <li><a href=\"{{ url_for(\'signup\') }}\">Register</a></li>
                {% else %}
                <li><a href=\"{{ url_for(\'index\') }}\"><span class=\"glyphicon glyphicon-user\"></span> {{ current_user.username }}</a></li>
                <li><a href=\"{{ url_for(\'logout\') }}\"><span class=\"glyphicon glyphicon-log-in\"></span> Logout</a></li>
                {% endif %}
              </ul>
            </div>
          </div>
        </nav>
        {% endblock %} <!-- Nav Bar -->
        <br/>
        <h1>TESTING</h1>
        {% block content %}{% endblock %} <!-- Main Content -->
        
    </body>
</html>

这将返回 favicon.ico 文件的路径（在 app\\static\\favicon.ico 中）。 print 语句在请求期间从不打印。

import os
from flask import send_from_directory

@app.route(\'/favicon.ico\')
def favicon():
    print(os.path.join(app.root_path, \'static\'))
    return send_from_directory(os.path.join(app.root_path, \'static\'),
                               \'favicon.ico\')

我还在app/__init__.py 中为 \"static\" 设置了一个目录

app = Flask(__name__, template_folder=\'./templates\', static_folder=\'./static\')

来自 Chrome 的屏幕截图

HTML

网络开发工具也没有显示任何 404 错误。

你的第一段有错字。第一件事是什么？好像少了一个字。 View Page Source 是什么样的？您是否从示例的标题中取出了一些代码？ Bootstrap 在您的屏幕截图中，但不在您的代码中。
修正了错字。这是标题中的所有代码。我稍后在 base.html 的正文中使用引导程序作为导航栏，我认为 import 语句会添加该样式表。
@Sobigen 我在帖子中添加了更多信息。似乎头部之外的元素也根本没有出现在网页中

标签： python html css flask

【解决方案1】：

我偶然发现了这个页面：https://pythonhosted.org/Flask-Bootstrap/basic-usage.html 我为头部添加了一个块。它摆脱了我的引导 css，但我现在可以编辑标题。我认为 h1 元素也是如此，它需要位于“body”块中。

【讨论】：