You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

开启Jekyll分页后,如何按修改日期对文章进行排序?

解决Jekyll开启分页后按修改日期排序的问题

这个问题我之前也碰到过,核心原因是jekyll-paginate默认是基于Jekyll原生的site.posts集合分页,而site.posts默认是按发布日期(posted)倒序排列的。你之前在模板里做的sort:"modified"只是对当前分页返回的小部分文章排序,而不是先全局排序所有文章再分页,所以结果不符合预期。下面给你几种不同场景的解决方案:

方案一:用jekyll-paginate-v2替代官方分页插件(推荐,灵活度更高)

官方的jekyll-paginate功能比较有限,而jekyll-paginate-v2支持自定义排序字段,完美匹配你的需求:

  1. 替换插件:修改项目的Gemfile,把gem "jekyll-paginate"替换成gem "jekyll-paginate-v2",然后运行bundle install更新依赖。
  2. 配置分页规则:在_config.yml里添加以下配置,指定按modified字段倒序排序:
pagination:
  enabled: true
  sort_field: 'modified' # 按修改日期排序
  sort_reverse: true     # 新到旧排列
  per_page: 10           # 每页展示的文章数量,按需调整
  1. 修改模板循环:把原来的排序代码替换成分页插件提供的集合:
{% for post in page.paginator.posts %}
  <!-- 这里写你的文章渲染逻辑 -->
{% endfor %}

这样插件会先全局按修改日期排序所有文章,再进行分页,完全符合你的需求。

方案二:自定义插件修改site.posts排序(适合不想换插件的场景)

如果你不想替换分页插件,可以通过Jekyll插件重新定义site.posts的排序规则:

  1. 在项目根目录创建_plugins文件夹(如果还没有的话)。
  2. 在该文件夹下创建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
  1. 模板里直接用默认的分页代码即可:
{% for post in paginator.posts %}
  <!-- 文章渲染逻辑 -->
{% endfor %}

这个插件会在Jekyll初始化完成后,重新排序所有文章,这样jekyll-paginate就会基于排序后的集合分页了。

⚠️ 注意:如果你的站点部署在GitHub Pages上,自定义插件是不被支持的,这种情况请用下面的方案三。

方案三:GitHub Pages环境下手动实现分页

GitHub Pages只支持官方的jekyll-paginate插件,且不允许自定义插件,所以需要手动实现分页逻辑:

  1. 先获取全局排序后的文章集合:
{% assign sorted_posts = site.posts | sort: 'modified' | reverse %}
  1. 手动计算分页参数(以每页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 %}
  1. 渲染当前页的文章:
{% for post in paginated_posts %}
  <!-- 文章渲染逻辑 -->
{% endfor %}
  1. 添加分页导航(可选):
<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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.08 20:27:33