html - 无法在 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 之间的相对路径。

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

<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>