无法在HTML中引用CSS(python/flask)

Question

我正在尝试使用Python和Flask创建一个简单的网站.现在,我已经完成了HTML和CSS,但我的页面没有显示任何CSS.我的文件位于以下层次结构中:

/static
/static/css/style.css
/static/js/skel.js

/templates
/templates/index.html

我的html文件中有以下代码:

<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/config.js"></script>
<script src="../static/js/skel.min.js"></script>
<script src="../static/js/skel-panels.min.js"></script>

<noscript>    
<link rel="stylesheet" href="../static/css/skel-noscript.css" />
<link rel="stylesheet" href="../static/style.css" />
<link rel="stylesheet" href="../static/css/style-desktop.css" />
</noscript>

当我运行它时,终端显示JS文件的"304"并从"/static/js/skel.js"获取它们,我认为这是正确的,但它然后显示CSS文件的"404"并从中获取它们"/css/style.css".我不太清楚为什么会发生这种情况 - 这不应该是从/static/css/style.css中检索文件吗？我该如何解决？

谢谢您的帮助.

Answer 1

您的磁盘布局与 Flask站点提供的路由不同.不要依赖于templates和之间的相对路径static.

相反,让Flask 使用Jinja模板中的函数为您计算静态文件的路径url_for():

<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/config.js') }}"></script>
<script src="{{ url_for('static', filename='js/skel.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/skel-panels.min.js') }}"></script>

<noscript>    
<link rel="stylesheet" href="{{ url_for('static', filename='css/skel-noscript.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/style-desktop.css') }}" />
</noscript>