如何在 Rails 文件中集成自定义 HTML 文件答案

【问题标题】：How to integrate a custom HTML file in a Rails file如何在 Rails 文件中集成自定义 HTML 文件
【发布时间】：2016-09-08 23:13:16
【问题描述】：

我为我的登录页面做了一个前端。现在我想要后端（登录，注册，...）。我在 YouTube 上从名为“Devise”的 gem 中看到了一个教程。看起来很棒。

所以我有这些标准设计的“registrations/new.html.erb”文件。

<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>

<div class="field">
  <%= f.label :email %><br />
  <%= f.email_field :email, autofocus: true %>
</div>

<div class="field">
  <%= f.label :password %>
  <% if @minimum_password_length %>
   <em>(<%= @minimum_password_length %> characters minimum)</em>
  <% end %><br />
  <%= f.password_field :password, autocomplete: "off" %>
</div>

<div class="field">
  <%= f.label :password_confirmation %><br />
  <%= f.password_field :password_confirmation, autocomplete: "off" %>
</div>

<div class="actions">
  <%= f.submit "Sign up" %>
</div>
<% end %>

<%= render "devise/shared/links" %>

这是我的自定义文件，它使用 Bootstrap。 'sign_up.html.erb'

<div class="wrapper">
 <div class="box">
 <h2 class="title">Sign Up</h2>
  <form role="form">
    <div class="form-group">
      <label for="first_name">First name:</label>
      <input type="text" class="form-control" id="first_name">
    </div>
    <div class="form-group">
      <label for="last_name">Last name:</label>
      <input type="text" class="form-control" id="last_name">
    </div>
    <div class="form-group">
      <label for="username">Username:</label>
      <input type="text" class="form-control" id="username">
    </div>
    <div class="form-group">
      <label for="email">Email address:</label>
      <input type="email" class="form-control" id="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
    <%= link_to 'Cancel', sign_login_path, class: 'btn btn-default' %>
  </form>
 </div>
</div>

所以我的问题是，如何将这两个文件添加到一个文件中。保留我的自定义文件中的布局，但使用 devine 文件中的后端代码。

【问题讨论】：

你看到的 gem 是 Devise (github.com/plataformatec/devise)。
是的，对不起 :-/ 我编辑了 ;-)
没关系。它有时会发生。
有一些 Devise+Bootstrap 插件，在您走这条路之前，您可能想尝试一下。

标签： html ruby-on-rails ruby twitter-bootstrap

【解决方案1】：

<%= %> 之间的部分是 ruby 代码，请在您的页面中使用 devise 的 ruby 代码，保持您的布局。 <%= form_for %> 将输出为设计配置的 <form> 元素，<%= f.label %> 是 <label>，<%= f.something_field %> 是 <input>，<%= f.submit %> 是 <button>。

您可以按如下方式传递类和 id：

<%= f.email_field :name, autofocus: true, class: "form-control", id: "email" %>

如果不为你做，很难说更多。

【讨论】：