<ol> 使用Kaminari在每个页面上重置轨道编号

Question

有一个新闻故事显示，类似于HackerNews，它使用<ol>标记进行编号和投票排名。当尝试使用Kaminari宝石分页时，每篇文章的<li>编号在每页上重置为1-20。

我试过使用CSS反重置和反增量，但我不能让它工作。我还尝试手动为每个页面添加counter-reset，但如果网站看到超过5个页面，我将不得不手动编码增量，这是不可能的。

我想知道是否有一个js解决方案。

这是我的stories_controller:

的索引方法

def index
    if params[:sort] && params[:sort].to_sym == :newest
      @stories = Story.order("created_at DESC").page(params[:page]).per(20)
    else
      @stories = Story.order('karma DESC').page(params[:page]).per(20)
    end
end

<<p>这是我的故事strong> index.html.haml :

%ol
  - @stories.each do |story|
    = render partial: 'story', locals: { story: story, tag_type: :li }
= paginate @stories

和_story.html。haml部分去掉上面的:

= content_tag defined?(tag_type) ? tag_type : :div, class: 'story' do
  = link_to "⇧", upvote_story_url(story), class: 'upvote', method: :post
  %div
    .title
      = link_to story.title.titlecase, story.url
      %span.link-domain (#{story.url_domain})
    .metadata
      = statusline story
      |
      = link_to 'comments', story, class: 'comments-link'
      = "(#{story.comments.all.count})"

最后是相关的CSS:

ul, ol {
    margin: 0 1.5em 1.5em 0;
    padding-left: 2.0em;
    counter-reset: section;
    li {
      margin: 10px;
    }
  }
  li {
    float: top;
    counter-increment: section;
  }

提前感谢任何帮助或新的想法!

编辑:

通过取出有序列表标签并切换到无序列表并将列表样式类型设置为none来移除项目符号来修复此问题。

下面是我在haml视图中使用的代码:

- if params[:page].nil? || params[:page] == "0" || params[:page] == "1"
    - x = 0
  - else
    - page = params[:page].to_i - 1
    - x = page * 15
  - @stories.each_with_index do |story, index|
    = content_tag defined?(tag_type) ? tag_type : :div, class: 'story' do
      %li
        .title
          .story_number
            = index + x + 1
          = etc...

Answer 1

修复了上面编辑的问题