没用的小废鼠的Blog https://example.com 知识，理当分享！ zh-CN Mon, 06 Jul 2026 12:01:53 GMT 使用Cloudflare+GitHub搭建图床 https://example.com/article/Cloudflare-GitHub-img https://example.com/article/Cloudflare-GitHub-img 分享一些比较实用的网站 准备工作

1. GitHub账号

1. Cloudflare账号

操作流程

1. 进入GitHub创建一个仓库（可以是私有仓库）

1. 创建完成后打开Cloudflare官网

1. 点击 Workers 和 Pages 创建 应用程序 pages 连接到git

1. 选择你刚刚创建的仓库

构建设置空着就行

1. 点击 保存并部署

1. 完成之后点击下面的域名就可以访问了

1. 添加文件 进入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 图片文件")

这个代码可以自动把图片转换成体积更小的 webp 文件 并且生成 list.md

注意 需要安装 python的Image库

CF构建命令

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

如果出现 生成出来的序号不是1开始的 请创建一个文件夹单独放置

再搭配

<!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>

使用效果更佳 😀

]]> Sat, 06 Jun 2026 16:14:00 GMT 个人云游戏指南 https://example.com/article/cloud-game-1 https://example.com/article/cloud-game-1 使用Cloudflare和GitHub搭建服务速度快并且免费的图床 感谢

1. LizardByte/Sunshine: Self-hosted game stream host for Moonlight. 一切的基础

1. TrueZhuangJia/moonlight-android-Enhanced-MultiTouch: A Mihoyo game mobile UI oriented fork. Stream the game from PC and play it via native mobile device UI. 多点触控 灵敏度调节 (触点移速调节) 的 Moonlight分支

1. 【全网首发】再也不需要启动器！自建云星穹铁道触摸操作参数出炉！_哔哩哔哩bilibili 星穹铁道触摸操作参数

准备工作

1. 一台电脑（被控端）

1. 一台控制端（可以是 电脑/主机）

1. Sunshine 安装包

1. Moonlight （安卓推荐使用TrueZhuanJia大佬的多点触控版）

1. 良好的网络环境

1. #可选 Tailscale （异地组网需要）

安装

1. 在（被控端）电脑上安装 Sunshine

1. 在打开的网页中配置用户名和密码

配置

1. 在（被控端）电脑上打开 localhost:47990 （默认）

1. 点击 应用程序 → 添加新应用

1. 输入 名字和命令 （这里拿 Minecraft for Windows 举例）

1. 在命令里面填写 minecraft: （注意后面的冒号）

1. 在退出应用时执行命令填写 taskkill /IM Minecraft.Windows.exe /F 来退出时关闭游戏

使用

1. 在在控制端安装 Moonlight

1. 在右上角的 加号 填写（被控端）电脑的内网IP

1. 点击 电脑 就可以参考你配置的 应用程序/游戏 了

]]> Sat, 06 Jun 2026 05:33:00 GMT 免费部署Alist https://example.com/article/free-Alist https://example.com/article/free-Alist 使用CLAWCLOUD Run部署免费的Alist 准备工作

• 注册满180天的Github账号*1

• 域名（可选）*1

打开CLAWCLOUD Run

1. 打开ClawCloud Run产品的官网

1. 点击右上角的 Get started

1. 使用Github登录

1. 登录完成就可以选择地区 建议选择一个离你较近的服务器地区，提高访问速度。

部署Alist

1. 在主界面打开 “App Store”

1. 找到 "Alist”

1. 在配置页面 输入密码

1. 点击 右上角的 “Deploy App” 部署

绑定域名（可选）

1. 点击 “App Launchpad”

1. 点击刚刚创建的 Alist 应用

1. 点击右上角的 “Update” 按钮，进入更新页面

1. 在 "Network" 卡片中找到并点击 “Custom Domain”

1. 在 “Custom Domain” 下面的输入框输入要绑定的域名

1. 将你的域名 CNAME 解析到 ClawCloud Run 提供的域名上

1. 划到页面顶部，点击 "Update" 按钮，等待片刻即可完成域名绑定

1. 等待片刻就完成了

🎉大功告成

使用刚才绑定的域名访问就直接访问了

]]> Sat, 06 Jun 2026 05:33:00 GMT 解决移动无法访问Cloudflare加速的网站的“玄学”问题 https://example.com/article/Cloudflare-cn-1 https://example.com/article/Cloudflare-cn-1 你的网站用了 Cloudflare 加速，但用移动网络的朋友却怎么也打不开？别急，你不是一个人！还是有解决办法的。 事情的起因

最近我遇到了一个怪事儿：在学校的网络（移动）和流量（移动）都出现无法访问Cloudflare加速后的我的网站，但奇怪的是在家里的电信是正常访问的。

经过一番排查，我定位到问题所在：移动访问我的域名并且开启经过Cloudflare加速全国的移动的访问都会受影响。

寻找“药方”

于是我开始在网上到处找解决方法，最终在 LINUX DO 社区的一篇讨论帖中找到了非常有效的解决办法。
LINUX DO社区回复的话题

https://linux.do/t/topic/255306/12?u=xiaofeishu

解决后

参考帖子里大神的思路，经过我的一顿操作，在保留所有访服务正常运行把域名转到了另外的账号上。
再次测试，各地的访问速度检测一片“绿油油”，问题完美解决！

]]> Sat, 06 Jun 2026 05:33:00 GMT 我是标题 https://example.com/article/awa https://example.com/article/awa 我是简介 我是内容

]]> Sun, 24 May 2026 04:55:00 GMT 示例文章 https://example.com/article/1308fb44-cd86-80f5-8f2e-f5b891555485 https://example.com/article/1308fb44-cd86-80f5-8f2e-f5b891555485 基本段落 书中自有黄金屋，书中自有颜如玉 生活的意义并不是与他人争高下，而在于享受努力实现目标的过程，结果只是对自己行动的嘉奖。 将进酒 李白〔唐代〕参考[1] 君不见黄河之水天上来，奔流到海不复回。 君不见高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲， 基本段落
书中自有黄金屋，书中自有颜如玉

将进酒

李白〔唐代〕参考[1]

君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我倾耳听。
钟鼓馔玉不足贵，但愿长醉不愿醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。

特殊段落

1.代码

# Bash 安装zsh
$ sudo apt install zsh

# 配置ohmyzsh
$ sh -c "$(curl -fsSL <https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh>)"

# 配置ohmyzsh插件
# zsh-autosuggestions
$ git clone git://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions

# zsh-syntax-highlighting
$ git clone <https://github.com/zsh-users/zsh-syntax-highlighting.git> ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

// 启用插件
$ vim .zshrc
plugins=(git z zsh-autosuggestions zsh-syntax-highlighting)

2.公式

• 数学公式

• 化学方程

3. 图表

graph LR;
公司架构-->商务
公司架构-->研发
公司架构-->设计
公司架构-->运营
公司架构-->产品

4.下载附件

5. 照片集

6. 内嵌网页

7.内嵌视频

8.代办

9.折叠列表

10. 同步块

Notion支持将不同页面的块进行同步，即 SyncBlock，以下是来自另一个页面的块：

11.多级目录

heading标题在博客中自动转为目录

二级目录3

多级列表

• 事物的必然性

1. 事物按规律变化，也有一种不可避免的性质．这种性质就叫做必然性

模板使用说明

若要部署你的NotionNext项目，请复制该模板，并按照模板格式创建文章：

Notion页面中，每篇文章都将有以下属性🤔：

评论插件

系统支持 Waline\Giscus\Valine\GitTalk\Utterance\Cusdis\Twikoo六种评论插件，并且可以同时开启，点击评论区的Tab来体验。

按照以下教程可以开启响应的评论插件

引用文献

1. 关于李白

]]> Sat, 23 Nov 2024 07:15:00 GMT 封面测试 https://example.com/article/1158fb44-cd86-80f5-98fa-f17a7e20a964 https://example.com/article/1158fb44-cd86-80f5-98fa-f17a7e20a964 111 111

]]> Sat, 19 Oct 2024 13:21:00 GMT xxs攻击测试 https://example.com/article/1818fb44-cd86-80f4-aa14-d6764a64aabd https://example.com/article/1818fb44-cd86-80f4-aa14-d6764a64aabd <script>alert('XSS')</script> <script>console.log(’xxs攻击测试’)</script>

<img src="#" onerror=alert("图片XXS攻击")>

]]> Sat, 30 May 2026 09:02:00 GMT notion颜色测试 https://example.com/article/1718fb44-cd86-80a8-b54c-f4b032f228c4 https://example.com/article/1718fb44-cd86-80a8-b54c-f4b032f228c4 notion颜色测试 正常 加粗 斜体 下划线 删除线 代码

灰色 加粗 斜体 下划线 删除线 代码

棕色 加粗 斜体 下划线 删除线 代码

橙色 加粗 斜体 下划线 删除线 代码

黄色 加粗 斜体 下划线 删除线 代码

绿色 加粗 斜体 下划线 删除线 代码

蓝色 加粗 斜体 下划线 删除线 代码

紫色 加粗 斜体 下划线 删除线 代码

粉色 加粗 斜体 下划线 删除线 代码

红色 加粗 斜体 下划线 删除线 代码

]]> Sat, 04 Jan 2025 09:28:00 GMT 1111 https://example.com/article/1158fb44-cd86-80e5-8f30-dd6b38bcef88 https://example.com/article/1158fb44-cd86-80e5-8f30-dd6b38bcef88 无简介 无简介

]]> Fri, 04 Oct 2024 11:15:00 GMT 我是5号 https://example.com/article/1128fb44-cd86-805e-8590-e2c15c2e7525 https://example.com/article/1128fb44-cd86-805e-8590-e2c15c2e7525 555 我是h1

我是h2

我是h3

• 我是-

• 我是-

1. 我是1.

1. 我是2.

我是链接 测试 (xiao-feishu.top)

我有特别的颜色

我也有

//我是代码

我也是一种代码 但是后面不是

我是引用

我上面是分隔线

表格

<!--显示-->
<p>我是html代码渲染而来的</p>
]]> Fri, 29 Nov 2024 12:21:00 GMT