Sử dụng link_to với HTML nhúng


100

Tôi đang sử dụng công cụ Bootstrap của Twitter và tôi có HTML sau:

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

Cách tốt nhất để làm điều này trong Rails là gì? Tôi muốn sử dụng <%= link_to 'Do it', user_path(@user) %>nhưng <i class="icon-ok icon-white"></i>tôi đang làm tôi thất vọng?

Câu trả lời:


260

Hai lối. Hoặc:

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

Hoặc là:

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

1
Có lẽ nó nên có <%= link_to ...trong ví dụ với khối?
Voldy

Nó chắc chắn nên được. Cảm ơn!
Veraticus

3
Có thể thiếu '.html_safe' sau chuỗi cho biểu tượng trong ví dụ thứ hai?
HO

Tôi không biết rằng bạn có thể vượt qua một khối link_to- cảm ơn vì đã dạy tôi!
yas4891 29/11/12

16

Tôi cũng có nhu cầu gần đây. Thử cái này:

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


11

Bạn cũng có thể tạo một phương thức trợ giúp như sau:

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

Điều chỉnh các lớp học theo nhu cầu của bạn.


8

Nếu bạn muốn một liên kết trong đường dẫn sử dụng cùng lớp biểu tượng đó từ twitter bootstrap, tất cả những gì bạn cần làm là như thế này.

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

2
@PeterNixey không, không, nó làm cho nó giống như một cái nút. Nếu bạn rời khỏi btnlớp học, tất cả những gì bạn thấy là biểu tượng. Nút nhìn không có nghĩa là nút.
Webdevotion

7

Sử dụng HAML:

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

6

Trong gem twitter-bootstrap-rail: họ tạo một glyph trợ giúp

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

Vì vậy, bạn có thể sử dụng nó như: glyph(:twitter) và người trợ giúp liên kết của bạn có thể trông giống như:link_to glyph(:twitter), user_path(@user)


bạn có thể cho phép nhiều dấu hiệu cho thẻ ... Trong mọi trường hợp, trường hợp sử dụng sẽ là gì?
eveevans

1
Đây là một cách tuyệt vời để tạo liên kết bằng glyph (Font Awesome)! Để thêm nhiều lớp hơn, hãy sử dụng một cái gì đó như <%= link_to glyph(:comments), post_path(post), :class => "btn-small btn-warning" %>. Đây commentslà tên của ký tự Font Awesome, post_path(post)là url đích và class =>hiển thị các lớp mà glyph sẽ sử dụng.
Weston

5

Trong HTML thông thường, chúng tôi làm,

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

Trong 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 %>

Đây là đầu ra của tôi


3

Tôi sẽ thử điều này vì bạn chưa chấp nhận một câu trả lời
và các câu trả lời khác không phải là 100% những gì bạn đang tìm kiếm.
Đây là cách để làm điều đó theo cách Rails.

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

Chỉnh sửa: để lại câu trả lời của tôi để tham khảo trong tương lai,
nhưng @ justin-herrick có câu trả lời chính xác khi
làm việc với Twitter Bootstrap.


2

Tôi nghĩ bạn có thể đơn giản hóa nó thông qua phương thức trợ giúp nếu bạn sử dụng nó thường xuyên trong ứng dụng của mình.

đưa nó vào 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

Sau đó, gọi nó từ tệp xem của bạn giống như link_to

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

2

Nếu bạn đang sử dụng bootstrap 3.2.0, bạn có thể sử dụng trình trợ giúp này trong 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

và sau đó, theo quan điểm của bạn:

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

1
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

0

Người trợ giúp dựa trên gợi ý của Titas Milan, nhưng sử dụng một khối:

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
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.