2017-06-03 78 views
0

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() 
+0

你不發表您的燒瓶腳本,但如果你效法我,你不想叫你的/ home/dubspher靜態的子文件夾/ mysite目錄。你的CSS文件應該在/ home/dubspher/mysite/css中。但是你確實需要發佈當前的腳本。如果您正在使用我發佈的示例,那麼您也不應該使用url_for。如果您打算使用原始帖子的內容,則可以使用url_for。在我的示例中,url_for不是必需的。你的src只是src =「/ static/js/jquery.js」。 – clockwatcher

+0

@clockwatcher我在bash控制檯中使用mv命令移動文件,所以如果它不是問題,我只需保留靜態文件夾並在樣式表的路徑中添加/ static,我添加了url_for,因爲它適用於其他人!我非常感謝你的幫助。 Flask腳本添加了! –

+0

最好將所有靜態資源放在靜態子文件夾中。所以你現在的問題就是設計得更好。所以堅持下去。您只需將您的index.html文件夾移動到靜態文件夾中,並將路徑更新到您的static_folder。從技術上講,你根本不需要使用static_folder參數,就像你現在已經佈置的那樣。由於「./static」相對於app.py是燒瓶默認的方式。你需要做的就是設置你的static_url_path。但我不想迷惑你。嘗試下面的答案。 – clockwatcher

回答

1

安排好喜歡你的文件,目前擁有它們,請將您的index.html文件爲靜態子文件夾的根目錄。

home/dubspher/mysite/ 

- README.md 

- app.py 


Static/ 
- index.html 

- css 

- fonts 

- images 

- js 

- sass 

,並使用以下app.py

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

,改變你的index.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="/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> 

你的樣式表在JavaScript中引用。修改init.js以便它引用正確的路徑:

 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' } 
+0

如果Static在文件系統上真正大寫,請將其更改爲小寫靜態。因爲我在所有代碼引用中都使用小寫字母。 – clockwatcher

+0

我猜JS正在工作,但CSS仍然沒有找到(404)你建議在評論中使用src =,但在你的回覆中你已經使用過href =是正確的嗎?靜態文件夾不是大寫。謝謝! –

+0

正如你所看到的,我可以通過url http://dubspher.pythonanywhere直接訪問文件。com/static/css/style.css –