css - 带有 Slim 模板的 Sinatra——无法链接到 css 文件 : What is the path from a template file to a css file in the public directory?

Question

~/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 文件使用什么路径，结果总是这样:

Answer 1

你需要href for link ，而不是 src，所以你想要这样的东西:

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

(script 使用 src——一个我们似乎被困住的令人困惑的差异。)