从 .html 文件读取内容的简单 Flask 应用程序。外部样式表被阻止了吗？

Question

我制作了一个非常简单的Flask应用程序，它从一个".html"文件中读取其内容。该应用程序运行正常，除了样式外。奇怪的是，我的内联CSS代码可以工作，但外部样式表不行。我已经检查了语法，应该没问题。难道Flask会防止读取".css"文件吗？

这个文件夹中的文件可以在这里查看。这3个文件都在同一个文件夹中。

- Bentley4

---

访问此处以获取更多详细信息：https://dev59.com/T2Ag5IYBdhLWcg3wq8eU#55176881 - Akshay Karande

Answer 1

您的代码并未使用Flask进行文件服务，而仅是读取文件并将其发送到浏览器-这就是为什么URL不起作用的原因。

您需要在方法内渲染文件。

首先，在与您的.py文件相同的目录中创建一个名为templates的文件夹，并将您的HTML文件移动到此文件夹中。创建另一个名为static的文件夹，并将样式表放入该文件夹中。

您应该有：

/flaskwp1.py
/templates
  webcode.html
/static
  webcodestyle.css

然后，按照如下方式调整你的代码：

from flask import Flask, render_template

app = Flask('flaskwp1')
# webcode = open('webcode.html').read() - not needed

@app.route('/')
def webprint():
    return render_template('webcode.html') 

if __name__ == '__main__':
    app.run(host = '0.0.0.0', port = 3000)

编辑webcode.html：

<link rel="stylesheet"
      type="text/css"
      href="/static/webcodestyle.css"/>

- Burhan Khalid

---

我按照您的文件夹结构进行了设置，并且像您写的那样调整了我的 flaskwp1.py 和 webcode.html 文件，但结果仍然没有改变。:( 无论如何，非常感谢您的详细说明。 - Bentley4

谢谢，它起作用了！我总是需要重新启动浏览器才能应用样式更改，这正常吗？ - Bentley4

取决于你的浏览器缓存; 通常你可以使用CTRL+F5强制请求刷新。 - Burhan Khalid

Answer 2

您需要创建一个特定的静态 URL 和目录。

url_for('static', filename='style.css')

这将使您的应用程序在网络应用程序模块的根目录内查找名为“static”的文件夹中的名为“style.css”的文件。它将在url“/static/style.css”上对您的网络应用程序可用。

您可能希望发布html文件和python代码本身的内容，以便我们可以看到可能出现的问题。听起来要么是url不正确，要么是您没有设置Web服务器以从该位置提供静态文件。

- aychedee

---

我发布了我的网页文件夹中的每个文件，请在原帖中单击“此处”。我尝试了你的建议。它没有改变任何东西。您可以在此处查看我根据您的说明调整的.py文件（https://gist.github.com/2551827）。如果.css文件与.py和.html文件位于同一文件夹中（我的原始文件夹设置），那么为什么它甚至需要url_for()函数呢？ - Bentley4