批量将文件夹图片导入HTML站点：高效替换图片名方法求助

嘿，别担心基础问题——手动改400张图片的文件名绝对是折磨人的重复劳动，必须用工具批量解决！给你几个适合新手的实用方法，按你的需求选就行：

方法1：用Notepad+++命令行快速生成所有图片标签（最适合你当前场景） #

这方法不用装额外工具，用你已经在用的Notepad++就能搞定：

1. 提取所有图片文件名
   打开你的图片文件夹，按住Shift键右键点击空白处，选择「在此处打开命令窗口」（或「打开PowerShell窗口」），输入对应格式的命令（根据你的图片格式改）：

   • 若图片是JPG：dir /b *.jpg > img_list.txt
   • 若图片是PNG：dir /b *.png > img_list.txt
     敲回车后，文件夹里会生成一个img_list.txt，里面是所有图片的文件名，每行一个。

2. 批量转成HTML图片代码
   用Notepad++打开img_list.txt，按下Ctrl+H打开替换窗口：

   • 「查找模式」选择「正则表达式」
   • 查找内容填：^(.*)$（这行正则会匹配每一行的完整文件名）
   • 替换内容填你相册里的图片标签格式，比如：<div class="photo-item"><img src="$1" alt="$1" /></div>（$1会自动替换成每行的文件名）
     点击「全部替换」，瞬间所有文件名就变成了可直接用的HTML代码块。

3. 替换到你的相册HTML里
   打开你原来的相册HTML文件，找到之前手动替换的图片标签区域，删掉旧内容，把刚才生成的所有图片代码粘贴进去就大功告成了！

方法2：直接批量替换HTML里的占位符（适合已有固定模板的情况） #

如果你的相册HTML是重复的模板结构（比如每个图片对应一段相同的代码，只有文件名不同）：

1. 先把HTML里的第一个图片代码改成模板，把文件名换成统一的占位符，比如{{IMG_NAME}}，然后复制这段模板400次（可以用Notepad++的「编辑→重复」功能，或者按住Alt选列后按Ctrl+C/V快速复制多行）。
2. 把img_list.txt里的所有文件名复制到剪贴板。
3. 回到HTML文件，用Ctrl+F查找{{IMG_NAME}}，点击「全部标记」选中所有占位符，然后用「编辑→列块编辑」（快捷键Alt+C），选择「插入文本」，粘贴剪贴板里的文件名——Notepad++会自动把每行文件名对应替换到占位符位置。

方法3：用Python脚本一键生成完整相册（彻底解放双手） #

如果以后还有批量生成相册的需求，写几行简单的Python代码能彻底搞定：

新建一个generate_album.py文件，粘贴下面的代码，修改图片文件夹路径后运行即可：

import os

# 配置参数，改成你的路径和需求
img_folder = "C:\\Users\\你的用户名\\Pictures\\我的相册"  # 注意Windows路径用双反斜杠
output_html = "我的相册.html"
grid_columns = 4  # 相册每行显示几张图片

# 获取所有图片文件（支持常见格式）
img_extensions = ('.jpg', '.jpeg', '.png', '.gif')
img_files = [f for f in os.listdir(img_folder) if f.lower().endswith(img_extensions)]

# 相册HTML模板，可自定义样式
html_template = """
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的专属相册</title>
    <style>
        body { margin: 0; padding: 20px; background-color: #f5f5f5; }
        .album-grid { display: grid; grid-template-columns: repeat({grid_cols}, 1fr); gap: 15px; }
        .photo-card { background: white; padding: 10px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .photo-card img { width: 100%; height: auto; border-radius: 4px; }
        .photo-name { text-align: center; margin-top: 8px; font-size: 14px; color: #333; }
    </style>
</head>
<body>
    <h1 style="text-align: center; color: #2c3e50;">我的相册</h1>
    <div class="album-grid">
        {{PHOTO_CARDS}}
    </div>
</body>
</html>
"""

# 生成所有图片卡片代码
photo_cards = "\n        ".join([f'''
<div class="photo-card">
    <img src="{os.path.basename(f)}" alt="{os.path.splitext(f)[0]}">
    <div class="photo-name">{os.path.splitext(f)[0]}</div>
</div>
''' for f in img_files])

# 替换模板变量并保存HTML
final_html = html_template.replace("{grid_cols}", str(grid_columns)).replace("{{PHOTO_CARDS}}", photo_cards)
with open(os.path.join(img_folder, output_html), 'w', encoding='utf-8') as f:
    f.write(final_html)

print(f"相册已生成！路径：{os.path.join(img_folder, output_html)}")

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