基于服务器文件夹自动识别页数的归档分页功能实现求助

问题背景 #

刚接触CSS，完全不懂JS，要做网站归档页面的分页导航：

• 网站顶层有归档目录页，归档页面存在服务器子文件夹里
• 每个归档页要加载带「上一页/目录/下一页」的导航栏
• 按页面文件名末尾的数字（比如1001-1014、2001-2022这类分段）切换页面
• 到分段开头时隐藏上一页按钮，到分段末尾时隐藏下一页按钮
• 理想状态能自动识别归档文件夹的页数分段，不行的话手动配置也可以
• 现有代码只有从目录直接进入1001页并翻页时正常，其他场景全失效

现有代码的核心问题 #

1. sessionStorage存的是字符串，直接做数值判断会乱：比如字符串"1002"和数值1001比较能蒙对，但直接打开中间页面或者跨分段时，逻辑直接出错
2. 完全依赖sessionStorage记录页码，没从当前页面文件名提取：如果直接打开中间页面（比如1005.html），sessionStorage没值，导航逻辑直接崩
3. 按钮元素获取方式错误：代码里直接用butPrev、butNext，但没通过DOM获取这些元素，会报未定义错误
4. 硬编码了单一分段：只写死了1001-1014，没法扩展2001-2022这类新分段

修复后的完整代码 #

1. 导航栏HTML（单独存为navbar.html，和目录页CC weblog.html同目录） #

<div class="nav">
  <div class="nav flex">
    <img class="nav" src="../CC images/buts/but-back.png" alt="上一页" onclick="navPrev()" id="butPrev">
    <img class="navArch" src="../CC images/buts/but-up.png" alt="返回目录" onclick="navUp(); sessionStorage.clear()">
    <img class="nav" src="../CC images/buts/but-for.png" alt="下一页" onclick="navNext()" id="butNext">
  </div>
</div>
<script src="archive-nav.js"></script>

2. 核心导航JS（单独存为archive-nav.js，和navbar.html同目录） #

// 手动配置分段，要加新分段直接往数组里加就行
const pageSections = [
  { start: 1001, end: 1014 },
  { start: 2001, end: 2022 }
];

// 从当前页面文件名里提取页码
function getCurrentPageNum() {
  // 从URL里抠出文件名，比如"CC log 1001.html"
  const fileName = window.location.pathname.split('/').pop();
  // 提取里面的数字部分
  const numMatch = fileName.match(/\d+/);
  return numMatch ? parseInt(numMatch[0]) : null;
}

// 找到当前页码所属的分段
function getCurrentSection(currentNum) {
  return pageSections.find(section => currentNum >= section.start && currentNum <= section.end);
}

// 控制上/下一页按钮的显示隐藏
function toggleButtons(currentNum, section) {
  const butPrev = document.getElementById('butPrev');
  const butNext = document.getElementById('butNext');
  
  // 上一页：只有当前页码大于分段起始页才显示
  butPrev.style.visibility = currentNum > section.start ? 'visible' : 'hidden';
  // 下一页：只有当前页码小于分段结束页才显示
  butNext.style.visibility = currentNum < section.end ? 'visible' : 'hidden';
}

// 返回目录页
function navUp() {
  window.location.href = '../CC weblog.html';
}

// 跳转到上一页
function navPrev() {
  const currentNum = getCurrentPageNum();
  const section = getCurrentSection(currentNum);
  if (currentNum > section.start) {
    const prevNum = currentNum - 1;
    window.location.href = `../CC logs/CC log ${prevNum}.html`;
  }
}

// 跳转到下一页
function navNext() {
  const currentNum = getCurrentPageNum();
  const section = getCurrentSection(currentNum);
  if (currentNum < section.end) {
    const nextNum = currentNum + 1;
    window.location.href = `../CC logs/CC log ${nextNum}.html`;
  }
}

// 页面加载时初始化导航
function initArchiveNav() {
  const currentNum = getCurrentPageNum();
  if (!currentNum) return;
  
  const section = getCurrentSection(currentNum);
  if (!section) return;
  
  toggleButtons(currentNum, section);
}

// 导航栏加载完成后初始化
document.addEventListener('DOMContentLoaded', initArchiveNav);

3. 每个归档页面的加载代码（所有CC log XXXX.html里都加这段） #

<script>
document.addEventListener('DOMContentLoaded', () => {
  // 拉取导航栏并插入到页面顶部
  fetch('../navbar.html')
    .then(res => res.text())
    .then(html => {
      document.body.insertAdjacentHTML('afterbegin', html);
    });
});
</script>

使用说明 #

1. 把上面的navbar.html和archive-nav.js放在网站根目录（和CC weblog.html同一个文件夹）
2. 每个归档页面都加上第三部分的加载代码，用来自动加载导航栏
3. 要加新的页码分段，直接修改archive-nav.js里的pageSections数组，比如加{ start: 3001, end: 3010 }就行
4. 不管是从目录进入还是直接打开某一页，导航逻辑都会正常工作，按钮也会自动根据当前页码显示/隐藏

内容的提问来源于stack exchange，提问作者K-RAM