白熊の小窝

一开始用的是 Umami Cloud 官方服务，直到我折腾出了完全免费的自托管方案，于是转身向自托管走去~♪

Important

注意，如果你正在自托管和 Umami Cloud 官方服务之间纠结，请优先考虑尝试官方服务。Umami Cloud 支持以 CSV 格式免费导出数据，但导入数据只有付费计划才支持。建议先体验一下 Umami Cloud 能否满足需求，再决定要不要自托管，以规避日后潜在的迁移成本。

先决条件#

一个 GitHub 账号
一个 Vercel 账号
（可选） 一个 PostgreSQL 数据库

如果没有数据库也没关系，这篇教程会带你免费部署一个～

部署#

1. 部署 PostgreSQL 数据库#

如果你有自己的 PostgreSQL 数据库可以跳过这一步

在这里提供两种免费方案：

使用 Neon 部署 PostgreSQL 数据库

优点：部署简单；免费额度项目之间独立计算

缺点：免费额度足够应付低频访问的小型网站，但无法满足 24/7 的连续运行需求

使用 Supabase 部署 PostgreSQL 数据库

优点：持续运行（共享 CPU）

缺点：部署需要手动修改 Umami 配置文件，需要一定动手能力；七天不活跃后会被自动暂停

点击展开对比表格

资源项目	Neon	Supabase
项目数量	最多 100 个项目	最多 2 个活跃项目
数据库大小	500 MB / 项目	500 MB / 项目
计算资源	100 CU-小时 / 项目	共享 CPU
自动扩缩容	最高 2 CU / 8 GB RAM	不支持
闲置暂停	5 分钟无活动后；自动恢复	1 周无活动后；*手动恢复*
出站流量	5 GB / 月 / 项目	总计 5 GB / 月
分支功能	每个项目 10 个分支	付费计划
备份	6 小时恢复窗口（最大 1 GB)	付费计划
日志	1 天保留期	付费计划

Warning

Neon 免费计划每个项目每月提供 100 CU-小时，按照最低消耗 0.25 CU/小时 计算，每月可用时长仅为 400 小时。由于 Neon 数据库仅在处理查询时消耗 CU 额度，闲置时自动缩减至零，故该配额足以应付低频访问的小型网站，但无法满足 24/7 的连续运行需求（每月 24×30=720 小时）。如果需要不间断的免费数据库服务，请参考 Supabase

以下为 Neon 平台部署教程：

Vercel 导航栏

点击 Create Database，选择 Neon，点击 Continue

选择 Neon 数据库

这里可能会要求同意用户协议，阅读后同意即可下一步

选择一个地区，并且禁用 Auth，下方保持默认的免费方案就好，点击 Continue

Tip

地区推荐选择 Singapore (Southeast) sin1，地理位置上距离中国大陆最近。请记住这个地区，后续部署 Umami 的时候可以选择相同/相近的地区以提高数据库响应速度。

选择地区并禁用 Auth

为你的数据库取一个好记的名字比如 Ciallo 就很好记，点击 Continue

Ciallo～(∠・ω< )⌒★

完成！ 点击 Done 以完成数据库部署

2. 在 Vercel 上部署 Umami#

Tip

Umami 官方提供了一个链接，你可以 点击这里 快速完成下方教程的 1 ~ 4 步
如果手动 Fork 官方仓库后导入，则可以在 GitHub 网页端快速同步主仓库 commit（缺点是无法把仓库设置为 Private）
连接 Supabase 数据库需要单独适配，请阅读对应的教程

以下内容参考自 Umami 官方文档：

将 https://github.com/umami-software/umami 项目 Fork 到您的 GitHub 帐户

在 Vercel 上创建一个帐户

在仪表板页面上点击“导入项目”，然后指定您在 GitHub 上 Fork 的项目 URL

将所需的 DATABASE_URL 环境变量添加到您的 Vercel 项目中。这些值在安装步骤的“配置 Umami”中定义

部署

Note

你需要为 Umami 使用 POSTGRES_PRISMA_URL，其形式为 postgres://user:passwd@endpoint-pooler.postgres.vercel-storage.com/verceldb?pgbouncer=true&connect_timeout=10
用于数据库 URL 的环境变量可以在 db/postgresql/prisma.schema 文件中更改
官方文档中提到的“Vercel Postgres”服务已停运，不再可用

回到 Vercel 仪表盘，前往 Storage → <你的数据库名>，找到 POSTGRES_PRISMA_URL 并复制等号右边的值（注意是包含**PRISMA**的变量，记得在右边点开Show secret显示明文）
打开你的 Umami 项目，在 Settings → Environment Variables → Add Environment Variable 填入环境变量，Key 填写 DATABASE_URL，Value 粘贴 你刚刚复制的值，按 Save 保存

Tip

POSTGRES_PRISMA_URL 的形式为 postgresql://user:password@ep-*****-******-*******-pooler.ap-ciallo-1.aws.neon.tech/neondb?connect_timeout=15&sslmode=require （你直接复制粘贴我这个是没用的喵=w=）

配置环境变量

保存后 Vercel 会弹窗提示你重新部署，在弹出的窗口中点击 Redeploy 确认即可

右下角的蓝色弹窗，点击 Redeplay

在新窗口中点击 Redeplay 确认部署

3. （可选）配置自定义域名#

Important

Vercel 会为每个项目默认分配一个形如 <project-name>.vercel.app 的域名，但该域名在中国大陆地区无法访问，因此强烈建议添加一个你自费购买的域名来提供服务

回到你的 Umami 项目页面，在左边导航栏点击 Domains（如果遇到 404 尝试刷新一下页面），然后点击右上角的 Add Domain 。在弹出的窗口中填入你的域名并确认，根据你的 DNS 提供商的说明设置 CNAME

如果你的域名使用 Cloudflare 管理 DNS，Vercel 会提供一个选项跳转到 Cloudflare 快速设置 DNS

配置自定义域名

添加好后可以直接点击默认域名旁边的 Edit → Remove 移除默认域名这个，不需要了

如果你希望新添加一个以 .vercel.app 结尾的自定义子域名，直接在 Add Existing 输入完整的子域名即可

4. 登录 Umami#

Caution

请务必在登录后更改默认账户密码！

回到你的 Umami 项目页面（Overview），在右侧找到 Domains，点开下方你添加的域名（或者 Vercel 分配给你的默认域名），进入 Umami 登录页面
使用默认管理员账户登录
- 默认用户名：admin
- 默认密码：umami

Umami 登录页面

登录后点击侧边导航下拉菜单，然后点击设置

下拉菜单

导航到个人资料并点击更改密码按钮

更改密码

输入新密码并保存

Tip

页面左下角可以切换语言
点击侧边导航下拉菜单，然后点击管理员可以修改默认用户名

5. 添加你的第一个网站#

在网站页面点击右上角添加网站，在弹出的窗口中输入网站名和域名（域名不需要添加 https:// 协议头）并保存
打开你添加的网站页面，点击右上角编辑，复制页面中的跟踪代码
在你自己网站的 <head> 部分插入跟踪代码并更新网站
大功告成！ 试着访问一下你的网站吧，数据应该会立即出现在你的 Umami 控制面板里面！

Umami 控制面板示例图

DLC 1：提高数据库响应速度：自定义 Vercel 函数运行位置#

还记得前面部署数据库时选择的地区吗？你可以修改 Vercel 运行 Umami 的地区，降低 Umami 访问数据库的延迟，提高响应速度

在 Vercel 控制台中打开你的 Umami 项目页面
点击左侧导航栏下方的 Settings → Functions
在** Function Region **中选择函数运行地区，建议与数据库所在地区保持一致（如 Asia Pacific → Singapore (Southeast) - ap-southeast-1 - sin1）

Function Region

DLC 2：通过 Vercel 代理 Umami Analytics#

该部分内容参考自 Umami 官方文档

如果你的网站也部署在 Vercel 上，你可以使用 Vercel 的重写功能代理 Umami Analytics，以便从你网站的域名提供 Umami Analytics 服务。这在使用 Umami Cloud 时对于绕过广告拦截器也很有帮助

在你网站项目的根目录中，添加 vercel.json 文件，内容如下：

1
{
2
  "rewrites": [
3
    {
4
      "source": "/stats/:match*",
5
      "destination": "https://cloud.umami.is/:match*"
6
    }
7
  ]
8
}

自托管 Umami 请注意替换其中的 https://cloud.umami.is 部分为你的自托管 Umami 实例的 URL

跟踪代码脚本标签应使用 /stats/script.js 作为 src 值：

1
<script
2
  defer
3
  src="/stats/script.js"
4
  data-website-id="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
5
></script>

DLC 3：共享链接#

想要展示你的网站访问数据给访客看吗？可以在 Umami 控制面板的设置里开启共享链接

启用共享链接

截至目前（v3.0.3）自部署 Umami 的分享链接只能分享 Overview 页面的数据（Umami Cloud 可以自定义分享范围）

效果展示

参考文献#

Footnotes#

可关闭，但对可收集的数据有一定影响 ↩

利用 CF Workers 解决 GitHub Actions 不按时触发问题

Wed, 04 Mar 2026 00:00:00 GMT

问题描述#

“注意：schedule 事件在 GitHub Actions 工作流运行期间负载过高时可能会延迟。高负载时间包括每小时的开始时间。 如果负载足够高，可能会删除一些排队作业。 为了降低延迟的可能性，将您的工作流程安排在不同时间运行。”
来源：GitHub Actions 文档

本站采用 Upptime 来监控站点服务状态，它基于 GitHub Actions 的 schedule 事件定时触发，其中 Uptime CI 默认配置如下：

1
name: Uptime CI
2
on:
3
  schedule:
4
    - cron: '*/5 * * * *'
5
  repository_dispatch:
6
    types: [uptime]
7
  workflow_dispatch:
8
...

触发运行的 Cron 表达式为每 5 分钟运行一次，但实际部署后发现存在高达一个小时的运行间隔（可能中间这几次全被吞了），非常不稳定。高达，哪里有高达

在 Upptime 仓库的 issue 中也有人报告这一点：Uptime CI not running every 5 minutes · upptime · Discussion #112

其中提到一种解决方法是，采用 repository_dispatch 事件，使用其他环境来运行 Cron 作业，并通过它触发 Uptime CI。

解决方案#

这里提供一种基于 Cloudflare Workers 来触发 GitHub Actions 的方案（以本站的 Upptime 为例）：

1. 创建 GitHub Personal Access Token #

建议使用 Fine-grained tokens

Repository access 仅选择对应的仓库

Permissions 仅授予 Contents 的 Read and write 权限（不需要 Actions 权限，非常反直觉）

参考：Create a repository dispatch event - GitHub 文档

生成后请记住保存好 Token

2. 创建 Cloudflare Worker#

在 Cloudflare Dashboard 创建一个新的 Worker，粘贴以下代码：

1
export default {
2
  async scheduled(event, env, ctx) {
3
    const GITHUB_TOKEN = env.GH_TOKEN // 从环境变量读取
4
    const REPO_OWNER = '你的 GitHub 用户名' // 记得修改
5
    const REPO_NAME = '你的仓库名' // 记得修改
6

7
    const url = `https://api.github.com/repos/${REPO_OWNER}/${REPO_NAME}/dispatches`
8

9
    const response = await fetch(url, {
10
      method: 'POST',
11
      headers: {
12
        Authorization: `Bearer ${GITHUB_TOKEN}`,
13
        Accept: 'application/vnd.github.v3+json',
14
        'Content-Type': 'application/json',
15
        'User-Agent': 'Cloudflare-Worker-Trigger',
16
      },
17
      body: JSON.stringify({
18
        event_type: 'cf-worker-trigger', // 对应 Action 里的类型
19
      }),
20
    })
21

22
    if (response.ok) {
23
      console.log('已成功触发 GitHub Actions')
24
    } else {
25
      console.error('触发 GitHub Actions 失败:', await response.text())
26
    }
27
  },
28
}

展开收起

别忘记修改代码中你的 GitHub 用户名和仓库名喵！

event_type 这里的 cf-worker-trigger 可以任意修改，只要和下一步对上就行

3. 配置 Worker 环境变量与定时器#

在 Worker 的设置 -> 变量和机密点击添加，类型选择 密钥，变量名称为 GH_TOKEN，值填入最开始获取的 Token
在设置 -> 触发事件点击添加，选择Cron 触发器，设置为你需要的间隔（我这里填 */5 * * * *，代表每 5 分钟触发一次）

Cloudflare 提供了可视化的 Cron 编辑菜单，这里必须好评

4. 修改 GitHub Actions 配置#

在你的 GitHub 仓库中，编辑 .github/workflows/<你的工作流文件>.yml，在 on 下面添加 repository_dispatch 事件：

1
on:
2
  schedule:
3
    - cron: '*/5 * * * *' # 原有的保留作为兜底，你也可以直接删掉
4
  repository_dispatch:
5
    types: [cf-worker-trigger] # 这里要和 Worker 里的 event_type 一致
6
...

大功告成！#

好啦！以后每次 Cloudflare Worker 触发定时任务时，GitHub Actions 就会自动运行啦！通过这种方式似乎还能绕过 GitHub Action 的定时触发间隔最低 5 分钟的限制，也许可以自己探索一下

利用 PowerToys 解决快捷键冲突

Tue, 03 Mar 2026 00:00:00 GMT

利用 PowerToys 解决快捷键冲突#

起因是尝试在 VSCode 中手动按 Ctrl+Space 唤起自动补全，结果发现没效果的同时还切换了输入法的中英文

一开始以为是 Rime 输入法又有什么神秘小众快捷键，但是检查了一下配置文件发现并没有

随后查阅资料发现，Windows 输入语言热键切换中英文的快捷键同样是 Ctrl+Space

离谱的地方在于，这个快捷键有 bug 无法关闭（截止至 Windows 11 26220.7934 仍未被修复）

改了吗，如改

咱又不太喜欢破坏咱在 VSCode 上的输入习惯

我真没招了

思来想去后突然想起 PowerToys 键盘管理器自带键盘重映射功能

最后的解决方案是，虽然把 VSCode 的快捷键改成了 Alt+/（在别家编辑器里面也是自动补全快捷键），做出了一点妥协

但是用 PowerToys 的键盘重映射，把 Ctrl+Space 重定向到了 Alt+/，并且只在 VSCode 生效

alt text

完美解决！我简直是天才.jpg

PS：虽然但是，把 Windows 输入语言热键换成别的小众快捷键也可以哦～

Firefly 主题使用指南与 Markdown 高级语法

Mon, 02 Mar 2026 00:00:00 GMT

Firefly 主题使用指南与 Markdown 高级语法#

Tip

基于 Firefly 模板自带文章示例拼接而成

参考：
Firefly 主题模板文档
 Firefly - Demo site

Firefly 简单使用指南#

这个博客模板是基于 Astro 构建的。对于本指南中未提及的内容，您可以在 Astro 文档中找到答案。

文章的 Front-matter#

1
---
2
title: 我的第一篇博客文章
3
published: 2023-09-09
4
description: 这是我新 Astro 博客的第一篇文章。
5
image: ./cover.jpg
6
tags: [前端, 开发]
7
category: 前端开发
8
draft: false
9
---

属性	描述
`title`	文章标题。
`published`	文章发布日期。
`updated`	文章更新日期。如果未设置，将默认使用发布日期。
`pinned`	是否将此文章置顶在文章列表顶部。
`description`	文章的简短描述。显示在首页上。
`image`	文章封面图片路径。 1. 以 `http://` 或 `https://` 开头：使用网络图片 2. 以 `/` 开头：`public` 目录中的图片 3. 不带任何前缀：相对于 markdown 文件的路径
`tags`	文章标签。
`category`	文章分类。
`lang`	文章语言代码（如 `zh-CN`）。仅当文章语言与站点默认语言不同时设置。
`licenseName`	文章内容的许可证名称。
`licenseUrl`	文章内容的许可证链接。
`author`	文章作者。
`sourceLink`	文章内容的来源链接或参考。
`draft`	如果这篇文章仍是草稿，则不会显示。
`comment`	是否启用此文章的评论功能。默认为 `true`。
`slug`	自定义文章 URL 路径。如果不设置，将使用文件名作为 URL。
`password`	文章密码。设置后文章内容将被 AES-256-GCM 加密，访客需输入密码才能查看。
`passwordHint`	密码提示。显示在密码输入框上方，帮助访客回忆密码，也可以不加。

文章文件的放置位置#

您的文章文件应放置在 src/content/posts/ 目录中。您也可以创建子目录来更好地组织您的文章和资源。

1
src/content/posts/
2
├── post-1.md
3
└── post-2/
4
    ├── cover.png
5
    └── index.md

自定义文章 URL (Slug)#

什么是 Slug？#

Slug 是文章 URL 路径的自定义部分。如果不设置 slug，系统将使用文件名作为 URL。

Slug 使用示例#

示例 1：使用文件名作为 URL#

1
---
2
title: 我的第一篇博客文章
3
published: 2023-09-09
4
---

文件：src/content/posts/my-first-blog-post.md

URL：/posts/my-first-blog-post

示例 2：自定义 Slug#

1
---
2
title: 我的第一篇博客文章
3
published: 2023-09-09
4
slug: hello-world
5
---

文件：src/content/posts/my-first-blog-post.md

URL：/posts/hello-world

示例 3：其他语言文件名使用Slug#

1
---
2
title: 如何使用 Firefly 博客主题
3
published: 2023-09-09
4
slug: how-to-use-firefly-blog-theme
5
---

文件：src/content/posts/如何使用Firefly博客主题.md

URL：/posts/how-to-use-firefly-blog-theme

Slug 使用建议#

使用英文和连字符：my-awesome-post 而不是 my awesome post
保持简洁：避免过长的 slug
具有描述性：让 URL 能够反映文章内容
避免特殊字符：只使用字母、数字和连字符
保持一致性：在整个博客中使用相似的命名模式

注意事项#

Slug 一旦设置并发布，建议不要随意更改，以免影响 SEO 和已存在的链接
如果多个文章使用相同的 slug，后面的文章会覆盖前面的
Slug 会自动转换为小写

Markdown 扩展功能#

GitHub 仓库卡片#

您可以添加链接到 GitHub 仓库的动态卡片，在页面加载时，仓库信息会从 GitHub API 获取。

CuteLeaf

Firefly

使用代码 ::github{repo="CuteLeaf/Firefly"} 创建 GitHub 仓库卡片。

1
::github{repo="CuteLeaf/Firefly"}

提醒框(Admonitions)配置#

Firefly 采用了 rehype-callouts 插件，支持了三种风格的提醒框主题：GitHub、Obsidian 和 VitePress。您可以在 src/config/siteConfig.ts 中进行配置：

src/config/siteConfig.ts

1
export const siteConfig: SiteConfig = {
2
  // ...
3
  rehypeCallouts: {
4
    // 选项: "github" | "obsidian" | "vitepress"
5
    theme: "github",
6
  },
7
  // ...
8
};

注意：更改配置后需要重启开发服务器才能生效。

以下是各个主题支持的类型列表，每个主题风格和语法不同，可根据喜好选择。

1. GitHub 主题风格#

这是 GitHub 官方支持的 5 种基本类型。

GitHub

基本语法

1
> [!NOTE] NOTE
2
> 突出显示用户应该考虑的信息。
3

4
> [!TIP] TIP
5
> 可选信息，帮助用户更成功。
6

7
> [!IMPORTANT] IMPORTANT
8
> 用户成功所必需的关键信息。
9

10
> [!WARNING] WARNING
11
> 关键内容，需要立即注意。
12

13
> [!CAUTION] CAUTION
14
> 行动的负面潜在后果。
15

16
> [!NOTE] 自定义标题
17
> 这是一个带有自定义标题的示例。

展开收起

2. Obsidian 主题风格#

Obsidian 风格支持非常丰富的类型和别名。

点击展开 Obsidian 语法列表

1
> [!NOTE] NOTE
2
> 通用的笔记块。
3

4
> [!ABSTRACT] ABSTRACT
5
> 文章的摘要。
6

7
> [!SUMMARY] SUMMARY
8
> 文章的总结（同 Abstract）。
9

10
> [!TLDR] TLDR
11
> 太长不看（同 Abstract）。
12

13
> [!INFO] INFO
14
> 提供额外信息。
15

16
> [!TODO] TODO
17
> 需要完成的事项。
18

19
> [!TIP] TIP
20
> 实用技巧或提示。
21

22
> [!HINT] HINT
23
> 暗示（同 Tip）。
24

25
> [!IMPORTANT] IMPORTANT
26
> 重要信息（Obsidian 风格通常使用类似的图标）。
27

28
> [!SUCCESS] SUCCESS
29
> 操作成功。
30

31
> [!CHECK] CHECK
32
> 检查通过（同 Success）。
33

34
> [!DONE] DONE
35
> 已完成（同 Success）。
36

37
> [!QUESTION] QUESTION
38
> 提出问题。
39

40
> [!HELP] HELP
41
> 寻求帮助（同 Question）。
42

43
> [!FAQ] FAQ
44
> 常见问题（同 Question）。
45

46
> [!WARNING] WARNING
47
> 警告信息。
48

49
> [!CAUTION] CAUTION
50
> 注意事项（同 Warning）。
51

52
> [!ATTENTION] ATTENTION
53
> 引起注意（同 Warning）。
54

55
> [!FAILURE] FAILURE
56
> 操作失败。
57

58
> [!FAIL] FAIL
59
> 失败（同 Failure）。
60

61
> [!MISSING] MISSING
62
> 缺失内容（同 Failure）。
63

64
> [!DANGER] DANGER
65
> 危险操作警告。
66

67
> [!ERROR] ERROR
68
> 错误信息（同 Danger）。
69

70
> [!BUG] BUG
71
> 报告软件缺陷。
72

73
> [!EXAMPLE] EXAMPLE
74
> 展示一个例子。
75

76
> [!QUOTE] QUOTE
77
> 引用一段话。
78

79
> [!CITE] CITE
80
> 引证（同 Quote）。
81

82
> [!NOTE] 自定义标题
83
> 这是一个带有自定义标题的示例。

展开收起

Obsidian

3. VitePress 主题风格#

VitePress 风格提供了一套现代化的、扁平的默认样式。目前仅包含与 GitHub 一致的 5 种 基础类型。

点击展开 VitePress 语法列表

1
> [!NOTE] NOTE
2
> 对应 GitHub 的 Note。
3

4
> [!TIP] TIP
5
> 对应 GitHub 的 Tip。
6

7
> [!IMPORTANT] IMPORTANT
8
> 对应 GitHub 的 Important。
9

10
> [!WARNING] WARNING
11
> 对应 GitHub 的 Warning。
12

13
> [!CAUTION] CAUTION
14
> 对应 GitHub 的 Caution。
15

16
> [!TIP] 自定义标题
17
> VitePress 风格同样支持自定义标题。

展开收起

VitePress

4. Docusaurus 风格语法#

仅支持语法，风格保持跟上面三个主题相同。

点击展开 Docusaurus 语法列表

支持以下类型的提醒框：note tip important warning caution

1
:::note
2
突出显示用户应该考虑的信息，即使在快速浏览时也是如此。
3
:::
4

5
:::tip
6
可选信息，帮助用户更成功。
7
:::
8

9
:::important
10
用户成功所必需的关键信息。
11
:::
12

13
:::warning
14
由于潜在风险需要用户立即注意的关键内容。
15
:::
16

17
:::caution
18
行动的负面潜在后果。
19
:::
20

21
:::tip[自定义标题]
22
可选信息，帮助用户更成功。
23
:::

展开收起

剧透#

您可以为文本添加剧透。文本也支持 Markdown 语法。

内容被隐藏了哈哈！

1
内容 :spoiler[被隐藏了 **哈哈**]！

图片画廊网格 (Image Grid)#

您可以使用 [grid] 和 [/grid] 标签将多张图片纵向并排展示。这对于展示照片画廊或对比图非常有用。系统会自动根据包裹在其中的图片数量（最多支持并排展示4张）以响应式网格进行布局。

自动补齐图片高度： 同一排中如果有高度、大小或者比例不一的图片，会像「九宫格画廊相册」一样自动撑满。较短或不协调的图片会自动使用 object-cover 进行完美中心裁剪补充视野。图片边框水平彻底对齐无缝隙，但被裁剪后，只有点击图片通过灯箱才能查看完整图片，所以建议尽量避免使用长宽比例不一致的图片在同一排中。

图注恒定底端对齐： 不论上面的图片长宽如何变化，在同一行的所有图像解释文字（图注）都会对标到一条完美的水平基线上了。

示例图片一

示例图片二

示例图片三

基本语法

1
[grid]
2
![示例图片一](./images/cover.avif)
3
![示例图片二](./images/cover.avif)
4
![示例图片三](./images/cover.avif)
5
[/grid]

Firefly 代码块示例#

在这里，我们将探索如何使用 Expressive Code 展示代码块。提供的示例基于官方文档，您可以参考以获取更多详细信息。

表达性代码#

语法高亮#

语法高亮

常规语法高亮#

1
console.log('此代码有语法高亮!')

渲染 ANSI 转义序列#

Terminal window展开收起

1
Standard ANSI colors:
2
- Dimmed:      Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
3
- Foreground:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
4
- Background:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
5
- Reversed:    Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
6

7
8-bit colors (showing colors 160-171 as an example):
8
- Dimmed:      160  161  162  163  164  165  166  167  168  169  170  171 
9
- Foreground:  160  161  162  163  164  165  166  167  168  169  170  171 
10
- Background:  160  161  162  163  164  165  166  167  168  169  170  171 
11
- Reversed:    160  161  162  163  164  165  166  167  168  169  170  171 
12

13
24-bit colors (full RGB):
14
- Dimmed:      ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
15
- Foreground:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
16
- Background:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
17
- Reversed:    ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
18

19
Font styles:
20
- Default
21
- Bold
22
- Dimmed
23
- Italic
24
- Underline
25
- Reversed
26
- Strikethrough

展开收起

编辑器和终端框架#

编辑器和终端框架

代码编辑器框架#

my-test-file.js

1
console.log('标题属性示例')

src/content/index.html

1
<div>文件名注释示例</div>

终端框架#

Terminal window

1
echo "此终端框架没有标题"

PowerShell 终端示例

1
Write-Output "这个有标题!"

覆盖框架类型#

1
echo "看，没有框架!"

PowerShell Profile.ps1

1
# 如果不覆盖，这将是一个终端框架
2
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3
New-Alias tail Watch-Tail

文本和行标记#

文本和行标记

标记整行和行范围#

1
// 第1行 - 通过行号定位
2
// 第2行
3
// 第3行
4
// 第4行 - 通过行号定位
5
// 第5行
6
// 第6行
7
// 第7行 - 通过范围 "7-8" 定位
8
// 第8行 - 通过范围 "7-8" 定位

选择行标记类型 (mark, ins, del)#

line-markers.js

1
function demo() {
2
  console.log('此行标记为已删除')
3
  // 此行和下一行标记为已插入
4
  console.log('这是第二个插入行')
5

6
  return '此行使用中性默认标记类型'
7
}

为行标记添加标签#

labeled-line-markers.jsx

1
<button
2
  role="button"
3
  {...props}
4
  value={value}
5
  className={buttonClassName}
6
  disabled={disabled}
7
  active={active}
8
>
9
  {children &&
10
    !active &&
11
    (typeof children === 'string' ? <span>{children}</span> : children)}
12
</button>

在单独行上添加长标签#

labeled-line-markers.jsx展开收起

1
<button
2
  role="button"
3
  {...props}
4

5
  value={value}
6
  className={buttonClassName}
7

8
  disabled={disabled}
9
  active={active}
10
>
11

12
  {children &&
13
    !active &&
14
    (typeof children === 'string' ? <span>{children}</span> : children)}
15
</button>

展开收起

使用类似 diff 的语法#

1
此行将标记为已插入
2
此行将标记为已删除
3
这是常规行

1
--- a/README.md
2
+++ b/README.md
3
@@ -1,3 +1,4 @@
4
+this is an actual diff file
5
-all contents will remain unmodified
6
 no whitespace will be removed either

结合语法高亮和类似 diff 的语法#

1
function thisIsJavaScript() {
2
  // 整个块都会以 JavaScript 高亮显示，
3
  // 并且我们仍然可以为其添加 diff 标记！
4
  console.log('要删除的旧代码')
5
  console.log('新的闪亮代码！')
6
}

标记行内的单独文本#

1
function demo() {
2
  // 标记行内的任何给定文本
3
  return '支持给定文本的多个匹配项';
4
}

正则表达式#

1
console.log('单词 yes 和 yep 将被标记。')

转义正斜杠#

Terminal window

1
echo "Test" > /home/test.txt

选择内联标记类型 (mark, ins, del)#

1
function demo() {
2
  console.log('这些是插入和删除的标记类型');
3
  // return 语句使用默认标记类型
4
  return true;
5
}

自动换行#

自动换行

为每个块配置自动换行#

1
// 启用换行的示例
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
4
}

1
// wrap=false 的示例
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
4
}

配置换行的缩进#

1
// preserveIndent 示例（默认启用）
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
4
}

1
// preserveIndent=false 的示例
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
4
}

可折叠部分#

可折叠部分


5 collapsed lines
1
// 所有这些样板设置代码将被折叠
2
import { someBoilerplateEngine } from '@example/some-boilerplate'
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate())
6

7
// 这部分代码默认可见
8
engine.doSomething(1, 2, 3, calcFn)
9

10
function calcFn() {
11
  // 您可以有多个折叠部分
3 collapsed lines
12
  const a = 1
13
  const b = 2
14
  const c = a + b
15

16
  // 这将保持可见
17
  console.log(`计算结果: ${a} + ${b} = ${c}`)
18
  return c
19
}
20

4 collapsed lines
21
// 直到块末尾的所有代码将再次被折叠
22
engine.closeConnection()
23
engine.freeMemory()
24
engine.shutdown({ reason: '示例样板代码结束' })

展开收起

行号#

行号

为每个块显示行号#

1
// 此代码块将显示行号
2
console.log('来自第2行的问候!')
3
console.log('我在第3行')

// 此块禁用行号
console.log('你好?')
console.log('抱歉，你知道我在第几行吗?')

更改起始行号#

5
console.log('来自第5行的问候!')
6
console.log('我在第6行')

Markdown 中 Mermaid 图表完整指南#

本文演示如何在 Markdown 文档中使用 Mermaid 创建各种复杂图表，包括流程图、时序图、甘特图、类图和状态图。

流程图示例#

流程图非常适合表示流程或算法步骤。

graph TD A[开始] --> B{条件检查} B -->|是| C[处理步骤 1] B -->|否| D[处理步骤 2] C --> E[子过程] D --> E subgraph E [子过程详情] E1[子步骤 1] --> E2[子步骤 2] E2 --> E3[子步骤 3] end E --> F{另一个决策} F -->|选项 1| G[结果 1] F -->|选项 2| H[结果 2] F -->|选项 3| I[结果 3] G --> J[结束] H --> J I --> J

时序图示例#

时序图显示对象之间随时间的交互。

sequenceDiagram participant User as 用户 participant WebApp as 网页应用 participant Server as 服务器 participant Database as 数据库 User->>WebApp: 提交登录请求 WebApp->>Server: 发送认证请求 Server->>Database: 查询用户凭据 Database-->>Server: 返回用户数据 Server-->>WebApp: 返回认证结果 alt 认证成功 WebApp->>User: 显示欢迎页面 WebApp->>Server: 请求用户数据 Server->>Database: 获取用户偏好 Database-->>Server: 返回偏好设置 Server-->>WebApp: 返回用户数据 WebApp->>User: 加载个性化界面 else 认证失败 WebApp->>User: 显示错误消息 WebApp->>User: 提示重新输入 end

甘特图示例#

甘特图非常适合显示项目进度和时间线。

gantt title 网站开发项目时间线 dateFormat YYYY-MM-DD axisFormat %m/%d section 设计阶段需求分析 :a1, 2023-10-01, 7d UI设计 :a2, after a1, 10d 原型创建 :a3, after a2, 5d section 开发阶段前端开发 :b1, 2023-10-20, 15d 后端开发 :b2, after a2, 18d 数据库设计 :b3, after a1, 12d section 测试阶段单元测试 :c1, after b1, 8d 集成测试 :c2, after b2, 10d 用户验收测试 :c3, after c2, 7d section 部署生产环境部署 :d1, after c3, 3d 发布 :milestone, after d1, 0d

类图示例#

类图显示系统的静态结构，包括类、属性、方法及其关系。

classDiagram class User { +String username +String password +String email +Boolean active +login() +logout() +updateProfile() } class Article { +String title +String content +Date publishDate +Boolean published +publish() +edit() +delete() } class Comment { +String content +Date commentDate +addComment() +deleteComment() } class Category { +String name +String description +addArticle() +removeArticle() } User "1" -- "*" Article : 写作 User "1" -- "*" Comment : 发表 Article "1" -- "*" Comment : 拥有 Article "1" -- "*" Category : 属于

状态图示例#

状态图显示对象在其生命周期中经历的状态序列。

stateDiagram-v2 [*] --> 草稿草稿 --> 审核中 : 提交审核中 --> 草稿 : 拒绝审核中 --> 已批准 : 批准已批准 --> 已发布 : 发布已发布 --> 已归档 : 归档已发布 --> 草稿 : 撤回 state 已发布 { [*] --> 活跃活跃 --> 隐藏 : 临时隐藏隐藏 --> 活跃 : 恢复活跃 --> [*] 隐藏 --> [*] } 已归档 --> [*]

饼图示例#

饼图非常适合显示比例和百分比数据。

pie title 网站流量来源分析 "搜索引擎" : 45.6 "直接访问" : 30.1 "社交媒体" : 15.3 "推荐链接" : 6.4 "其他来源" : 2.6

总结#

Mermaid 是在 Markdown 文档中创建各种类型图表的强大工具。本文演示了如何使用流程图、时序图、甘特图、类图、状态图和饼图。这些图表可以帮助您更清晰地表达复杂的概念、流程和数据结构。

要使用 Mermaid，只需在代码块中指定 mermaid 语言，并使用简洁的文本语法描述图表。Mermaid 会自动将这些描述转换为美观的可视化图表。

尝试在您的下一篇技术博客文章或项目文档中使用 Mermaid 图表 - 它们将使您的内容更加专业且更易理解！

Markdown 中 PlantUML 图表指南#

PlantUML 是一种使用纯文本描述图表的工具。你只需要写一段结构化语法，就可以生成时序图、类图、用例图、活动图等常见工程图。

它特别适合写在技术博客和项目文档里：

图表和正文一起版本管理，便于协作与审阅
修改图只需要改文本，适合频繁迭代
能和 Markdown 无缝结合，保持文档统一

在 Firefly 中，plantuml 代码块会在构建阶段编码并生成服务器 SVG 地址，页面端再根据亮暗主题自动切换图源，并支持缩放、拖拽和全屏交互。

如果你想快速上手，可以记住这个最小模板：

活动图示例#

状态图示例#

用例图示例#

组件图示例#

部署图示例#

ER 图示例#

时序图示例（登录与刷新令牌）#

C4 风格容器图示例#

站点技术栈 / Website Tech Stack

Sun, 01 Mar 2026 00:00:00 GMT

框架： Astro
主题： Firefly（基于 Fuwari）
部署： Vercel
评论系统： Twikoo
- 云函数部署： Vercel
- 后端数据库： MongoDB Atlas
- 人机验证： Cloudflare Turnstile
网站访问统计： Umami（自托管）
服务状态监测： Upptime
图标库：

Search Relay - 快速在不同搜索引擎之间跳转/比对搜索结果

Sun, 01 Feb 2026 00:00:00 GMT

AI 辅助生成声明

本项目使用 AI 生成，已经过人工审查项目可用性。 IIIA指数：4

Search-Relay

Search Relay#

一个简单的浏览器扩展，快速在不同搜索引擎之间跳转/比对搜索结果

支持一键提取关键词切换搜索引擎、划词搜索、右键菜单搜索

已上架：Chrome Web Store | Edge Add-ons | Firefox Add-ons

功能 Features#

一键切换搜索引擎#

在某个搜索引擎中，若对搜索结果不满意，点击扩展图标，使用选定的搜索引擎一键重新搜索

Search Relay 会自动提取当前搜索结果页的搜索关键词

示例

也可以右键扩展图标，选择希望使用的搜索引擎

划词搜索#

选中页面上的文字，通过右键菜单选项快速选择搜索引擎进行搜索；也可划词后点击扩展图标搜索关键词

示例

安装 Installation#

商店下载#

Chrome Web Store: 点此获取
Edge Add-ons: 点此获取
Firefox Add-ons: 点此获取

手动安装 (开发者模式)#

下载本项目源码或 Release 包，并解压
打开浏览器扩展管理页：chrome://extensions/ 或 edge://extensions/
打开右上角的“开发者模式”
点击“加载已解压的扩展程序”，选择解压目录

构建&测试 Build & Test#

参见：构建&测试文档

隐私声明 Policy#

本扩展不收集任何用户数据。Search Relay 仅利用浏览器本地存储保存您的设置和搜索引擎数据，不会传输或收集任何私人浏览信息。

开源许可证 License#

GNU General Public License v3.0

我们希望通过 GPLv3 许可证，确保 Search Relay 及其衍生作品始终保持开源，以更好地保护用户隐私。

本项目使用了 Icons8 提供的图标资源。
assets/design/Search-Relay.af 及其设计稿版权归本项目作者 @白隐Hakuin 所有。
本仓库中使用的商店徽章（Badges）及其设计稿的版权归其各自所有者所有。

另请参阅各大扩展商店的推广指南：

开发者中心: Chrome | Edge | FireFox

新华三 H3C NX30Pro 路由器配置文件解密思路

Sun, 28 Dec 2025 00:00:00 GMT

AI 辅助生成声明

本文章在写作过程中使用 AI 辅助润色文本，文中思路完全由人类构建，并经过人类测试完成。AI 仅参与优化文章表达部分，且已经过人类审查，未对内容准确性产生任何影响。 IIIA指数：2（本段声明由人类撰写）

从 Web 后台获取配置文件，得到NX30Pro.cfg
用 HEX 工具打开文件得到前十六个字节：

1
4a de 5d 55 55 55 55 55 57 56 b9 23 32 01 06 08

由连续的55可推测 XOR 加密 Key 为55（Hex）

使用 CyberChef 对配置文件 XOR 解密，Key = 55 (Hex)，得到一个.tar.gz压缩包（命名为cfg_dec.tar.gz）
解压cfg_dec.tar.gz，得到如下目录结构：

1
cfg_dec.tar.gz
2
├─ NX30Pro.info
3
└─ NX30Pro.tar.gz

其中NX30Pro.info为文本文件，内容如下：

1
NX30ProV100R010
2
cca8850b....

cca8850b....字段为NX30Pro.tar.gz压缩包的 MD5 值

对于NX30Pro.tar.gz，查询得知其符合 OpenWrt UCI 配置文件结构，目录如下：

1
NX30Pro.tar.gz
2
└─mnt
3
    └─config
4
        │  arptable
5
        │  calendar
6
        │  config_check
7
        │  ddns
8
        │  dhcp
9
        │  ......
10
        │  ybb
11
        │
12
        ├─cfgmd5
13
        │      arptable-7f62......
14
        │      calendar-3772......
15
        │      ddns-ea360f69......
16
        │      dhcp-4c447493......
17
        │      ......
18
        │      ybb-99f5ad57a1b4ebd13de608227c6dbcfb
19
        │
20
        └─lost+found

展开收起

其中：

arptable等为配置文件
cfgmd5目录下为对应配置文件的 MD5 值文件，格式为文件名-MD5 值，内容为空

按需修改配置文件
重新计算mnt/config目录下对应配置文件的 MD5 值，更新cfgmd5目录下对应文件名的 MD5 值
将修改后的mnt目录重新打包为NX30Pro.tar.gz
计算新的NX30Pro.tar.gz的 MD5 值，更新NX30Pro.info文件中的 MD5 字段
将NX30Pro.info和新的NX30Pro.tar.gz重新打包为cfg_mod.tar.gz
使用 CyberChef 对cfg_mod.tar.gz进行 XOR 加密，Key = 55 (Hex)，生成新的配置文件NX30Pro_mod.cfg
将NX30Pro_mod.cfg上传至 Web 后台，验证配置文件有效性成功🎉

参考工具#

参考资料#

已满 16 岁未满 18 岁的两次银行开卡记录

Fri, 29 Aug 2025 00:00:00 GMT

记录一下白熊已满 16 岁未满 18 岁时办理的两张银行卡的历程～

Note

本文最初撰写于 2025 年 8 月 29 日，部分内容可能已过时，仅反应当时当地情况，请以银行实际情况为准

明日方舟x招商银行联名储蓄卡#

开卡日期：2025年8月29日

卡面展示

白熊住的十八线小城市没有招行网点，为了去看小黑2大电影点映去了趟郑州，本来想在郑州把卡办了但是郑州分行碰巧装修暂停营业，支行网点小没有卡面库存，想要网上申请又要等上十天左右，再专程跑来网点激活就有点不划算了…

于是在打了几个网点电话询问卡面库存之后，坐了来回六个小时的地铁去了隔壁的许昌市分行（是的我们郑州到许昌有城际地铁哦）

招行的业务员态度真的很友好！唯一真神！虽然白熊自己是社恐导致全程腿抖（

这张卡虽然在招商银行 APP 中需要预约取卡，但是其实不一定要网申，考虑到如果网申的话之后来网点取卡就要再跑一趟，所以提前和市分行打了电话，了解到他们那边还有少量卡面库存，可以办一张普通卡之后直接换卡面（免手续费），说明提前和网点沟通还是很重要的！

最后还是成功拿到了！好耶！

招行卡面正面实拍

招行卡面背面实拍

业务员说由于是未成年所以只给开二类卡，限额 5000，不过目前对咱来说已经满足需求了

手机银行正常可用~

顺带贴一下这张卡的收费情况：

Note

明日方舟联名卡收费

明日方舟联名借记卡没有年费，其他收费规定如下
①工本费：免费；
②账户管理费优惠：收费和M+卡一样；
③跨行取款手续费：每月前2笔免费。

一卡通M+卡账户管理费

M+卡没有年费，自2025年4月1日起也免收账户管理费。

明日方舟联名卡-收费规则

虽然白熊的常驻地没有网点 / ATM，但是用途基本是互联网支付（加上家里同意帮咱把现金存到他们的卡里再转账给咱）所以这点问题不大，也可以再办一张其他银行的卡来解决这个问题

说起来作为五年铁血（划掉）舟p，对这张阿米娅卡早已心心念念，正好有事情要去省会所以顺便办了！兔兔可爱捏~

五年…你知道这五年咱怎么过的吗！.png

卡面有黑色白色两款，感觉白款更好看所以选的白款，正面背景还有纹路效果，咱们海猫真的有品（实际观感比照片好很多）

卡面展示

横版卡面展示，但实际上并没有发行这张卡面，这张图是从云闪付里面抓出来的

卡面展示

广发运通Lucky借记卡#

开卡日期：2025年3月31日

是的这张卡比招行卡办理的早但是因为体验很差所以放后面了

卡面展示

和前文那张招行卡比起来，广发这张 Lucky 卡的开卡体验就不是很 Lucky 了…

网申倒是很顺利，正常邮寄到家，但是开卡时网点那边态度不算很好，并且非柜面支付限额 1 元……呃…评价为貔貅

当时还被一个“懒政怠政”的业务员直说还不如不办

不过微信支付宝倒是可以正常绑定，没什么限制

而且再怎么说也是张运通卡，用来白嫖一些海外的平台服务，比如 Cloudflare 的 R2 存储之类的也没什么问题（这才是咱办这张卡的主要意图嘿嘿），当然需要验资的就不行了，不过跨境交易这方面的需求还是考虑成年之后办 Visa 或者 MasterCard 卡吧 xwx

总之希望能帮助到有需要的人喵！

参考资料#

白熊的 A→Z 歌单（2025）

Mon, 18 Aug 2025 00:00:00 GMT

来自 2026 年的追加提示

本篇歌单分享源于群友说要咱从自己的歌单里根据 A 到 Z 的首字母顺序各推一首歌给对方

歌单整理时间为 2025 年 8 月 18 日，仅代表当时的听歌偏好，并带有一定分享属性，与白熊现今审美可能存在时差，不代表白熊现在的品味，敬请留意。

白熊的 A→Z 歌单（2025）#

Tip

前排提示：部分曲目实在难以区分高低，所以在艰难选出一首最喜欢的曲目的同时将剩下的放在下面做推荐喵

A#

Aviator - Nightmargin

出自 OneShot OST

B#

Battleplan Extinguished Sins - 塞壬唱片-MSR

净罪作战主题曲

塞壬唱片官网

同样很好听：

别让我担心 - ChiliChill 哔哩哔哩

Battleplan Pyrolysis （浊燃作战主题曲）哔哩哔哩

C#

Cytus2 Title Mix - Cytus II

D#

多分、風。 - サカナクション

猜你在找：多分、強風。

E#

Epilogue - 塞壬唱片-MSR/SHIKI

F#

Fly, My Wings - Mili

遗憾落选但是也很喜欢：

Frequency - STARSET 哔哩哔哩

Fading Sky - 塞壬唱片-MSR/遠山明孝网易云

G#

怪獣 - サカナクション

毫无悬念说是

小众哥的私货 (?)：

哥。- 天使盐哔哩哔哩 | 网易云这首歌的破碎感很戳咱

H#

Hopes And Dreams （希望与梦想） - Toby Fox

网易云

I#

Immutable - 塞壬唱片-MSR

在这首和 PV3 纠结了一下，最后还是选择了凯尔希的 EP

一位 up 主做的 Mix：Immutable×走过慢慢时空

J#

吉他与孤独与蓝色星球 - 结束乐队

呜呜呜浸春芜和惊蛰时这两首也很喜欢 qwq

K#

サイエンス (feat. 重音テト) （科学） - MIMI/重音テト

还是好喜欢：

枯枰竞 - 塞壬唱片-MSR/Return to Sender 网易云
空白とカタルシス（空白与宣泄） - GBC 哔哩哔哩

L#

Lynchpin - The Star Killers

PV4 解谜的一份意外发现，歌名和解谜关键词重合，虽然和解谜本身没什么关系但是很好听

M#

命に嫌われている - まふまふ

听腻了吗？来掺点冰冰！

Mystic Light Quest 饮冰室

N#

一阵古老的旋律响起……

虽然但是咱感觉真的很好听，真的（）

O#

Operation Pine Soot - 塞壬唱片

白熊的核风歌曲初体验（）

其实这个地方想把历代危机合约都放上来（bushi
毕竟都是 Operation XXX（某某行动）开头嘛… 选了一些尤其喜欢的放在这里

Operation Blade（利刃行动）塞壬唱片官网
Operation Dawnseeker（寻昼行动）塞壬唱片官网
Operation Pyrite（黄铁行动）塞壬唱片官网

还有合约之外的…

One Last Kiss 哔哩哔哩

P#

Protocol - 塞壬唱片-MSR/Erik Castro

卫戍协议主界面 BGM，第一遍听真把自己听高潮了（

Q#

群青 - YOASOBI

还是会被结尾的大合唱和这部 MV 的画面感动到…

优先级第二：

强风大背头哔哩哔哩以及在这里我要再发一遍这个.mp4

R#

Running In The Dark （手游《明日方舟》印象曲） - MONKEY MAJIK/塞壬唱片-MSR

哔哩哔哩 | 官方 PV（老舍利跳舞） | 网易云

S#

Somniomancer [null set] - 塞壬唱片 MSR

塞壬唱片 | 哔哩哔哩

Satellite - STARSET

虽然这首歌已经被咱推了无数遍了，但是不妨来听听看这个版本

群英荟萃，喜欢的歌有好多完全选不出来啊啊啊啊啊 qwq

See you soon（我们明日见）哔哩哔哩
Settle Into Ash（赫德雷 EP）哔哩哔哩
蛇 (TV 动画《地。-关于地球的运动-》片尾曲 2) 哔哩哔哩 | 网易云

T#

Tower Fierce - 塞壬唱片-MSR/椎名豪

怒号光明 PV 曲，放到现在也依然是心中方舟 BGM 的第一梯队

很戳咱的一首！

tsuki no koibumi - Laura Shigihara/C418

哔哩哔哩 | 网易云

U#

Untitled world - ReoNa

我永远喜欢明日方舟！！！

2025 音律联觉空降

V#

Viva La Vida - Coldplay

哔哩哔哩原版 | Eval Neuro 翻唱

W#

我不曾忘记 - ChiliChill

X#

新宝岛 - sakanaction（サカナクション）

完全没有争议呢（

Y#

永恒呼吸 - 塞壬唱片-MSR/YU

呜呜呜呜呜呜呜呜呜呜 qwq

塞壬唱片官网 | 网易云

Z#

走过漫漫时空 - 塞壬唱片-MSR/Robert Wolf

[AI 生成] WebMonitor - 借助 GitHub Action 实现静态网页源代码变动监测&快照保存

Fri, 11 Jul 2025 00:00:00 GMT

Caution

本项目使用 AI 自动生成，不保证其准确性或可用性。请在使用前自行验证其功能。

WebMonitor

WebMonitor#

Made by Gemini & 白隐Hakuin

一个基于 GitHub Actions 的全自动工具，用于监控一个或多个静态网页的源代码变化。当变化发生时，它会自动保存快照、生成差异报告，并通过 Commit、Webhook 和邮件等多种方式发送通知

✨ 核心功能#

定时执行：默认配置为每 6 小时自动运行一次，无需人工干预。支持自定义执行计划（Cron 表达式）。
多目标监控：通过简洁的 config.yml 配置文件，可同时监控：
- 网页 URL：抓取其完整的 HTML 源码。
- API 端点：通过执行自定义 curl 命令获取响应（支持 GET、POST、自定义请求头等复杂场景）。
高效变更检测：使用哈希值比对内容，仅在检测到实质性差异时触发后续操作（快照保存、通知），减少冗余处理。
统一快照管理：所有监控目标的快照均按目标 URL（或配置的 name）命名并存储于 snapshots 目录下，历史记录清晰可查。
多通道通知：
- GitHub Commits：每次检测到变更均生成带时间戳的提交记录，永久存档于仓库。
- Webhook：
  - 支持向多个 Webhook 地址推送通知。
  - 支持完全自定义推送内容的 JSON 格式，便于集成飞书、钉钉、企业微信等平台。
- 邮件通知：
  - 支持向多个收件人发送邮件（为每位收件人单独发送）。
  - 提供灵活的收件人管理方式。
  - 采用简洁的 HTML 邮件格式呈现通知内容。
详细通知内容：
- 包含具体的变更内容摘要 (diff)。
- 提供指向 GitHub 仓库的链接，方便查看完整快照和差异文件。
- 若配置了 name，通知中会同时显示名称和 URL 作为标识。

📂 项目结构#

1
.
2
├── .github/
3
│   └── workflows/
4
│       └── monitor.yml       # GitHub Actions 工作流配置文件
5
├── snapshots/                # 存储网页/API 快照及历史记录（自动生成）
6
├── monitor.py                # 监控任务执行脚本 (Python)
7
├── config.yml                # 监控目标配置文件
8
└── README.md                 # 本说明文档

🚀 快速开始#

创建 GitHub 仓库
- 建议创建 私有 (Private) 仓库 以保护监控历史和配置隐私。
上传项目文件
- 将 monitor.py, config.yml 和 .github/workflows/monitor.yml 文件上传到您的仓库。

配置监控目标 (config.yml)

编辑 config.yml 文件，添加监控目标。name 字段可选，用于备注。

1
# 全局配置 (可选)
2
settings:
3
  email_delay_milliseconds: 1000 # 邮件发送间隔（毫秒），避免频率限制
4

5
# 监控目标列表
6
targets:
7
  - name: 'GitHub 状态页' # 目标备注 (可选)
8
    type: 'url'
9
    value: 'https://www.githubstatus.com/'
10

11
  - type: 'url' # 无备注，使用 URL 标识
12
    value: 'https://www.v2ex.com'
13

14
  - name: '复杂的 POST 请求示例'
15
    type: 'curl'
16
    command: | # 推荐使用 YAML 块样式处理复杂命令
17
      curl -s -X POST https://httpbin.org/post \
18
        -H 'Content-Type: application/json' \
19
        -H 'Referer: https://www.example.com/some-page' \
20
        -d '{"id": 123, "name": "test"}'

展开收起

配置通知渠道 (GitHub Secrets & Variables)
- 在 GitHub 仓库页面，导航至 Settings > Secrets and variables > Actions。
- A. 配置 Secrets (敏感信息)
  - 点击 Secrets 标签页 > New repository secret。
  - 添加：
    - SMTP_PASSWORD: 发件邮箱密码或应用授权码 (必需)。
    - WEBHOOK_URL: Webhook 接收地址 (多个地址用英文逗号 , 分隔)。
- B. 配置 Variables (常规配置)
  - 点击 Variables 标签页 > New repository variable。
  - 添加：
    - MAIL_RECIPIENTS: 邮件接收人列表 (多个地址用英文逗号 , 分隔)。
    - MAIL_FROM: 发件邮箱地址。
    - MAIL_SENDER_NAME: (可选) 发件人显示名称 (e.g., 监控机器人)。
    - SMTP_HOST: SMTP 服务器地址 (e.g., smtp.qq.com)。
    - SMTP_PORT: SMTP 服务器端口 (e.g., 465, 587)。
    - SMTP_USER: 发件邮箱用户名 (通常与 MAIL_FROM 相同)。
    - WEBHOOK_CUSTOM_PAYLOAD: (可选) 自定义 Webhook JSON 模板。

完成配置后，监控任务将按 monitor.yml 设定的计划自动运行。您也可以在仓库的 Actions 标签页手动触发一次 monitor 工作流进行测试。

⚙️ 进阶配置#

自定义执行计划
- 编辑 .github/workflows/monitor.yml 文件中的 schedule.cron 表达式。
- 默认值: '0 4,10,16,22 * * *' (UTC 时间 04:00, 10:00, 16:00, 22:00 / UTC+8 时间 12:00, 18:00, 00:00, 06:00)。
- 使用在线工具 (如 Crontab Guru) 生成所需表达式。
自定义 Webhook 载荷
- 通过设置 WEBHOOK_CUSTOM_PAYLOAD 变量，自定义发送到 Webhook 的 JSON 结构。模板中以下占位符会被替换：
  - {timestamp}: 检测到变更的时间 (YYYY-MM-DD HH:MM:SS)。
  - {changes_summary}: 本次运行检测到的所有变更的详细信息汇总。
- 示例 (企业微信 Markdown 格式):
```
1
{
2
  "msgtype": "markdown",
3
  "markdown": {
4
    "content": "## 监控提醒\n> 检测时间: <font color=\"comment\">{timestamp}</font>\n\n<font color=\"warning\">检测到以下目标发生变更:</font>\n\n{changes_summary}"
5
  }
6
}
```
- 注意：未设置此变量时，默认发送企业微信兼容的纯文本格式消息。

🔍 工作原理#

定时触发：GitHub Actions 根据 monitor.yml 中的 schedule 在指定时间启动一个 Runner (虚拟机)。
注入配置：Runner 加载配置的 Secrets 和 Variables 作为环境变量。
运行监控脚本：执行 monitor.py 脚本，解析 config.yml。
目标检测循环：脚本遍历配置的每个目标：
- 根据 type (url 或 curl) 获取目标当前内容。
- 计算内容哈希值并与历史记录比较。
变更处理与通知：
- 若检测到变更，保存新快照并生成差异报告。
- 汇总所有变更信息。
- 调用配置的 Webhook 和邮件服务发送通知。
- 设置标志表明有变更发生。
提交变更：工作流最后一步检查标志，若为真，则执行 git commit 和 git push，将 snapshots 目录下的新文件提交到仓库。

📜 查看历史记录#

提交历史 (Commits)：仓库的提交历史中以 【自动监控】 开头的记录均由本工具生成，包含时间戳。
文件快照 (Snapshots)：直接浏览仓库中的 snapshots 目录。每个目标有独立子目录，存储历次变更的快照 (*.html/*.txt) 和差异报告 (*.diff)。
工作流日志 (Actions Logs)：在仓库的 Actions 标签页，查看每次 monitor 工作流的运行日志。日志中清晰记录每个目标的检测结果 (检测到变化 或 无变化)。

《来自星尘》全流程通关初体验

Thu, 29 Feb 2024 00:00:00 GMT

27 小时《来自星尘》全流程体验大成功～发售三天内拿下 hhhh 剧情主要是来自地球的调查员雁，与薇立方（？）探索异星阿尔林铎的故事全流程通关之后大概说一下咱的看法叭：

夸夸部分#

美术水准的上限很高，UI 动效方面只能说不愧是鹰角
文案配音非常顶！不会感觉尬尬的或者出戏（是森中人老师（我三史强配音）带领团队承担配音工作哦）
角色技能效果很帅，打击感也蛮不错的
配乐蛮舒服的，音角稳定发挥
薇立方知道她很可爱！！(`ヮ )
游戏设置的配置文件和存档文件都在可正常访问的地方，手动修改清晰度之类的比较容易

开骂环节（bushi）#

没有抗锯齿！！超难受！感觉画质糊最主要的就是因为这个
建模方面一堆粗模，精度太低…有一种外包的美
场景贴图清晰度拉胯，角你是舍不得上高清贴图吗？
TAAU（游戏自带补帧）一片糊，建议别开
剧情渲染动画效果不够意思，感觉很假而且场景感不够
开始的剧情有点莫名其妙，了解世界观还要靠看文本
移动位置引导有点问题，只有方向和直线距离，不够明了
照样有防沉迷（气气）

一些碎碎念#

上面的内容是基于 v1.0.3 版本体验得到，期待后续优化
现阶段来说，除非你是冲着鹰角来的，68 这个价格真的不推荐买
目前的这个画面质量真的太拉了，感觉像是赶工一样…
官方已经发道歉信了*(:з」∠)*坐等后续优化

技术性内容#

图形设置配置文件目录：

/storage/emulated/0/Android/data/com.hypergryph.exastris/files/GraphicOptionSaveSetting

以纯文本格式打开这个文件之后，修改resolutionScale到合适的值即可调高清晰度倍率

frameRate是最大帧率，看个人情况修改～

启动页面

“雁，欢迎来到阿尔林铎。”

“吃饭是全宇宙通用的增进感情的办法。”

我就是我自己的可汗！

编队界面

这 UI 真帅吧

一则故事

BOSS 战前夕

她知道自己很可爱！

星星点点

责任书

27 小时！

ADB，启动！ - 自用的 ADB 脚本

Tue, 26 Dec 2023 00:00:00 GMT

ADB-Launcher

ADB，启动！#

自动化开启 Android 系统“无线调试”并激活多数需要 ADB 权限的应用。适用于所有版本的 Android 系统（包括 Android 10 及更低版本）

功能#

启动 Android 系统“无线调试”（监听端口 5555 上的 TCP/IP 连接）
激活 Shizuku 等需要 ADB 权限的应用
自动识别并跳过激活未安装的应用
执行完毕后提示使用技巧
支持自动故障排查并尝试修复

自动修复功能详情

未找到 ADB 工具时提醒并给出解决方案
尝试关闭正在运行的其它 ADB 进程防止冲突
检查应用激活脚本是否存在
执行遇到错误时提供疑难解答
可选忽略报错继续执行

支持激活的应用#

Tips：当连接的设备未安装目标应用时，将跳过激活。

ADB 模式#

Shizuku
Scene
冰箱
黑阈
小黑屋（麦克斯韦妖）
权限狗

更多应用陆续支持中，欢迎提交 issue 补充~

设备管理员（DeviceAdmin）#

现阶段仅利用设备管理员权限就可运作的玩机工具较少，欢迎提交 issue 补充~

设备所有者（DeviceOwner）#

注：经评估后决定不加入激活设备管理员模式功能，原因详见此处。推荐使用秋之盒实现此功能。

Dhizuku

需要借助设备所有者权限的应用数量繁多，但Android 系统设定具有设备所有者权限的应用有且仅能有一个。Dhizuku 参考 Shizuku 的设计思想，分享 DeviceOwner (设备所有者) 权限给其余应用

下载 & 使用#

转到 Releases 以获取最新版本
在更新详情下方的Assets中选择Source code(zip)
下载后解压zip格式的压缩文件
双击或右键以管理员模式运行其中的ADB，启动！- UTF-8.bat或ADB，启动！- GB2312.bat

若遇到中文乱码问题，请尝试运行文件名中带有GB2312字样的版本，或自行搜索“cmd显示中文乱码”相关解决方案

开发#

TO DO#

更精准的自动修复
（待评估）执行完毕后返回桌面（部分应用被激活后会被唤醒到前台）
idk

一些碎碎念#

请注意，本项目的宗旨为尽量减少人工干预，解放双手，所以选择一次性批量激活多个应用。若需要选择性激活部分应用，请考虑自行修改源代码实现。
Windows 批处理不支持数组或列表数据结构，所以使用条件判而断非循环，这导致代码无法复用以减小体积~~（其实是懒所以直接复制粘贴然后替换内容）~~。后续可能尝试给予优化。
未来可能将项目语言更换为 Powershell，也有可能支持图形化界面。当然前提是肝得动

Star History#

Star History Chart

参考文献#

MQGA - 自动化修补 QQ APK

Sun, 19 Feb 2023 00:00:00 GMT

MQGA