Mkdocs Material主题博客站点：如何让Next按钮跳转至时间顺序下一篇？

最快的解决方法是通过自定义JavaScript脚本直接交换两个按钮的跳转链接与显示内容，无需修改主题核心模板的复杂逻辑，步骤如下：

• 在站点根目录的docs文件夹下新建javascripts目录（不存在则创建）
• 在该目录中新建swap-nav-buttons.js文件，写入以下代码：

document.addEventListener('DOMContentLoaded', function() {
  // 获取Next和Prev按钮元素
  const nextBtn = document.querySelector('.md-footer__link--next');
  const prevBtn = document.querySelector('.md-footer__link--prev');
  
  if (nextBtn && prevBtn) {
    // 交换跳转链接
    const tempHref = nextBtn.href;
    nextBtn.href = prevBtn.href;
    prevBtn.href = tempHref;
    
    // 交换按钮文本（若已通过footer.html修改过文本，可删除这段）
    const tempText = nextBtn.textContent.trim();
    nextBtn.textContent = prevBtn.textContent.trim();
    prevBtn.textContent = tempText;
    
    // 交换图标样式（匹配Material主题的图标逻辑）
    const nextIcon = nextBtn.querySelector('svg');
    const prevIcon = prevBtn.querySelector('svg');
    if (nextIcon && prevIcon) {
      const tempIconClass = nextIcon.getAttribute('class');
      nextIcon.setAttribute('class', prevIcon.getAttribute('class'));
      prevIcon.setAttribute('class', tempIconClass);
    }
  }
});

• 在mkdocs.yml中添加脚本引用（无extra_javascript项则新增）：

extra_javascript:
  - javascripts/swap-nav-buttons.js

• 重新构建部署站点，按钮跳转逻辑即可与逆时间内容顺序匹配。

若之前已通过footer.html修改过按钮文本，可删除脚本中交换文本的代码段，仅保留链接交换部分。

内容的提问来源于stack exchange，提问作者oceanclub