HTML5 UP在Django/Mezzanine項目中無法正常工作

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", 
) 

和配置您的靜態URL是這樣的：

STATIC_URL = '/static/' 

，然後你可以把靜態文件到您的代碼， 請確保頁面上的網址應該是從您的靜態文件夾的正確的相對路徑

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 } 
     } 
    } 

};