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

【问题标题】：A static site built using frozen flask doesn't have the CSS files linked to index.html使用冷冻瓶构建的静态站点没有链接到 index.html 的 CSS 文件
【发布时间】：2014-12-01 11:43:21
【问题描述】：

我正在尝试冻结一个简单的烧瓶博客。动态网站运行良好，冻结该网站后，如果使用：Freezer.serve() 提供该网站在http://127.0.0.1:5000/ 正确服务

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

这里是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>

【问题讨论】：

标签： python-2.7 flask flask-flatpages

【解决方案1】：

静态网站未正确链接 CSS 和图像的两个原因。

1) 我们需要指定FREEZER_BASE_URL 并指定项目名称。（如果你想使用 githubpages 发布）然后是 git 文件夹名称。

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

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

这个解决方案似乎是针对我的问题的，但使用相关链接可能会很有用。

【讨论】：