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

标签 javascript html css ruby-on-rails layout

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

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

如何将其包含在我的申请中?顺便说一句,我打算把它设为我的主页。

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

最佳答案

页面

当您提到“静态”页面时——所有页面在 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

这将使您能够加载以下 View :

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

Assets

现在,稍微棘手的部分是为此 View 包含正确的 Assets

您提到您有自己的目录 结构。现在让我告诉您,通过从您的 Assets 管道创建和提供 Assets ,您会得到更好的服务。

方法如下:

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

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

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

关于javascript - 如何在 Rails 应用程序中包含带有自定义 css 和 js 文件的静态页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25831256/

相关文章:

javascript - 防止键盘在 iOS 中弹出

css - Foundation 5 - 均匀间隔的顶部栏导航项

jquery - 在上一个事件完成后开始一个事件

JavaScript Ajax URL 'post' PHP 文件未收到数据

javascript - 填写选择多项选择测验

html - 如何防止元素内的列中断?

javascript - 带箭头切换的多个 div 切换

html - 创建 Bootstrap 流体不同高度元素网格

javascript - 忽略多个选择框-jquery中的第一个选项

javascript - 引用 ts-check JS 文件的定义