有一个类似于 HackerNews 的新闻报道显示，它使用<ol>标签进行编号和投票排名。当尝试使用 Kaminari gem 进行分页时<li>，每篇文章的编号会在每页上重置为 1-20。
我试过使用 CSS 计数器重置和计数器增量，但我还不能让它工作。我还尝试为每个页面手动添加计数器重置，但如果网站以某种方式看到超过 5 个页面，我将不得不手动编码增量，这是不可能的。
我想知道是否有一个js解决方案。
这是我的stories_controller的 index 方法：
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
这是我的故事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;
}
提前感谢您的任何帮助或新想法！
编辑：
通过取出有序列表标签并切换到列表样式类型设置为无以删除项目符号的无序列表来修复此问题。
这是我在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...