Rails truncate with a 'read more' toggle

Rails truncate with a 'read more' toggle

本文关键字：more toggle read truncate Rails with      更新时间：2023-09-26

我有一个段落，我想截断与点击"阅读更多"的选项，并有它滑动打开与其余的内容。内容来自数据库字段。下面是截断的内容:

<%= truncate(@major.glance, :length => 250, :omission => '... Read More')%>

我似乎找不到一种方法来处理从数据库中提取的数据。我看到很多使用全文的例子，你想隐藏在一个单独的div标签中的文本。但是，由于这个内容来自数据库，是动态的，我找不到任何关于如何做到这一点的信息。

您可以尝试以下操作

<div>
  <% if @major.glance.length > 250 %>
    <%= link_to_function truncate(@major.glance, length: 250), "$(this).parent().html('#{escape_javascript @major.glance}')" %>
  <% else %>
    <%= @major.glance %>
  <% end %>
</div>

或者如果您喜欢使用Read more链接

<div>
  <% if @major.glance.length > 250 %>
    <%= truncate(@major.glance, length: 250) %>
    <%= link_to_function '...Read more', "$(this).parent().html('#{escape_javascript @major.glance}')" %>
  <% else %>
    <%= @major.glance %>
  <% end %>
<div>

由于在Rails 4中，link_to_function已被弃用，建议使用非引人注目的js，请使用以下

<div>
  <% if @major.glance.length > 250 %>
    <%= truncate(@major.glance, length: 250) %>
    <%= link_to '...Read more', '', class: "read-more-#{@major.id}" %>
    <script>
      $('.read-more-<%= @major.id %>').on('click', function(e) {
        e.preventDefault()
        $(this).parent().html('<%= escape_javascript @major.glance %>')
      })
    </script>
  <% else %>
    <%= @major.glance %>
  <% end %>
<div>

我知道我加入这个话题有点晚了。我一直在解决同样的问题，尝试上面的解决方案，它工作得很好。然而，被隐藏的SEO明智的内容没有被搜索引擎索引。我也检查了Lynx，链接不能被跟踪(很明显)。所以我选择了Jed Foster | readmore.js的这个解决方案——lynx可以正确地阅读它，现在我正在等待SE索引更新，看看我是否可以在搜索结果中找到我自己。以防有人遇到类似的情况……

相关文章：