Question

Css和Javascript无法在我的网站上运行我在PythonAnywhere上使用Flask框架

目录结构：

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

Answer 1

使用您当前拥有的文件布局，将index.html文件移动到static子文件夹的根目录。

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

CSS和JS不适用于Flask Framework

1 个答案: