Question

我在使用刻录机渲染模板时遇到问题，它没有识别CSS文件，但只有当我为该功能提供多个参数时才会出现此问题。

对于此示例，css正在页面上工作：

@app.route('/test/<usrn>')
def test(usrn):
    return render_template('test.html')

and it looks like this

但是对于这个，css没有工作：

@app.route('/test/<usrn>/<grad>')
def test(usrn,grad):
    return render_template('test.html')

and now it looks like this

test.html的结构：

{% extends 'layout.html' %}

{% block body %}
    <header>
        <div class="container">
            <div id="logo">
                <a href="{{ url_for('index') }}" id="logo"><img src="../static/images/logo2.png"></a>
            </div>
            <nav>
                <ul>
                    <li><a href="{{ url_for('index') }}">Dashboard</a></li>
                    <li><a href="{{ url_for('clasament') }}">Clasament</a></li>
                    <li><a href="{{ url_for('profil') }}">Profil ({{ uname }})
                    </a></li>
                    <li><button onclick="window.location.href='{{ url_for('logout') }}'" class="input_btn1">Log out</button></li>
                </ul>
            </nav>
        </div>
    </header>
{% endblock %}

layout.html的结构：

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="../static/css/main.css?q=1280549780">
</head>
<body>
    {% block body %}{% endblock %}
</body>
</html>

目录结构：

网站
- 静态
  - CSS
    - 的main.css
  - 图像
  - IMG
- 模板
  - 的layout.html
  - 的test.html
- mongo_connect.py

Answer 1

你的CSS文件的路径是硬编码的：这通常是一个坏主意，因为一旦你向新的＆＃34;文件夹上移动路径＆＃34;此CSS路径无效。

最好的方法是使用url_for为您的静态资产生成一致的网址。

<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='css/main.css') }}?q=1280549780">

您还应该对您的其他静态资源应用相同的更改，例如图片，Javascript文件等。

Documentation for url_for

当使用多于1个参数时，Flask jinja模板无法识别css

1 个答案: