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

Question

我为我的登录页面做了​​一个前端。现在我想要后端(登录、注册……)。我在 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 文件中的后端代码。

Answer 1

<%= %> 之间的部分是 ruby 代码，在您的页面中使用来自设计的 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" %>

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