如何在Rails应用程序中包含带有自定义css和js文件的静态页面

时间:2014-09-14 08:04:40

标签: javascript html css ruby-on-rails layout

我正在开发一个基本的Rails应用程序(Rails版本4.1),我想在其中包含一个静态页面。我有一个具有以下目录结构的静态页面:

| | - index.html | - css文件夹 | - (某些css文件) | - js文件夹 | - (一些js文件) | - 图像文件夹 | - (某些图片)

如何将其包含在我的应用程序中?我打算把它作为我的主页btw。

我尝试在控制器中使用'layout'关键字,将html文件包含在'app / views / layout'目录中。但是,我最多能够呈现'index.html'文件,但它错过任何样式,即呈现为纯文本。 通过使用HighVoltage gem,我已经能够获得相同的结果。

2 个答案:

答案 0 :(得分:5)

网页

当你提到"静态"页面 - 所有页面都是中的静态

Rails只使用数据库中的数据呈现HTML。就像PHP(许多开发人员可以欣赏)一样,Rails是一个处理器,允许您使用所需的数据填充view

这意味着如果你想制作一个"静态"页面,你只需要不从db中提取任何数据:

#config/routes.eb
root: "application#home"

#app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
   def home
   end
end

这将使您能够加载以下视图:

#app/views/application/home.html.erb
Put stuff here

<强>资产

现在,稍微棘手的部分是为此视图添加正确的资产

你提到你有自己的directory结构。现在让我告诉你,通过创建和创造更好的服务,你将获得更好的服务。从您的资产管道中提供资产

以下是:

#app/views/layouts/application.html.erb
<head>
  ...
  <% if controller_name == "application" && action_name == "home" %>
     <%= stylesheet_link_tag "welcome" %>
     <%= javascript_include_tag "welcome" %>
  <% end %>
</head>

这将使您能够调用以下内容:

#app/assets/stylesheets/welcome.css
...

#app/assets/javascripts/welcome.js
...

最后,如果您再添加&#34; welcome&#34;文件到您的资产预编译列表,它应该适合您:

#config/application.rb
Rails.application.config.assets.precompile += ['welcome.js', 'welcome.css']

答案 1 :(得分:0)

由于您的主页有自定义样式和js,因此您需要对其他任何视图执行更多操作。 为您的主页创建一个控制器,调用它可能是pages_controller。创建自定义操作,让我们说回家,为此操作制作路线,然后将html放在此操作视图中

按照以下步骤使其正常工作:

  • 创建一个控制器:
  

rails g controller Pages

  • 在pages_controller.rb
  • 中创建一个操作
  

def home;结束

  • 为您的行动创建路线
  

root:to =&gt; &#39;#页家&#39;

默认情况下,这将使用application.html.erb作为您的布局,并在您的application.html.erb中使用此行

<%= stylesheet_link_tag "application", media: "all" %> #this by default load all the css from assets/stylesheets/application.css so you can require your css file inside it