教程使用Cloudflare+GitHub搭建图床

from PIL import Image
import os

current_directory = os.getcwd()

# ---------- 第一步：转换图片为 webp 并删除原文件 ----------
for filename in os.listdir(current_directory):
    file_path = os.path.join(current_directory, filename)
    # 只处理文件，忽略子目录
    if not os.path.isfile(file_path):
        continue

    # 不区分大小写地匹配图片扩展名
    if filename.lower().endswith((".jpg", ".jpeg", ".png")):
        try:
            with Image.open(file_path) as img:
                output_filename = os.path.splitext(filename)[0] + ".webp"
                output_path = os.path.join(current_directory, output_filename)
                img.save(output_path, "webp")
            os.remove(file_path)          # 删除原图
            print(f"转换成功：{filename} -> {output_filename}")
        except Exception as e:
            print(f"转换失败：{filename}，错误：{e}")

# ---------- 第二步：生成 Markdown 列表 ----------
image_files = []
image_count = 0

for filename in os.listdir(current_directory):
    file_path = os.path.join(current_directory, filename)
    if not os.path.isfile(file_path):
        continue

    # 统计所有 .webp 文件（图片）
    if filename.lower().endswith(".webp"):
        image_count += 1
        image_name = os.path.splitext(filename)[0]
        image_url = f"./{filename}"          # 相对链接
        image_files.append(f"| {image_count} | {image_name} | [下载]({image_url}) |")

# 写入 list.md
with open("list.md", "w", encoding="utf-8") as md_file:
    md_file.write("| # | 名称 | 链接 |\n")
    md_file.write("| --- | --- | --- |\n")
    md_file.write("\n".join(image_files))

if image_files:
    print(f"已生成图片列表到 list.md，共 {image_count} 张图片")
else:
    print("当前目录下没有 .webp 图片文件")

pip3 install --upgrade pip && pip install pillow && cd ./<单独的文件夹> && python webp.py

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>图片列表</title>
  <link rel="shortcut icon" type="image/ico" href="https://xiaofeishu-picture.pages.dev/picture/ico.png">
  <!--使用MDUI-->
  <link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css" />
  <script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>
  <!-- 引入Bootstrap的CSS库 -->
  <link href="https://unpkg.com/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入Bootstrap的JavaScript库 -->
  <script src="https://unpkg.com/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script
    src="https://unpkg.com/genshin-good-words"
    charset="utf-8"></script>
  <style>
    body {
      font-weight: 500;
    }

    /* 为导航栏添加上边距 */
    .mdui-appbar {
      margin-bottom: 20px;
    }
  </style>
</head>

<body>
  <!--导航栏-->
  <div class="mdui-appbar" mdui-appbar-fixed>
    <div class="mdui-toolbar mdui-color-indigo">
      <a class="mdui-btn mdui-btn-icon" id="toggle">
        <i class="mdui-icon material-icons">menu</i>
      </a>
      <a href="#" class="mdui-typo-headline">图片列表</a>
      <div class="mdui-toolbar-spacer"></div>
      <div class="mdui-typo-title" id="ys">欲买桂花同载酒...只可惜故人，何日再见呢?</div>
    </div>
  </div>
</body>

<body class="mdui-drawer-body " style="padding-top: 20px;">
  <div class="mdui-drawer mdui-drawer-close" id="drawer">
    <ul class="mdui-list">
      <div class="mdui-card-header">
        <img class="mdui-card-header-avatar"
          src="https://xiaofeishu-picture.pages.dev/picture/ico.png" />
        <div class="mdui-card-header-title">没用的小废鼠</div>
        <div class="mdui-card-header-subtitle">awa</div>
      </div>
      <li class="mdui-subheader"><i class="mdui-icon material-icons">link</i>更多</li>
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons">list</i>
        <a class="mdui-list-item-content" href="https://ymh0000123.github.io/">主页</a>
      </li>
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons">assignment</i>
        <a class="mdui-list-item-content" href="https://xiaofeishu-boke.netlify.app/">blog</a>
      </li>
  </div>
</body>

<body>
  <div class="mdui-col-md-7 mdui-col-offset-md-3">
    <div class="card">
      <div class="card-header">
        <div class="mdui-typo-display-1"><i class="mdui-icon material-icons">view_list</i>文件列表</div>
      </div>
      <div class="mdui-container">
        <table class="mdui-table mdui-table-hoverable" id="dynamic-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>文件名</th>
              <th>下载链接</th>
            </tr>
          </thead>
          <tbody>
            <ul class="mdui-list" id="dynamic-list">
              <!-- 动态列表将在这里生成 -->
            </ul>
          </tbody>
        </table>
      </div>

    </div>
  </div>
  <script>
    var $ = mdui.$;
    var inst = new mdui.Drawer('#drawer');

    // method

    $('#toggle').on('click', function () {
      inst.toggle();
    });

  </script>
  <script>
    // 使用JavaScript来获取README.md文件内容并生成动态列表
    const dynamicTable = document.getElementById("dynamic-table").getElementsByTagName('tbody')[0];

    // 发送HTTP请求获取list.md文件内容
    fetch("list.md")
      .then(response => response.text())
      .then(data => {
        // 使用正则表达式来解析表格行
        const tableRows = data.match(/\|(.+?)\|(.+?)\|\s*\[下载\]\((.+?)\)\s*\|/g);

        // 遍历匹配到的行并将数据添加到表格中
        if (tableRows) {
          tableRows.forEach(row => {
            const rowData = row.match(/\|(.+?)\|(.+?)\|\s*\[下载\]\((.+?)\)\s*\|/);

            if (rowData) {
              const [_, index, fileName, downloadLink] = rowData;
              // 创建表格行
              const tableRow = dynamicTable.insertRow();
              // 创建并添加表格单元格
              const cell1 = tableRow.insertCell(0);
              const cell2 = tableRow.insertCell(1);
              const cell3 = tableRow.insertCell(2);

              cell1.textContent = index.trim();
              cell2.textContent = fileName.trim();
              cell3.innerHTML = `<a href="${downloadLink.trim()}" target="_blank" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent mdui-color-teal">下载</a>`;
            }
          });
        }
      })
      .catch(error => {
        console.error("无法获取文件内容:", error);
      });
  </script>
</body>

</html>