CSS和JS不适用于Flask框架

2024-03-29 14:15:08 发布

您现在位置:Python中文网/ 问答频道 /正文

Css和Javascript在我的网站上不起作用 我在PythonAnywhere上使用了烧瓶框架

目录结构:

home/dubspher/mysite/

 - README.md 

 - app.py

 - index.html

Static/

 - css

 - fonts

 - images

 - js

 - sass

HTML的原始版本:

^{pr2}$

修改版本但不工作:

<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的新文件夹中!在

我清除了浏览器上的缓存,但在inspect模式下可以看到404个错误。在

http://dubspher.pythonanywhere.com

在应用程序副本在

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

Tags: textsrcappurlfortypejslink
1条回答
网友
1楼 · 发布于 2024-03-29 14:15:08

把你现在拥有的文件整理好,把你的索引.html文件放入静态子文件夹的根目录中。在

home/dubspher/mysite/

 - README.md 

 - app.py


Static/
 - index.html 

 - css

 - fonts

 - images

 - js

 - sass

并使用以下方法应用程序副本在

^{pr2}$

把你的索引.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中被引用。修改初始化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' }

相关问题 更多 >