ruby-on-rails – 对于Rails视图* .html.erb：我可以在哪里放置样式表？

我有这个文件：

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视图文件中的任何内容以包含样式表吗？

这是位于以下位置的样式表：“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)包含标题中的样式表：

stylesheet_link_tag 'application'

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

在顶部你应该看到一个如下所示的块：

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

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

如果您的应用程序布局和清单正确并且您仍然遇到问题,请将这些文件的文本添加到问题中,我将查看.

更新：此外,您似乎没有正确理解布局.

当任何视图呈现时,您希望最终输出如下所示：

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

您的标题等是非常标准的内容,一直重复,只有页面主要部分的内容与页面不同.因此,为了避免不得不一遍又一遍地复制这些东西,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>

当您加载给定视图时,rails将从该视图中填充yield命令在布局中的内容.

请注意,您的视图名称错误.如果您要显示列表,则应该是app / views / listings / show.html.erb,或者如果您要显示所有列表的索引,则应该是app / views / listings / index.html.erb.

然后在该文件中你应该：

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

有关layouts and rendering的更多信息,请参见导轨指南.

但是,看起来你正试图潜入铁轨而不知道系统中发生了什么.欢迎来到Rails,我想你会发现它真的很棒,但是你会从一个好的教程开始,给自己一个巨大的帮助.你可以试试Getting Started Guide.我也推荐Michael Hartl的书“Rails 3 Tutorial”.这是一个很好的资源.

ruby-on-rails – 对于Rails视图* .html.erb：我可以在哪里放置样式表？

解决方法

相关文章