如何将自定义HTML文件集成到Rails文件中

Question

我为登录页面做了一个前端。现在我想要后端（登录，注册，…）。我在YouTube上看到了一个名为"Devise"的教程。看起来非常棒。

所以我有了这些标准的设计"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" %>

这是我的自定义文件，它使用Bootstrapsign_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文件中的后端代码。

Answer 1

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

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

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

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