开启Jekyll分页后,如何按修改日期对文章进行排序?
解决Jekyll开启分页后按修改日期排序的问题
这个问题我之前也碰到过,核心原因是jekyll-paginate默认是基于Jekyll原生的site.posts集合分页,而site.posts默认是按发布日期(posted)倒序排列的。你之前在模板里做的sort:"modified"只是对当前分页返回的小部分文章排序,而不是先全局排序所有文章再分页,所以结果不符合预期。下面给你几种不同场景的解决方案:
方案一:用jekyll-paginate-v2替代官方分页插件(推荐,灵活度更高)
官方的jekyll-paginate功能比较有限,而jekyll-paginate-v2支持自定义排序字段,完美匹配你的需求:
- 替换插件:修改项目的
Gemfile,把gem "jekyll-paginate"替换成gem "jekyll-paginate-v2",然后运行bundle install更新依赖。 - 配置分页规则:在
_config.yml里添加以下配置,指定按modified字段倒序排序:
pagination: enabled: true sort_field: 'modified' # 按修改日期排序 sort_reverse: true # 新到旧排列 per_page: 10 # 每页展示的文章数量,按需调整
- 修改模板循环:把原来的排序代码替换成分页插件提供的集合:
{% for post in page.paginator.posts %} <!-- 这里写你的文章渲染逻辑 --> {% endfor %}
这样插件会先全局按修改日期排序所有文章,再进行分页,完全符合你的需求。
方案二:自定义插件修改site.posts排序(适合不想换插件的场景)
如果你不想替换分页插件,可以通过Jekyll插件重新定义site.posts的排序规则:
- 在项目根目录创建
_plugins文件夹(如果还没有的话)。 - 在该文件夹下创建
sort_posts_by_modified.rb文件,内容如下:
Jekyll::Hooks.register :site, :after_init do |site| # 优先按modified字段倒序排序,没有modified的话用posted字段兜底 site.posts.docs.sort! do |a, b| date_a = a.data['modified'] || a.data['posted'] date_b = b.data['modified'] || b.data['posted'] date_b <=> date_a end end
- 模板里直接用默认的分页代码即可:
{% for post in paginator.posts %} <!-- 文章渲染逻辑 --> {% endfor %}
这个插件会在Jekyll初始化完成后,重新排序所有文章,这样jekyll-paginate就会基于排序后的集合分页了。
⚠️ 注意:如果你的站点部署在GitHub Pages上,自定义插件是不被支持的,这种情况请用下面的方案三。
方案三:GitHub Pages环境下手动实现分页
GitHub Pages只支持官方的jekyll-paginate插件,且不允许自定义插件,所以需要手动实现分页逻辑:
- 先获取全局排序后的文章集合:
{% assign sorted_posts = site.posts | sort: 'modified' | reverse %}
- 手动计算分页参数(以每页10篇为例):
{% assign posts_per_page = 10 %} {% assign total_posts = sorted_posts.size %} {% assign total_pages = total_posts | divided_by: posts_per_page %} {% if total_posts % posts_per_page != 0 %} {% assign total_pages = total_pages | plus: 1 %} {% endif %} <!-- 获取当前页码,首页默认是第1页 --> {% assign current_page = page.url | split: '/' | last | replace: 'page', '' | plus: 0 %} {% if current_page == 0 %} {% assign current_page = 1 %} {% endif %} <!-- 计算当前页的文章起始/结束索引 --> {% assign start_index = (current_page | minus: 1) | times: posts_per_page %} {% assign end_index = start_index | plus: posts_per_page | minus: 1 %} {% if end_index >= total_posts %} {% assign end_index = total_posts | minus: 1 %} {% endif %} <!-- 截取当前页的文章 --> {% assign paginated_posts = sorted_posts | slice: start_index, posts_per_page %}
- 渲染当前页的文章:
{% for post in paginated_posts %} <!-- 文章渲染逻辑 --> {% endfor %}
- 添加分页导航(可选):
<div class="pagination-nav"> {% if current_page > 1 %} <a href="{% if current_page == 2 %}/{% else %}/page{{ current_page | minus: 1 }}/{% endif %}">← 上一页</a> {% endif %} {% for page in (1..total_pages) %} {% if page == current_page %} <span class="current-page">{{ page }}</span> {% else %} <a href="{% if page == 1 %}/{% else %}/page{{ page }}/{% endif %}">{{ page }}</a> {% endif %} {% endfor %} {% if current_page < total_pages %} <a href="/page{{ current_page | plus: 1 }}/">下一页 →</a> {% endif %} </div>
这种方法需要确保分页页面的URL结构正确,比如首页是index.html,第二页对应page2/index.html,你可以根据自己的站点结构调整URL规则。
内容的提问来源于stack exchange,提问作者Cynthia
相关产品推荐
相关产品推荐

