1

我正在尝试冻结一个简单的烧瓶博客。动态网站运行良好，冻结网站后，如果使用：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>
4

1 回答 1

3

静态站点未正确链接 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="">

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

于 2014-12-11T15:21:33.683 回答