ruby-on-rails - 对于 Rails View *.html.erb : where can I place the style sheet?

标签 ruby-on-rails css

我有这个文件:

app/views/listings/list.html.erb

在我的 Rails 元素中。 以下是文件的内容:

<h1>This file is:"list.html.erb"</h1>  

<!DOCTYPE html>  
<html>  
  <head>  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <style type="text/css">  
      html { height: 100% }  
      body { height: 100%; margin: 0; padding: 0 }  
      #map_canvas { height: 100% }  
    </style>  
    <script type="text/javascript"  
      src="http://maps.googleapis.com/maps/api/js?key=key&sensor=false">  
    </script>  

    <%=javascript_include_tag 'application'%>  
  </head>  
  <body onload="initialize()">  
    <div id="map_canvas" style="width:80%; height:80%"</div>    
    <input type="button" onclick="getlistings();" value="Add Markers">   
    <input type="button" onclick="clearMarkers();" value="Remove Markers">   
  </body>  
</html>  

我想为其应用样式表。我应该在哪里放置样式表?我尝试将代码放在这个文件中:

app/assets/stylesheets/listings.css.scss

但是样式没有应用到 html 文件。我还需要更改我的 html View 文件中的任何内容以包含样式表吗?

这是位于“app/assets/stylesheets/listings.css.scss”的样式表

// Place all the styles related to the Listings controller here.  
// They will automatically be included in application.css.  
// You can use Sass (SCSS) here: http://sass-lang.com/  
.listings  
{  
  table tr td  
  {  
    padding: 5px;  
    vertical-align: top;  
  }  


dt  
{  
  color: #232;  
  font-weight: bold;  
  font-size: larger;  
}  

dd  
{  
  margin: 0;  
}  
}  
#map_canvas  
{  
  width: 80%;  
  height: 80%;  
}  

想知道是否有人可以帮助我吗?

谢谢
编辑
所以 application.html.erb 文件没问题,application.css 也没有问题。阅读下面发布的答案后,我更改了 list.html.erb 文件。 新的list.html.erb文件如下:

<h1>Filename = list.html.erb</h1>  

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<style type="text/css">  
  html { height: 100% }  
  body { height: 100%; margin: 0; padding: 0 }  
  #map_canvas { height: 100% }   
</style>  
<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?key=AIz&sensor=false">  
</script>  
<%= stylesheet_link_tag 'application' %>  
<%=javascript_include_tag 'application'%>  

<%= stylesheet_link_tag '列表' %>




唯一的问题是现在,我要带走

<style type="text/css">  
  html { height: 100% }  
  body { height: 100%; margin: 0; padding: 0 }  
  #map_canvas { height: 100% }  
</style>  

这部分从list.html.erb 中取出并放入list.css.scss 文件中。但是当我这样做时,map_canvas 从页面上消失了,它没有显示。

最佳答案

放置样式表的位置很好。您需要确保您的应用程序布局 (app/views/layouts/application.html.erb) 在 header 中包含样式表:

stylesheet_link_tag 'application'

然后您需要确保它包含在您的应用程序 list 中:app/assets/stylesheets/application.css

在顶部您应该看到一个如下所示的 block :

/* ...
*= require_self
*= require_tree .
*/

如果它没有说 *= require_tree . 那么它不会直接在您的样式表中自动加载 scss 文件。有关更多信息,请参阅 the rails guide .

如果您的应用程序布局和 list 是正确的,但您仍然遇到问题,请将这些文件的文本添加到问题中,我会查看。


更新:另外,您似乎没有正确理解布局。

当任何 View 呈现时,您希望最终输出如下所示:

<!DOCTYPE HTML>
<html>
  <head>
    ...header stuff goes here...
  </head>
  <body>
    ... body stuff goes here...
  </body>
</html>

您的 header 等几乎都是标准的东西,它们一直在重复,只是页面主要部分的内容因页面而异。因此,为了让您不必一遍又一遍地复制这些东西,Rails 使用了布局。

你的布局文件,app/views/layouts/application.html.erb 应该看起来像这样(至少)

<!DOCTYPE html>
<html>
  <head>
    <title>The name of your site</title>
    <%= stylesheet_link_tag 'application' %>
    <%= javascript_include_tag 'application' %> 
    <%= csrf_meta_tags %>
  <head>
  <body>
    <%= yield %>
  </body>
</html>

当您加载给定 View 时, rails 将填充布局中 yield 命令所在 View 中的内容。

请注意,您的 View 命名错误。如果您要显示一个列表,它应该是 app/views/listings/show.html.erb,或者如果您要显示所有列表的索引,它应该是 app/views/listings/index.html.erb.

然后在那个文件中你应该有:

<h1>This file is:"index.html.erb"</h1>

有关 layouts and rendering 的更多信息,请参阅 rails 指南.

但是,您似乎正试图潜入 rails ,却不知道系统中发生了什么。欢迎使用 Rails,我想您会发现它真的很棒,但是从一个好的教程开始您会对自己大有裨益。你可以试试 Getting Started Guide .我还推荐 Michael Hartl 的书《Rails 3 教程》。这是一个很好的资源。

关于ruby-on-rails - 对于 Rails View *.html.erb : where can I place the style sheet?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10250468/

相关文章:

ruby-on-rails - 如何跳过ActiveRecord回调?

ruby-on-rails - 为什么 ruby​​ 进程的 CPU 占用率为 100%

css - 在我重新设计时无法让 iFrame 在 Internet Explorer 中工作

jquery - 在响应式插件上使用 CSS 调整包装器大小

html - 如何使网站适合 Windows Phone 视口(viewport)

css - 使用 css 选择器选择没有表头的表行

ruby-on-rails - 为什么 Rails 预编译任务会执行非摘要 Assets

ruby-on-rails - 参数错误 : SMTP To address may not be blank: []

ruby-on-rails - 用于生成唯一链接的 Rails 插件?

javascript - jquery水平滚动条消失