在 Sinatra 中加载样式表答案

【问题标题】：Loading Stylesheets in Sinatra在 Sinatra 中加载样式表
【发布时间】：2022-03-08 19:22:48
【问题描述】：

我正在使用 Sinatra，并且一直在尝试加载一些样式表。我已经在我的 erb 中尝试了普通的 html link 标签，但没有奏效。

试过了

<head>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

这不是我使用的网址的问题，有什么特殊的方法可以实现吗？

【问题讨论】：

标签： sinatra

【解决方案1】：

当您使用href="style.css" 时，您指定的是到样式表的相对链接。您的浏览器将请求的实际路径将取决于当前页面的 url，例如，如果您有这样的路由：

get '/things/:id' do
  #look up thing with id = :id
  erb :my_view
end

然后浏览器将在/things/style.css 处查找样式表。如果您的样式表位于 public 目录的顶层，这显然不起作用。

快速解决方法是使用样式表的绝对路径：href="/style.css"（注意/ 字符）。这将使浏览器始终在服务器的根目录中查找样式表。

这假定您的应用程序始终安装在服务器的根目录，如果您在子目录中运行它会失败。您希望能够说“在此应用程序的根目录中查找样式表，无论它碰巧在哪里”。在 Sinatra 中，您可以使用 url helper method 来执行此操作。使用 ERB 作为您的模板语言如下所示：

<link href="<%= url('/style.css') %>" rel="stylesheet" type="text/css" />

这将确保到 style.css 的链接在您的应用所在的任何位置都是正确的。

【讨论】：