如何为 Rails 重写 HTML

Question

我正在尝试重写下面的代码，以便它使用 image_tag。我知道如何应用 class 属性，但如何应用自定义属性，如 "data-dark-logo"?

我正在学习如何开发和构建具有以下内容的应用程序 HTML：

<div id="logo">
  <a href="index.html" class="standard-logo" data-dark-logo="external_assets/images/logo-dark.png">
    <img src="external_assets/images/logo.png" alt="Canvas Logo">
  </a>
  <a href="index.html" class="retina-logo" data-dark-logo="external_assets/images/logo-dark@2x.png">
    <img src="external_assets/images/logo@2x.png" alt="Canvas Logo">
  </a>
</div>

我正在尝试重写它，以便它可以在我的 Rails 应用程序中运行。

Answer 1

只需将数据属性作为散列传递。

<%= link_to '/link', class: 'standard-logo', data: {'dark-logo' => 'external_assets/....' do %>
  <%= image_tag ('external_assets/...') %>
<% end %>

Answer 2

像这样？

<div id="logo">
    <%= link_to("index.html", class: "standard-logo", data-dark-logo: "external_assets/images/logo-dark.png") do %>
        <%= image_tag("external_assets/images/logo.png",    alt: "Canvas Logo") %>
    <% end %>
    <%= link_to("index.html", class: "retina-logo",   data-dark-logo: "external_assets/images/logo-dark@2x.png") do %>
        <%= image_tag("external_assets/images/logo@2x.png", alt: "Canvas Logo") %>
    <% end %>
</div>

编辑：

要使 data-dark-logo 从资产管道中提取您的资产，请尝试使用 asset_path 助手：

<%= link_to("index.html", class: "standard-logo", data-dark-logo: asset_path("external_assets/images/logo-dark.png")) do %>

Answer 3

我想出的解决方案是这样的：

    <div id="logo">
    <%= link_to welcome_index_path, class: 'standard-logo', data: {'dark-logo' => asset_path("front/logo-dark.png") } do %>
        <%= image_tag("front/logo.png") %>
    <% end %>
    <%= link_to welcome_index_path, class: 'retina-logo', data: {'dark-logo' => asset_path("front/logo-dark@2x.png") } do %>
        <%= image_tag("front/logo@2x.png") %>
    <% end %>
    </div>

但我不确定这是否符合 Rails 最佳实践

如何为 Rails 重写 HTML

How to rewrite HTML for Rails

html

ruby-on-rails

erb