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

How to include a static page with custom css and js files in a Rails application

本文关键字：文件 js 静态 css 自定义 Rails 应用程序 包含带      更新时间：2023-09-26

我正在开发一个基本的Rails应用程序（Rails 4.1版），我想在其中包含一个静态页面

||-index.html|-css文件夹|--（一些css文件）|-js文件夹|--（一些js文件）|-图像文件夹|--（一些图像）

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

我尝试在控制器中使用"layout"关键字，方法是将html文件包含在"app/views/layout"目录中。然而，我最多只能呈现"index.html"文件，但它缺少任何样式，即呈现为纯文本。我已经能够通过使用高压宝石获得相同的结果。

页面

当你提到一个"静态"页面时，所有页面都是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']

由于您的主页有自定义样式和js，因此您需要在任何其他视图中对其进行更多处理为您的主页创建一个控制器，称之为pages_controller。创建一个自定义操作，比如home，为该操作制定路线，然后将您的html放入该操作视图

按照以下步骤使其工作：

  • 创建控制器：

轨道g控制器页面

  • 在页面中创建操作s_controller.rb

def home；结束

  • 为您的行动创建路线

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
相关文章：