使用带有嵌入式 HTML 的 link_to答案

【问题标题】：Using link_to with embedded HTML使用带有嵌入式 HTML 的 link_to
【发布时间】：2012-02-22 19:53:28
【问题描述】：

我正在使用 Twitter 的 Bootstrap 东西，我有以下 HTML：

<a class="btn" href="<%= user_path(@user) %>"><i class="icon-ok icon-white"></i> Do it@</a>

在 Rails 中最好的方法是什么？我想使用<%= link_to 'Do it', user_path(@user) %>，但<i class="icon-ok icon-white"></i> 让我失望了？

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap

【解决方案1】：

两种方式。要么：

<%= link_to user_path(@user) do %>
  <i class="icon-ok icon-white"></i> Do it@
<% end %>

或者：

<%= link_to '<i class="icon-ok icon-white"></i> Do it@'.html_safe, user_path(@user) %>

【讨论】：

在带有块的示例中应该是<%= link_to ...？
绝对应该。谢谢！
可能在第二个示例中的图标字符串后缺少“.html_safe”？
我不知道你可以将块传递给link_to - 谢谢你教我！

【解决方案2】：

我最近也有同样的需求。试试这个：

<%= link_to '<i class="icon-ok icon-white"></i> Do it'.html_safe, user_path(@user) %>

【讨论】：

【解决方案3】：

您还可以创建如下所示的辅助方法：

def link_fa_to(icon_name, text, link)
  link_to content_tag(:i, text, :class => "fa fa-#{icon_name}"), link
end

根据您的需要调整课程。

【讨论】：

【解决方案4】：

如果你想要一个使用来自 twitter bootstrap 的相同图标类的 rails 链接，你需要做的就是这样。

<%= link_to "Do it@", user_path(@user), :class => "btn icon-ok icon-white" %>

【讨论】：

@PeterNixey 不，它没有，它使它看起来像一个按钮。如果你离开 btn 类，你看到的只是图标。按钮外观并不意味着它是一个按钮。

【解决方案5】：

在普通的 HTML 中我们这样做，

<a href="register.html"><i class="fa fa-user-plus"></i> Register</a>

在 Ruby On Rails 中：

<%= link_to routeName_path do %>
  <i class="fa fa-user-plus"></i> Link Name
<% end %>

<%= link_to register_path do %>
   <i class="fa fa-user-plus"></i> Register
<% end %>

【讨论】：

【解决方案6】：

使用 HAML：

= link_to model_path do
  %img{src: '/assets/someimg.png'}

【讨论】：

【解决方案7】：

在 gem twitter-bootstrap-rail 中：他们创建了一个辅助字形

  def glyph(*names)
    content_tag :i, nil, :class => names.map{|name| "icon-#{name.to_s.gsub('_','-')}" }
  end

所以你可以像这样使用它：glyph(:twitter) 你的链接助手可能看起来像：link_to glyph(:twitter), user_path(@user)

【讨论】：

你可以允许 a 标签有多个类......在所有情况下，用例会是什么？
这是用字形创建链接的好方法（Font Awesome）！要添加更多类，请使用 <%= link_to glyph(:comments), post_path(post), :class => "btn-small btn-warning" %> 之类的东西。这里comments 是 Font Awesome 字符的名称，post_path(post) 是目标 url，class => 显示字形将使用哪些类。

【解决方案8】：

我会试一试，因为您还没有接受答案
其他答案并不是您想要的 100%。
这就是 Rails 的方式。

<%= link_to(user_path(@user), :class => 'btn') do %>
  <i class="icon-ok icon-white"> </i> Do it!
<% end %>

编辑：留下我的答案以供将来参考，
但是@justin-herrick 在
使用 Twitter Bootstrap。

【讨论】：

【解决方案9】：

如果您在应用程序中经常使用它，我认为您可以通过辅助方法来简化它。

把它放在 helper/application_helper.rb 中

def show_link(link_text, link_source)
  link_to("#{content_tag :i, nil, class: 'icon-ok icon-white'} #{link_text}".html_safe,
    link_source, class: "btn")
end

然后像 link_to 一样从视图文件中调用它

<%= show_link "Do it", user_path(@user) %>

【讨论】：

【解决方案10】：

如果您使用的是引导程序 3.2.0，您可以在 app/helpers/application_helper.rb 中使用此帮助程序

module ApplicationHelper
  def glyph(*names)
    content_tag :i, nil, :class => names.map{|name| "glyphicon glyphicon-#{name.to_s.gsub('_','-')}" }
  end
end

然后，在你看来：

link_to glyph(:pencil) + ' Edit', edit_post_path(@post), class: 'btn btn-warning'

【讨论】：

【解决方案11】：

def show_link (source, text)
  link_to source, {'data-original-title' => 'Show', 'data-toggle' => 'tooltip', :class => 'btn btn-xs btn-success'} do
    "#{text} #{content_tag :i, nil, class:' glyphicon glyphicon-eye-open' }".html_safe
    end
end

【讨论】：

【解决方案12】：

Helper 基于 Titas Milan 的建议，但使用了块：

def show_link(link_text, link_source)
  link_to link_source, { class: 'btn' } do
    "#{content_tag :i, nil, class: 'icon-ok icon-white'} #{link_text}".html_safe
  end
end

【讨论】：