Sinatra with Slim模板 - 無法鏈接到css文件：從公共目錄中的模板文件到css文件的路徑是什麼？

~/sinatra_projects/slim_app$ tree .

. 
├── models 
├── public 
│   ├── cool_stuff.html 
│   ├── css 
│   │   └── css.css

這裏的大多是不相關的部分：

│   ├── imgs 
│   ├── js_ready.js 
│   ├── mycss.css 
│   └── tablesorter-master 
│    ├── LICENSE 
│    ├── README.md 
│    ├── addons 
│    │   └── pager 
│    │    ├── jquery.tablesorter.pager.css 
│    │    └── jquery.tablesorter.pager.js 
│    ├── bower.json 
│    ├── build 
│    │   ├── ParseMaster.js 
│    │   ├── js.jar 
│    │   ├── jsmin.js 
│    │   ├── min.js 
│    │   ├── pack.js 
│    │   ├── packer.js 
│    │   └── writeFile.js 
│    ├── build.xml 
│    ├── changelog 
│    ├── docs 
│    │   ├── assets 
│    │   │   └── ajax-content.html 
│    │   ├── css 
│    │   │   └── jq.css 
│    │   ├── example-ajax.html 
│    │   ├── example-attribute-sort.html 
│    │   ├── example-empty-table.html 
│    │   ├── example-extending-defaults.html 
│    │   ├── example-meta-headers.html 
│    │   ├── example-meta-parsers.html 
│    │   ├── example-meta-sort-list.html 
│    │   ├── example-option-debug.html 
│    │   ├── example-option-digits.html 
│    │   ├── example-option-sort-force.html 
│    │   ├── example-option-sort-key.html 
│    │   ├── example-option-sort-list.html 
│    │   ├── example-option-sort-order.html 
│    │   ├── example-option-text-extraction.html 
│    │   ├── example-options-headers.html 
│    │   ├── example-pager.html 
│    │   ├── example-parsers.html 
│    │   ├── example-trigger-sort.html 
│    │   ├── example-triggers.html 
│    │   ├── example-update-cell.html 
│    │   ├── example-widgets.html 
│    │   ├── img 
│    │   │   └── external.png 
│    │   ├── index.html 
│    │   └── js 
│    │    ├── docs.js 
│    │    └── examples.js 
│    ├── jquery-latest.js 
│    ├── jquery.metadata.js 
│    ├── jquery.tablesorter.js 
│    ├── jquery.tablesorter.min.js 
│    ├── package.json 
│    └── themes 
│     ├── blue 
│     │   ├── asc.gif 
│     │   ├── bg.gif 
│     │   ├── blue.zip 
│     │   ├── desc.gif 
│     │   └── style.css 
│     └── green 
│      ├── asc.png 
│      ├── bg.png 
│      ├── desc.png 
│      ├── green.zip 
│      └── style.css 
├── routes.rb 
├── themes 
│   ├── blue 
│   │   ├── asc.gif 
│   │   ├── bg.gif 
│   │   ├── blue.zip 
│   │   ├── desc.gif 
│   │   └── style.css 
│   └── green 
│    ├── asc.png 
│    ├── bg.png 
│    ├── desc.png 
│    ├── green.zip 
│    └── style.css 
└── views 
    ├── components 
    │   └── _date.slim 
    ├── index.slim 
    ├── index_with_partials.slim 
    ├── layout.slim 
    ├── xindex.slim 
    ├── xlayout.erb 
    ├── xlayout.slim 
    └── yindex.erb 

21 directories, 79 files

這裏的slim_app/routes.rb：

require 'sinatra' 
require 'slim' 


get '/' do 
    slim :index 
end

這裏的slim_app/views/layout.slim：

doctype html 
html 
    head 
    meta charset="utf-8" 
    title Test 
    link rel="stylesheet" type='text/css' src="/css/css.css") 
    body 
    h1 This is the Layout. Find me in your_app/views/layout.slim 
    == yield

這裏的slim_app/public/css/css.css：

div { 
    background-color: red; 
    font-weight: 900; 
} 

h1 { 
    background-color: blue; 
}

這裏的slim_app/views/index.slim：

div Hello 
div Goodbye

不管我用什麼路徑，CSS文件，這始終是結果：

enter image description here

來源

2015-06-20 7stud

你需要href for link，不src，所以你想是這樣的：

link rel="stylesheet" type='text/css' href="/css/css.css"

（script使用src - 一個令人困惑的差別，我們似乎有被卡住。）

來源

2015-06-21 01:05:52 matt

謝謝！我認爲我的鏈接標記語法可能已關閉，所以我檢查了w3schools的正確語法 - 並且不止一次！（嘆息......總是在你認爲可疑的行下面複製/粘貼正確的語法，然後逐字比較） – 7stud

*腳本使用src * - 我甚至知道腳本標記和鏈接標記使用不同的屬性名稱路徑，但是當我刪除我的腳本標記以簡化事情時，我無法找到錯誤。 – 7stud

Sinatra with Slim模板 - 無法鏈接到css文件：從公共目錄中的模板文件到css文件的路徑是什麼？

回答

相關問題