Lazy loaded image
教程
Lazy loaded image使用Cloudflare+GitHub搭建图床
字数 1055阅读时长≈ 3 分钟
2024-2-4
2024-8-22
24
notion image

准备工作

  1. GitHub账号
  1. Cloudflare账号

操作流程

  1. 进入GitHub创建一个仓库（可以是私有仓库）
 
 
notion image
  1. 创建完成后打开Cloudflare官网
  1. 点击 Workers 和 Pages 创建 应用程序 pages 连接到git
notion image
  1. 选择你刚刚创建的仓库
构建设置空着就行
  1. 点击 保存并部署
  1. 完成之后点击下面的域名就可以访问了
notion image
  1. 添加文件 进入GitHub 上传图片就行了

其他

如果你怕文件太大并且整理麻烦不妨试试后面的步骤

python

from PIL import Image
import os

# 获取当前目录
current_directory = os.getcwd()

# 遍历当前目录下的所有文件
for filename in os.listdir(current_directory):
    if filename.endswith((".jpg", ".jpeg", ".png")):
        # 打开图片文件
        with Image.open(filename) as img:
            # 构建输出文件名，将扩展名改为.webp
            output_filename = os.path.splitext(filename)[0] + ".webp"
            # 转换为webp格式并保存
            img.save(output_filename, "webp")
        
        # 删除原始图片文件
        os.remove(filename)

print("图片转换并删除原文件完成！")

# 获取当前目录
current_directory = os.getcwd()

# 获取当前目录下的所有文件
files = os.listdir(current_directory)

# 用于存储图片文件的列表
image_files = []

image_count = 0
for file in files:
    # 检查文件扩展名以确定是否为图片文件
    if file.endswith(".webp") :
        image_count += 1
        # 提取不包含扩展名的文件名作为名称
        image_name = os.path.splitext(file)[0]
        # 构建图片文件的链接
        image_url = f"./{file}"
        # 将信息添加到列表中，包括序号、名称和链接
        image_files.append(f"| {image_count}   | {image_name}      | [下载]({image_url}) |")



# 清空或创建Markdown文件并写入表格内容
with open("list.md", "w", encoding="utf-8") as md_file:
    # 写入Markdown表格的标题行和分隔行
    md_file.write("| #   | 名称                        | 链接                      |\n")
    md_file.write("| --- | --------------------------- | ------------------------- |\n")
    # 写入图片信息行
    md_file.write("\n".join(image_files))

if image_files:
    print("已生成图片列表到 list.md 文件")
    print("\n".join(image_files))
else:
    print("当前目录下没有图片文件")
Python
这个代码可以自动把图片转换成体积更小的 webp 文件 并且生成 list.md
注意 需要安装 python的Image库
CF构建命令

shell

pip3 install --upgrade pip && pip install pillow && cd ./<单独的文件夹> && python webp.py
Shell
如果出现 生成出来的序号不是1开始的 请创建一个文件夹单独放置
再搭配

html

<!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/[email protected]/dist/css/mdui.min.css" />
  <script src="https://unpkg.com/[email protected]/dist/js/mdui.min.js"></script>
  <!-- 引入Bootstrap的CSS库 -->
  <link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入Bootstrap的JavaScript库 -->
  <script src="https://unpkg.com/[email protected]/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>
HTML
使用效果更佳 😀
 
上一篇
如何使用Cloudflare搭建VuePress文档
下一篇
2024新年快乐！！！
评论
Loading...
目录