python - 扩展 layout.html 不适用于我创建的网页之一

问题描述

我创建了一个应用程序，除了我创建的这一页之外，一切似乎都运行良好。内容在那里，但是没有应用页面的样式。实际上，我创建的页面内容似乎覆盖了布局样式。layout.html 模板适用于所有其他网页，我很困惑它似乎不适用于此页面。

为了提供上下文，此页面涉及按公司过滤帖子。

我的 HTML 模板是：

<!DOCTYPE html> {% extends "layout.html" %} {% block content %} {% for post in posts.items %}
<article class="media content-section">
    <div class="media-body">
        <div class="article-metadata">
            <a class="mr-2" href="{{ url_for('company_posts', company=post.company) }}">{{ post.company }}</a>
            <small class="text-muted">{{ post.date_posted }}</small>
        </div>
        <h2><a class="article-title" href="#">{{ post.job_title }}</a></h2>
        <p class="article-content">{{ post.sector }}</p>
        <p class="article-content">{{ post.location }}</p>
        <p class="article-content">{{ post.employment_type }}</p>
        <a href="{{ url_for('hello', id=post.id)}}" class="btn btn-primary text-right">More Info</a>
    </div>
</article>
{% endfor %} {% for page_num in posts.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %} {% if page_num %} {% if posts.page == page_num %}
<a class="btn btn-info mb-4" href="{{ url_for('jobs', page=page_num)}}">{{ page_num }}</a> {% else %}
<a class="btn btn-outline-info mb-4" href="{{ url_for('jobs', page=page_num)}}">{{ page_num }}</a> {% endif %} {% else %} ... {% endif %} {% endfor %} {% endblock content %}

我的路线是：

@app.route("/company/<string:company>")
def company_posts(company): #show all company job posts from specific company
    page = request.args.get('page', 1, type=int)
    posts = Job_Requirements.query.filter_by(company=company).order_by(Job_Requirements.id.desc()).paginate(per_page=4) 
    return render_template('company_posts.html', posts=posts)

这是我的 layout.html 模板

<!DOCTYPE html>
<html>

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> {% if title %}
    <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='main.css')}}">
    <title>{{ title }} | CVLink</title>
    {% else %}
    <title>CVLink</title>
    {% endif %}
</head>

<body>
    <header class="site-header">
        <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
            <div class="container">
                <a class="navbar-brand mr-4" href="/">CVLink</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
                <div class="collapse navbar-collapse" id="navbarToggle">
                    <div class="navbar-nav mr-auto">
                        <a class="nav-item nav-link" href="{{ url_for('home') }}">Home</a>
                        <a class="nav-item nav-link" href="{{ url_for('jobs') }}">Jobs</a>
                    </div>
                    <!-- Navbar Right Side -->
                    <div class="navbar-nav ms-auto">
                        {% if current_user.is_authenticated %}
                        <!--<a class="nav-item nav-link" href="{{ url_for('employer_account') }}">Employer Account</a>-->
                        <a class="nav-item nav-link" href="{{ url_for('employer_account') }}">Post A Job</a>
                        <a class="nav-item nav-link" href="{{ url_for('account') }}">Profile</a>
                        <a class="nav-item nav-link" href="{{ url_for('logout') }}">Logout</a> {% else %}
                        <a class="nav-item nav-link" href="{{ url_for('login') }}">Login</a>
                        <a class="nav-item nav-link" href="{{ url_for('register') }}">Register</a> {% endif %}
                    </div>
                </div>
            </div>
        </nav>
    </header>
    <main role="main" class="container">
        <div class="row">
            <div class="col-md-8">
                {% with messages = get_flashed_messages(with_categories=true) %} {% if messages %} {% for category, message in messages %}
                <div class="alert alert-{{ category }}">
                    {{ message}}

                </div>
                {% endfor%} {% endif %} {% endwith %} {% block content %}{% endblock %}
            </div>
            <!--<div class="col-md-4">
                <div class="content-section">
                    <h3>Noticeboard</h3>
                    <p class="text-muted">More Information</p>
                    <ul class="list-group">
                        <li class="list-group-item list-group-item-light">Latest Job Posts</li>
                        <li class="list-group-item list-group-item-light">Announcements</li>
                        <li class="list-group-item list-group-item-light">Calendars</li>
                        <li class="list-group-item list-group-item-light">etc</li>
                    </ul>
                </div>
            </div>-->
        </div>
    </main>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

任何帮助都感激不尽。

标签： pythonhtmlcssflask

python - 扩展 layout.html 不适用于我创建的网页之一

问题描述

解决方案

推荐阅读