CSS和JavaScript並不在我的網站 工作我使用PythonAnywhereCSS和JS不工作瓶框架
瓶框架目錄內在張力結構:
home/dubspher/mysite/
- README.md
- app.py
- index.html
Static/
- css
- fonts
- images
- js
- sass
HTML原始版本:
<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>
修改後的版本,但不工作:
<html>
<head>
<title>Dubspher.</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<noscript>
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/skel.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/style-xlarge.css') }}" rel="stylesheet">
</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>
<body class="landing">
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.min.js"') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.dropotron.min.js"') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.scrollgress.min.js"') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.scrolly.min.js"') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.slidertron.min.js"') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/skel.min.js"') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/skel-layers.min.js"') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/init.js"') }}"></script>
正如你所看到的,我將JS從另一篇文章中的建議中移除了!並且將所有樣式表文件移動到一個名爲static的新文件夾中!
我清除了瀏覽器上的緩存,但在檢查模式下可以看到404錯誤。
http://dubspher.pythonanywhere.com
App.py
from flask import Flask
# set the project root directory as the static folder, you can set others.
app = Flask(__name__, static_folder='/home/dubspher/mysite/')
@app.route('/')
def static_file():
return app.send_static_file('index.html')
if __name__ == "__main__":
app.run()
你不發表您的燒瓶腳本,但如果你效法我,你不想叫你的/ home/dubspher靜態的子文件夾/ mysite目錄。你的CSS文件應該在/ home/dubspher/mysite/css中。但是你確實需要發佈當前的腳本。如果您正在使用我發佈的示例,那麼您也不應該使用url_for。如果您打算使用原始帖子的內容,則可以使用url_for。在我的示例中,url_for不是必需的。你的src只是src =「/ static/js/jquery.js」。 – clockwatcher
@clockwatcher我在bash控制檯中使用mv命令移動文件,所以如果它不是問題,我只需保留靜態文件夾並在樣式表的路徑中添加/ static,我添加了url_for,因爲它適用於其他人!我非常感謝你的幫助。 Flask腳本添加了! –
最好將所有靜態資源放在靜態子文件夾中。所以你現在的問題就是設計得更好。所以堅持下去。您只需將您的index.html文件夾移動到靜態文件夾中,並將路徑更新到您的static_folder。從技術上講,你根本不需要使用static_folder參數,就像你現在已經佈置的那樣。由於「./static」相對於app.py是燒瓶默認的方式。你需要做的就是設置你的static_url_path。但我不想迷惑你。嘗試下面的答案。 – clockwatcher