Question

我有一个基于css的布局，在我的Rails应用程序页面顶部有一个通用的标题图像。有一个课程模型将有一个可选的徽标图像，当用户正在查看课程材料时，它有望取代标题图像（如果存在）。这是可能的，我该怎么做呢？

标题的css低于......

#header{height:116px;width:100%;background:url('logo.jpg') top center no-repeat;}

该应用程序位于...当用户登录并点击课程时，我希望课程徽标替换标题图片。

Answer 1

如果我正确理解您的问题，某些模型会定义徽标。在这种情况下，我不会乱用CSS - 或者至少不会使用资产文件，因为它们应该是静态的。

您可以在布局中定义徽标：app/viev/layouts/application.html.erb只需创建以下内容：

<head>
  ..
  <style type="text/css">
    #header { background-image: url("<%= @logo_path || 'logo.jpg' %>"); }
  </style>

或

<head>
  <% if @logo_path %>
    <style type="text/css"> #header { .... } </style>
  <% end %>

然后，在某些控制器或操作或某些视图中，如果您希望徽标与默认徽标不同，则只需设置实例变量@logo_path。

在静态CSS中，您可以定义默认的背景图像，并确保布局中的此规则比静态资源中的规则更重要。如果有疑问，请在布局中为规则添加!important子句。

当然，如果谈论动态是指JavaScript，那么您可以直接在给定元素的onclick属性中包含脚本和徽标路径，方式类似于这样：

<span onclick="replace_logo('<%= model.logo_path %>')">....</span>

函数replace_logo不难编写。

Answer 2

你可以通过两种方式为你想要在标题中显示的每个图像定义不同的类，然后更改claa取决于某个变量（控制器或动作名称等）或者通过添加yield：style in head and overwriting标题样式取决于您的要求，使用content_for：style。

Answer 3

我只是在主代码中包含css的小部分特定部分并使用简单的if ... else语句，并根据用户是否登录来更改'logo.jpg'。

例如，如果用户已登录，则徽标的变量将从默认值更改。如果用户未登录，请使用原始徽标。

无法提供更多详细信息，因为没有可用的代码。