Question

我正在尝试将HTML5 UP!与Django / Mezzanine项目一起使用，并且我在使skeljs正确加载样式css文件时遇到问题。

这就是我在base.html文件中加载文件的方式：

<script src="{% static "js/jquery.min.js" %}"></script>
<script src="{% static "js/skel.min.js" %}"></script>
<script src="{% static "js/init.js" %}"></script>
<noscript>
    <link rel="stylesheet" href="{% static "css/skel-noscript.css" %}" />
    <link rel="stylesheet" href="{% static "css/style.css" %}" />
    <link rel="stylesheet" href="{% static "css/style-wide.css" %}" />
</noscript>

这是我的skeljs设置：

    var _settings = {
        skelJS: {
            prefix: 'style',
            resetCSS: true,
            boxModel: 'border',
            containers: 1200,
            useOrientation: true,
            breakpoints: {
                'widest': { range: '*', containers: 1360, grid: { gutters: 50 }, hasStyleSheet: false },
                'wide': { range: '-1680', containers: 1200, grid: { gutters: 40 } },
                'normal': { range: '-1280', containers: 960, grid: { gutters: 30 }, lockViewport: true },
                'narrow': { range: '-1000', containers: '100%', grid: { gutters: 25, collapse: true }, lockViewport: true },
                'mobile': { range: '-640', containers: '100%', grid: { gutters: 10, collapse: true }, lockViewport: true }
            }
        }

};

这是我从服务器获得的输出：

[24/Apr/2014 17:08:46] "GET / HTTP/1.1" 200 23532
[24/Apr/2014 17:08:46] "GET /static/js/skel.min.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/js/jquery.min.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/js/init.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/css/mezzanine.css HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/css/bootstrap-theme.css HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/js/bootstrap-extras.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/css/bootstrap.css HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/grappelli/tinymce/jscripts/tiny_mce/tiny_mce.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/js/bootstrap.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/mezzanine/js/tinymce_setup.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/mezzanine/js/jquery.tools.overlay.js HTTP/1.1" 304 0 
[24/Apr/2014 17:08:46] "GET /static/mezzanine/js/jquery.form.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:46] "GET /static/mezzanine/js/editable.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:47] "GET /static/mezzanine/css/editable.css HTTP/1.1" 304 0
[24/Apr/2014 17:08:47] "GET /static/mezzanine/js/jquery.tools.toolbox.expose.js HTTP/1.1" 304 0
[24/Apr/2014 17:08:47] "GET /theme/static/css/style.css HTTP/1.1" 301 0
[24/Apr/2014 17:08:47] "GET /theme/static/css/style-wide.css HTTP/1.1" 301 0
[24/Apr/2014 17:08:47] "GET /theme/static/css/style-wide.css/ HTTP/1.1" 404 1629
[24/Apr/2014 17:08:47] "GET /theme/static/css/style.css/ HTTP/1.1" 404 1619

这是相关文件的文件夹结构。

├── manage.py
├── requirements.txt
├── settings.py
├── settings.pyc
├── static
│   └── media
├── theme
│   ├── admin.py
│   ├── admin.pyc
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── models.py
│   ├── models.pyc
│   ├── static
│   │   ├── css
│   │   │   ├── skel-noscript.css
│   │   │   ├── style.css
│   │   │   ├── style-mobile.css
│   │   │   ├── style-narrow.css
│   │   │   ├── style-normal.css
│   │   │   └── style-wide.css

Answer 1

也许您应该在setting.py中配置静态文件夹，如下所示：

STATICFILES_DIRS = (
    "C:/myfile/project/python/mocs/static",
)

并配置您的静态网址：

STATIC_URL = '/static/'

然后你可以将静态文件放入你的代码中，确保页面上的URL应该是静态文件夹中的正确相对路径

Answer 2

找到解决方案！前缀未正确设置。

var _settings = {
    skelJS: {
        prefix: 'static/css/style',
        resetCSS: true,
        boxModel: 'border',
        containers: 1200,
        useOrientation: true,
        breakpoints: {
            'widest': { range: '*', containers: 1360, grid: { gutters: 50 }, hasStyleSheet: false },
            'wide': { range: '-1680', containers: 1200, grid: { gutters: 40 } },
            'normal': { range: '-1280', containers: 960, grid: { gutters: 30 }, lockViewport: true },
            'narrow': { range: '-1000', containers: '100%', grid: { gutters: 25, collapse: true }, lockViewport: true },
            'mobile': { range: '-640', containers: '100%', grid: { gutters: 10, collapse: true }, lockViewport: true }
        }
    }

};

HTML5 UP在Django / Mezzanine项目中无法正常工作

2 个答案: