Question

我正在尝试冻结一个简单的烧瓶博客。动态网站效果很好，冻结网站后，如果使用以下网址投放：Freezer.serve()该网站已在http://127.0.0.1:5000/正确投放

但是如果我使用Chrome打开构建网站的index.html文件或将其推送到github pages分支并检查repo网站，它们就无法正确链接到CSS。该网站显示为黑色。

以下是site.py：

from flask import Flask, render_template, redirect
from flask_flatpages import FlatPages
from flaskext.markdown import Markdown
from flask.ext.assets import Environment as AssetManager
from flask_frozen import Freezer


# configuration
DEBUG = False
ASSETS_DEBUG = DEBUG
FLATPAGES_AUTO_RELOAD = True
FLATPAGES_EXTENSION = '.md'
FLATPAGES_ROOT = 'pages'
FREEZER_RELATIVE_URLS = True


app = Flask(__name__)
app.config.from_object(__name__)
pages = FlatPages(app)
freezer = Freezer(app)
markdown_manager = Markdown(app, extensions=['fenced_code'], output_format='html5',)
asset_manager = AssetManager(app)

@app.route('/')
def index():
    return render_template('index.html', pages=pages)

@app.route('/<path:path>/')
def page(path):
    return pages.get_or_404(path).html

if __name__ == '__main__':
    if len(sys.argv) > 1 and sys.argv[1] == "build":
        app.debug = False
        asset_manager.config['ASSETS_DEBUG'] = False
        freezer.freeze()
    elif len(sys.argv) > 1 and sys.argv[1] == "serve":
        freezer.serve()
    else:
        app.run(port=8000)

base.html：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{% block page_title %}Home{% endblock page_title %}</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link href="//fonts.googleapis.com/css?family=Asap:400,400italic,700,700italic&amp;subset=latin,latin-ext" rel="stylesheet" type="text/css">
    {%- assets filter="cssmin", output="packed.css",
    "css/style.css"
    %}
        <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}">
    {%- endassets %}
</head>
<body>
    <div class="container">
        <header class="main-title">
            <h1><a href="{{ url_for("index") }}"><strong>Title</strong></a></h1>
        </header>

        <main class="contents" role="main">
            {% block contents %}
            <p>No content found!</p>
            {% endblock contents %}
        </main>

        <nav class="sidebar">
            <ul>
                <li class="home"><a href="{{ url_for("index") }}" hreflang="en">Home</a></li>
            </ul>
        </nav>


        <footer class="site-footer">
            <p>
                <!-- Footer text -->
            </p>
        </footer>
    </div>
    <!-- /container -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
    <script type="text/javascript" src="/static/js/libs/prettify/prettify.js"></script>
    <script type="text/javascript" src="/static/js/app.js"></script>
</body>
</html>

Answer 1

静态网站没有正确链接CSS和图片的两个原因。

1）我们需要指定FREEZER_BASE_URL并分配项目名称。（如果要使用githubpages发布）则使用git文件夹名称。

2）在指定的任何相对网址上，例如<img src="/static/img/us.jpg" alt="">，我们需要将foldername（比如project_folder）添加到相对网址。像这样：

<img src="/project_folder/static/img/us.jpg" alt="">

此解决方案似乎特定于我的问题，但使用相关链接可能会有用。

使用冷冻瓶构建的静态站点没有链接到index.html的CSS文件

1 个答案: