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

【问题标题】：How to include a static page with custom css and js files in a Rails application如何在 Rails 应用程序中包含带有自定义 css 和 js 文件的静态页面
【发布时间】：2014-11-07 23:43:33
【问题描述】：

我正在开发一个基本的 Rails 应用程序（Rails 版本 4.1），我想在其中包含一个静态页面。我得到了具有以下目录结构的静态页面：

如何将它包含在我的应用程序中？顺便说一句，我打算让它成为我的主页。

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

【问题讨论】：

如果它只是一个静态页面，那么我认为您最好使用 high_voltage gem。你能解释一下你在使用它时遇到了什么问题吗？
为什么不能像往常一样将所有的 css、js 和图像放在资产管道中？
@Mandeep 正如我所写，我只能将页面呈现为纯文本，即黑白纸，仅在大小上有所不同（如 .txt 文件）。在我看来，它似乎不包括随之而来的资产。我尝试将它们与它一起放在用于 HighVoltage gem 的“pages”文件夹中，以及 app/assets 文件夹中。
@AdityaBhardwaj 啊，好吧！我看到 high_voltage 不允许您使用可以加载样式表和 js 的布局文件
@LcLk 我试过了，但没有用。

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

【解决方案1】：

页面

当您提到“静态”页面时——所有页面在 Rails 中都是静态

Rails 仅使用数据库中的数据呈现 HTML。很像 PHP（许多开发人员可以欣赏），Rails 是一个处理器，它允许您使用您需要的数据填充您的 view。

这意味着如果你想制作一个“静态”页面，你只需要不从数据库中提取任何数据：

#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
...

最后，如果您随后将“欢迎”文件添加到您的资产预编译列表中，它应该适合您：

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

【讨论】：

有没有办法避免将每个文件都添加到预编译列表中？

【解决方案2】：

由于您的主页具有自定义样式和 js，因此您需要对其他视图进行更多操作。为您的主页创建一个控制器，可以将其命名为 pages_controller。创建一个自定义动作，比如说 home，为这个动作创建一个路由，然后将你的 html 放在这个动作视图中

按照以下步骤使其工作：

创建控制器：

rails g 控制器页面

在 pages_controller.rb 中创建一个动作

归家；结束

为您的操作创建路线

root :to => 'pages#home'

默认情况下，这将使用 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

【讨论】：