Question

我正在尝试调整http://html5up.net中的一些模板以与Flask一起使用。使用目录结构

加载静态HTML页面

/website
  /css
  /js
  /images
  index.html

但对于Flask来说，它必须是

/website
    /templates
        index.html
    /static
        /css
        /js
        /images

在javascript和图片文件正常工作之前添加/static，它们会按预期显示。但是，指向css文件的链接位于<noscript>标记内，我无法获取主html页面来查找它们。我尝试过绝对和相对寻址，并将样式表移动到目录结构中的不同位置，但没有运气。我只是得到一个没有css样式的丑陋页面。

如果我删除了这些代码，那么它可以很好地用于桌面使用，但是当使用平板电脑或手机查看时，该页面就不再适应了。

原始标题的摘录：

<head>
    <script src="js/jquery.min.js"></script>
    <script src="js/config.js"></script>
    <noscript>
        <link rel="stylesheet" href="css/skel-noscript.css" />
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/style-desktop.css" />
    </noscript>
    <!--[if lte IE 9]><link rel="stylesheet" href="css/ie9.css" /><![endif]-->
    <!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
</head>

我期望工作，但不是

<head>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/config.js"></script>
    <noscript>
        <link rel="stylesheet" href="css/skel-noscript.css" />
        <link rel="stylesheet" href="/static/css/style.css" />
        <link rel="stylesheet" href="/static/css/style-desktop.css" />
    </noscript>
    <!--[if lte IE 9]><link rel="stylesheet" href="/static/css/ie9.css" /><![endif]-->
    <!--[if lte IE 8]><script src="/static/js/html5shiv.js"></script><![endif]-->
</head>

- 编辑 -

config.js的内容

window._skel_config = {
    preset: 'standard',
    prefix: 'css/style',
    resetCSS: true,
    breakpoints: {
        '1000px': {
            grid: {
                gutters: 25
            }
        }
    }
};

window._skel_panels_config = {
    preset: 'standard'
};

Answer 1

Try This:

<head>
        <script src="..\static/js/jquery.min.js"></script>
        <script src="..\static/js/config.js"></script>
        <noscript>
            <link rel="stylesheet" href="..\css/skel-noscript.css" />
            <link rel="stylesheet" href="..\static/css/style.css" />
            <link rel="stylesheet" href="..\static/css/style-desktop.css" />
        </noscript>
        <!--[if lte IE 9]><link rel="stylesheet" href="..\static/css/ie9.css" /><![endif]-->
        <!--[if lte IE 8]><script src="..\static/js/html5shiv.js"></script><![endif]-->
    </head>

Answer 2

我尝试用以下内容修改内容config.js文件：

window._skel_config = {
    preset: 'standard',
    prefix: 'http://website/static/css/style',
    resetCSS: true
};

window._skel_panels_config = {
    preset: 'standard'
};

使用Flask </noscript>在<noscript>标记内加载css样式表

2 个答案: