如何为按升序排列的HTML文件添加下一页跳转按钮？

针对你在Project文件夹中拥有的YYMMDD.html格式文件，要添加跳转到下一个日期页面的按钮，这里提供两种实用方案：

方案一：静态批量处理（推荐，无运行环境限制） #

通过Python脚本一次性给所有文件插入对应下一页的按钮，处理后直接打开文件即可使用，无需依赖服务器。

实现步骤： #

1. 将下面的Python脚本保存到Project文件夹中，命名为add_next_button.py
2. 安装依赖：执行pip install beautifulsoup4
3. 运行脚本：执行python add_next_button.py，脚本会自动处理所有符合格式的HTML文件

import os
from bs4 import BeautifulSoup

# 筛选并排序所有YYMMDD.html格式的文件
files = [f for f in os.listdir('.') if f.endswith('.html') and len(f) == 10 and f[:6].isdigit()]
sorted_files = sorted(files)

# 建立每个文件到下一个文件的映射
next_file_map = {}
for idx, filename in enumerate(sorted_files):
    if idx < len(sorted_files) - 1:
        next_file_map[filename] = sorted_files[idx + 1]
    else:
        next_file_map[filename] = None  # 最后一个文件无下一页

# 遍历修改每个文件
for filename in sorted_files:
    with open(filename, 'r', encoding='utf-8') as f:
        soup = BeautifulSoup(f.read(), 'html.parser')
    
    if next_file_map[filename]:
        # 创建按钮HTML片段
        btn_html = f'''
        <div style="margin: 2rem 0;">
            <button onclick="window.location.href='{next_file_map[filename]}'" 
                    style="padding: 0.5rem 1rem; cursor: pointer; font-size: 1rem;">
                下一页
            </button>
        </div>
        '''
        # 插入到页面底部
        soup.body.append(BeautifulSoup(btn_html, 'html.parser'))
    
    # 保存修改后的文件
    with open(filename, 'w', encoding='utf-8') as f:
        f.write(str(soup))

print("所有文件的下一页按钮已添加完成！")

方案二：浏览器端动态生成（适合临时使用） #

如果不想批量修改文件，可以在每个HTML的</body>标签前插入这段JavaScript代码，页面加载时会自动查找并生成下一页按钮。

注意： #

此方案需要在本地服务器环境下运行（比如执行python -m http.server后，通过http://localhost:8000访问文件），直接双击打开本地HTML文件会因浏览器安全限制无法获取文件列表。

<script>
// 获取当前页面文件名
const currentFile = window.location.pathname.split('/').pop();
const currentDateStr = currentFile.split('.')[0];

// 加载完成后执行逻辑
window.onload = async () => {
    try {
        // 请求当前目录的文件列表
        const res = await fetch('.');
        const dirHtml = await res.text();
        
        // 提取所有YYMMDD.html格式的文件
        const fileMatches = dirHtml.match(/\d{6}\.html/g) || [];
        const sortedFiles = fileMatches.sort((a, b) => {
            const dateA = a.split('.')[0];
            const dateB = b.split('.')[0];
            return dateA.localeCompare(dateB);
        });
        
        // 找到当前文件的下一个文件
        const currentIdx = sortedFiles.indexOf(currentFile);
        if (currentIdx !== -1 && currentIdx < sortedFiles.length - 1) {
            const nextFile = sortedFiles[currentIdx + 1];
            // 创建按钮
            const btn = document.createElement('button');
            btn.textContent = '下一页';
            btn.style.padding = '0.5rem 1rem';
            btn.style.cursor = 'pointer';
            btn.style.fontSize = '1rem';
            btn.onclick = () => window.location.href = nextFile;
            // 添加到页面底部
            document.body.appendChild(btn);
        }
    } catch (err) {
        console.error('无法获取文件列表，请使用本地服务器访问页面');
    }
};
</script>

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