【问题标题】:Linking a stylesheet in Ruby's Cuba framework在 Ruby 的 Cuba 框架中链接样式表
【发布时间】:2016-06-23 16:00:22
【问题描述】:

这看起来应该很简单,但我不知道如何在Cuba 应用程序中将stylesheet 链接到erb 模板。

hello_world.rb

require "cuba"
require "cuba/safe"
require "cuba/render"
require "erb"

Cuba.use Rack::Session::Cookie, :secret => "__a_very_long_string__"

Cuba.plugin Cuba::Safe
Cuba.plugin Cuba::Render

Cuba.define do
  on root do
    res.write view("home")
  end
end

views/layout.erb

<!DOCTYPE html>
<html lang="en">

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

  <body>
    <div>
      <h1>Hello</h1>
    </div>
  </body
</html>

config.ru

require "./hello_world"
run Cuba

styles/basic.css

h1 {
   font-size: 128px;
}

div {
    padding: 50px;
    margin: 100px;
}

我尝试使用一些Sinatra 标准,例如将我的css 放在名为public 的目录中以及使用&lt;link href="&lt;%= url('styles/basic.css') %&gt;" rel="stylesheet" type="text/css" /&gt;,但没有任何效果。

【问题讨论】:

    标签: css ruby erb rack cuba


    【解决方案1】:

    Cuba 不提供静态资源。您可以为此使用Rack::Static

    # hellow_world.rb
    Cuba.use Rack::Static,
      root: "public",
      urls: ["/javascripts", "/css", "/images"]
    

    然后,在您的视图中引用此文件夹。

    # layout.erb
    <link href="/public/css/basic.css" rel="stylesheet" type="text/css" />
    

    【讨论】:

    • 谢谢...由于某种原因,确切的代码不起作用(可能是用户错误)...当我使用 Cuba.use Rack::Static, :urls =&gt; ["/css"] 而没有使用 public 目录时,它最终起作用了。仍然给了你正确的答案,因为Rack::Static 是解决方案。
    【解决方案2】:

    Cuba 应用程序是(薄)引擎盖下的 Rack 应用程序。

    Rack 应用程序是可以响应 #call 方法的任何对象,产生一个带有状态码的数组、带有标头和正文的散列。

    Rack 中间件与应用程序基本相同。唯一的区别是它们在请求-响应周期中所扮演的角色:

    • 应用是请求链的最终目的地,也是生成原始响应的目的地。
    • 另一方面,中间件位于客户端和应用之间,在请求到达应用之前对其进行预处理,或者在应用生成响应之后对其进行后处理。

    当您运行您的应用程序时,您将与一个中间件堆栈一起运行它。每个请求从客户端通过堆栈到达您的应用,然后其响应从您的应用通过堆栈到达客户端。

    Cuba 不会隐式添加任何中间件或端点来处理静态文件。这意味着如果一个请求没有被任何可以处理它并到达您的应用程序的中间件拦截,然后您的应用程序没有处理它的路由,它将得到 404'd。

    与此相反,Sinatra 确实为您隐式处理静态文件请求。

    这就是跑步的原因

    Cuba.use Rack::Static,
      root: "public",
      urls: ["/javascripts", "/css", "/images"]
    

    解决了你的问题,因为它添加了一个中间件来响应在

    中生成的请求
    <link href="/public/css/basic.css" rel="stylesheet" type="text/css" />
    

    在您的应用需要之前。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-10-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-06-13
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多