Python CSS和JS不适用于Flask框架
Css和Javascript在我的网站上不起作用 我在Pythonywhere上使用Flask框架 目录结构：Python CSS和JS不适用于Flask框架,python,html,css,flask,pythonanywhere,Python,Html,Css,Flask,Pythonanywhere,Css和Javascript在我的网站上不起作用 我在Pythonywhere上使用Flask框架 目录结构： home/dubspher/mysite/ - README.md - app.py - index.html Static/ - css - fonts - images - js - sass HTML的原始版本： <html> <head> <title>Dubspher.</
home/dubspher/mysite/
- README.md
- app.py
- index.html
Static/
- css
- fonts
- images
- js
- sass
<html>
<head>
<title>Dubspher.</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/jquery.scrollgress.min.js"></script>
<script src="js/jquery.scrolly.min.js"></script>
<script src="js/jquery.slidertron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-xlarge.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
如果文件的布局与当前相同，请将index.html文件移动到静态子文件夹的根目录中
home/dubspher/mysite/
- README.md
- app.py
Static/
- index.html
- css
- fonts
- images
- js
- sass
from flask import Flask
# set the project root directory as the static folder, you can set others.
app = Flask(__name__, static_url_path="/static", static_folder='/home/dubspher/mysite/static')
@app.route('/')
def static_file():
return app.send_static_file('index.html')
if __name__ == "__main__":
app.run()
<html>
<head>
<title>Dubspher.</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/jquery.dropotron.min.js"></script>
<script src="/static/js/jquery.scrollgress.min.js"></script>
<script src="/static/js/jquery.scrolly.min.js"></script>
<script src="/static/js/jquery.slidertron.min.js"></script>
<script src="/static/js/skel.min.js"></script>
<script src="/static/js/skel-layers.min.js"></script>
<script src="/static/js/init.js"></script>
<noscript>
<link rel="stylesheet" href="/static/css/skel.css" />
<link rel="stylesheet" href="/static/css/style.css" />
<link rel="stylesheet" href="/static/css/style-xlarge.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="/static/css/ie/v9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="/static/css/ie/v8.css" /><![endif]-->
</head>
您没有发布flask脚本，但如果您遵循我的示例，则不希望在/home/dubspher/mysite目录中使用名为static的子文件夹。您的css文件应该位于/home/dubspher/mysite/css中。但是你真的需要发布你当前的flask脚本来确定。此外，如果您正在使用我发布的示例，则不应该使用url_。如果你要使用原始帖子的内容，你会使用url_。在我的示例中，url_for不是必需的。您的src应该是src=“/static/js/jquery.js”。@clockwatcher我正在使用bash控制台中的mv命令移动文件，因此如果没有问题，我将保留静态文件夹并在样式表的路径中添加/static，我添加了url\u，因为它为其他人工作！我真的很感谢你的帮助。烧瓶脚本添加！最好将所有静态资源都放在静态子文件夹中。所以你现在在问题中提出的方式设计得更好。所以坚持下去。您只需要将index.html文件夹移动到静态文件夹中，并更新静态文件夹的路径。从技术上讲，您根本不需要按照现在的布局方式使用static_folder参数。与app.py相对的“/static”是烧瓶默认设置的方式。您需要做的就是设置静态路径。但我不想把你搞糊涂。请尝试下面的答案。如果文件系统中的Static是大写的，请将其更改为小写Static。因为我在所有的代码引用中都使用小写。我猜JS正在工作，但是CSS仍然没有找到（404）。您建议在评论中使用src=，但在您的回复中使用href=是否正确？静态文件夹未大写。谢谢正如你所看到的，我可以通过url直接访问文件。这意味着它正在工作。问题是，您正在init.js中的javascript代码中加载样式表，但没有对其进行更新。实际上没有使用index.html中的样式表——请注意它们周围的标记。我在上面的答案的init.js中添加了一些行。我只是在其他论坛上浏览时发现了这一点！非常感谢！
from flask import Flask
# set the project root directory as the static folder, you can set others.
app = Flask(__name__, static_url_path="/static", static_folder='/home/dubspher/mysite/static')
@app.route('/')
def static_file():
return app.send_static_file('index.html')
if __name__ == "__main__":
app.run()
<html>
<head>
<title>Dubspher.</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/jquery.dropotron.min.js"></script>
<script src="/static/js/jquery.scrollgress.min.js"></script>
<script src="/static/js/jquery.scrolly.min.js"></script>
<script src="/static/js/jquery.slidertron.min.js"></script>
<script src="/static/js/skel.min.js"></script>
<script src="/static/js/skel-layers.min.js"></script>
<script src="/static/js/init.js"></script>
<noscript>
<link rel="stylesheet" href="/static/css/skel.css" />
<link rel="stylesheet" href="/static/css/style.css" />
<link rel="stylesheet" href="/static/css/style-xlarge.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="/static/css/ie/v9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="/static/css/ie/v8.css" /><![endif]-->
</head>
global: { href: '/static/css/style.css', containers: 1400, grid: { gutters: ['2em', 0] } },
xlarge: { media: '(max-width: 1680px)', href: '/static/css/style-xlarge.css', containers: 1200 },
large: { media: '(max-width: 1280px)', href: '/static/css/style-large.css', containers: 960, grid: { gutters: ['1.5em', 0] }, viewport: { scalable: false } },
medium: { media: '(max-width: 980px)', href: '/static/css/style-medium.css', containers: '90%', grid: { zoom: 2 } },
small: { media: '(max-width: 736px)', href: '/static/css/style-small.css', containers: '90%!', grid: { gutters: ['1.25em', 0], zoom: 3 } },
xsmall: { media: '(max-width: 480px)', href: '/static/css/style-xsmall.css' }