Shizuku

vnweb

思路#

WebMCP的思路，是让网页把自己能做什么注册成一个个工具，AI Agent发现之后直接调用，而不是去截图、猜按钮、模拟点击。

核心就一个东西：document.modelContext。往上面注册工具即可：

1
await document.modelContext.registerTool({
2
  name: "page-title",
3
  description: "获取当前页面标题",
4
  inputSchema: { type: "object", properties: {} },
5
  execute() {
6
    return { title: document.title };
7
  },
8
});

一个工具包含几个关键字段：

name：唯一标识，长度1~128，只能用字母数字和_ - .
description：写给AI看的自然语言说明，AI靠它决定用不用这个工具，很关键
inputSchema：JSON Schema，描述入参长什么样
execute：真正干活的函数
annotations：可选，告诉AI这工具是不是只读、有没有严重后果之类的

除了注册，还有getTools()（列出工具）和executeTool()（执行某个工具）。注册时可以传一个AbortSignal来控制注销。另外还能给<form>加toolname之类的属性做声明式注册，不过我这里用的是命令式那套。

这套规范目前还是W3C社区组的草案（Draft Community Group Report），Chrome也只是实验阶段，所以实际做的时候需要配一个polyfill兜底。

React项目里我用了两个包：

usewebmcp：把工具跟组件生命周期绑起来的Hook，卸载时自动注销
@mcp-b/webmcp-polyfill：浏览器没有原生实现时补上运行时，比如Firefox就不支持

usewebmcp有一个我比较喜欢的地方：它只用JSON Schema、不做校验，但能从schema的as const字面量推导出入参的TypeScript类型。写代码时input.keyword是什么类型一清二楚，字段写错会直接编译报错。

添加tool#

我想要的功能很明确：给一个游戏名，自动搜索、匹配、加进游戏库，顺便把封面、背景、图标、徽标都配好。

目录结构#

WebMCP的运行时是通用的，放根级lib/webmcp/；具体工具属于游戏模块，收在features/game/webmcp/：

1
lib/webmcp/                     # 通用运行时（其它模块以后也能用）
2
features/game/webmcp/
3
├── components/game-webmcp-tools.tsx   # 只注册，不渲染
4
├── hooks/use-add-game-tool.ts         # 业务逻辑
5
└── lib/
6
    ├── add-game-tool-schema.ts        # JSON Schema
7
    └── fetch-game-images.ts           # 去SGDB抓图

之所以不单独建一个features/webmcp/，是因为这个项目里feature之间是零相互引用的，而工具要调用游戏模块的搜索、入库接口，放到独立feature里反而会破坏这条约定。所以运行时上提成公共的，工具留在它所属的域内。

注册polyfill#

usewebmcp在注册的时候会立刻去读document.modelContext，它不会等你事后装好的运行时，所以polyfill一定要在工具注册前装。

我抽了一个幂等的小函数：

lib/webmcp/runtime.ts

1
import { installWebMCP } from "@mcp-b/webmcp-polyfill";
2

3
let installed = false;
4

5
export function ensureWebMcpRuntime() {
6
  if (installed || typeof window === "undefined") return; // SSR或已装过，跳过
7
  installWebMCP();
8
  installed = true;
9
}

然后在客户端组件的模块顶层就调用它，模块求值一定发生在Hook挂载之前：

1
"use client";
2

3
import { ensureWebMcpRuntime } from "@/lib/webmcp";
4
import { useAddGameTool } from "@/features/game/webmcp/hooks/use-add-game-tool";
5

6
ensureWebMcpRuntime(); // 必须在useWebMCP注册之前
7

8
export const GameWebMcpTools = () => {
9
  useAddGameTool();
10
  return null;
11
};

定义tool#

features/game/webmcp/lib/add-game-tool-schema.ts展开收起

1
export const ADD_GAME_TOOL_NAME = "add_game_to_library";
2

3
export const addGameToolInputSchema = {
4
  type: "object",
5
  properties: {
6
    keyword: { type: "string", description: "游戏名称关键词，用于在数据源中搜索" },
7
    provider: {
8
      type: "string",
9
      description: "数据源id，例如vndb、bangumi、steam、steamgriddb；留空默认vndb",
10
    },
11
    externalId: { type: "string", description: "已知的数据源游戏ID；提供后跳过搜索，直接用这个ID" },
12
    imageSource: { type: "string", description: "图片来源，默认steamgriddb" },
13
  },
14
  required: ["keyword"],
15
} as const;

展开收起

description建议认真写，因为AI选不选这个工具、参数怎么填，很大程度上看它。

发现tool#

整个流程就是：搜索→取详情→入库→抓图→写回→刷新缓存。

1
// features/game/webmcp/hooks/use-add-game-tool.ts（节选）
2
export const useAddGameTool = () => {
3
  const queryClient = useQueryClient();
4
  const router = useRouter();
5

6
  useWebMCP({
7
    name: ADD_GAME_TOOL_NAME,
8
    description: "搜索游戏并自动添加到游戏库，同时从SteamGrid DB获取并配置封面、背景、图标和徽标。",
9
    inputSchema: addGameToolInputSchema,
10
    annotations: { readOnlyHint: false }, // 会改数据，明确告诉AI不是只读
11
    execute: async (input) => {
12
      const keyword = (input.keyword ?? "").trim();
13
      if (!keyword) throw new Error("请提供游戏名称关键词keyword");
14

15
      const provider = resolveProvider(input.provider);
16
      const imageSource = (input.imageSource ?? "").trim() || DEFAULT_GAME_IMAGE_SOURCE;
17

18
      // 1. 搜索（或按externalId直接识别）→ 取详情
19
      let externalId = (input.externalId ?? "").trim();
20
      let gameInfo = null;
21
      if (externalId) {
22
        gameInfo = await getGameInfoByIdApi(externalId, provider);
23
      } else {
24
        const result = await searchGameByNameApi(keyword, provider, 0, 1);
25
        const first = result.items[0];
26
        if (!first) throw new Error(`在数据源「${provider}」里没搜到「${keyword}」`);
27
        externalId = first.id;
28
        gameInfo = await getGameInfoByIdApi(first.id, provider);
29
      }
30
      if (!gameInfo?.name) throw new Error("没拿到游戏详情");
31

32
      // 2. 入库
33
      const created = await createGameInfoApi(gameInfo, { provider, externalId });
34
      const gameId = created?.data?.id;
35
      if (!gameId) throw new Error("游戏创建失败");
36

37
      // 3. 抓图（见下一节）
38
      const imageResult = await fetchGameImages({ gameInfo, keyword, source: imageSource });
39
      const images = { ...imageResult.images };
40
      if (!images.cover && gameInfo.cover.trim()) images.cover = gameInfo.cover.trim();
41

42
      // 4. 写回 + 刷新前端缓存
43
      if (Object.keys(images).length > 0) await updateGameInfoById(gameId, images);
44
      await queryClient.invalidateQueries({ queryKey: ["game"] });
45
      await queryClient.invalidateQueries({ queryKey: ["game-cards"] });
46
      await queryClient.invalidateQueries({ queryKey: ["game-sidebar"] });
47

48
      return { id: gameId, name: gameInfo.nameCn || gameInfo.name, provider, images };
49
    },
50
  });
51
};

展开收起

默认数据源我选了VNDB，但这里有个细节不能写死，因为数据源是插件化的，用户可以在设置里禁用：

1
const DEFAULT_GAME_PROVIDER = "vndb";
2

3
const resolveProvider = (requested?: string) => {
4
  const options = getManualSearchProviderOptions(); // 已启用的手动搜索数据源
5
  const value = requested?.trim();
6

7
  if (value) {
8
    if (!options.some((o) => o.value === value)) {
9
      throw new Error(
10
        `不支持的数据源「${value}」，可选：${options.map((o) => o.value).join("、")}`,
11
      );
12
    }
13
    return value;
14
  }
15
  // 优先VNDB，被禁用了就退回到第一个可用数据源
16
  if (options.some((o) => o.value === DEFAULT_GAME_PROVIDER)) return DEFAULT_GAME_PROVIDER;
17
  return options[0]?.value ?? DEFAULT_GAME_PROVIDER;
18
};

展开收起

全局挂载#

工具要挂在全局（任意页面都能被AI发现），所以我把它放进了根布局：

app/layout.tsx

1
<AppLayout>{children}</AppLayout>
2
<GameWebMcpTools />
3
<Toaster />

测试#

Chrome和Edge可以借助WebMCP Inspector这个插件来发现和使用WebMCP，这里以rewrite为例，通过和Agent对话来实现MCP的调用：

插件展示

很顺利，然后再来看看执行时间，也是很快的，只用了一秒多钟，如果网速再快点，或者使用本地模型的话，基本连1秒都不需要

与神对话

既然WebMCP是位于客户端的，那么就不要想着让你本地的OpenCode发现这个MCP了

总结#

个人感觉还是很好用的，以后必定是Web的未来，🤪前端永生

人生第一次漫展

Mon, 05 Oct 2026 00:00:00 GMT

2026年10月2日，阴雨天，重庆梦乡漫展

大二上学期，有一个二次元浓度比较高的同学，曾经说过“正经人谁去漫展”一话，让我对参加漫展一事产生了些顾虑，但也只是暂时的，漫展那么多的Coser，还有老师们出的角色很多我都认识，比起去热门景点，看着这么多不认识的人，我宁愿去一次漫展；

但一直没有什么机会，本科阶段一直都待在离大型漫展很远的地方，小漫展我是不愿意去的（朋友圈有个人去了一个几十个人的漫展，评价不是很好），热热闹闹的才有意思。也许可以本着去漫展，而顺便去某一个城市旅旅游的想法，比如上海、杭州、成都等，但是我要一个人吗？身边也确实找不到离我比较近，又愿意陪我去的朋友。何况，大三忙着学业和比赛，大四又忙着考驾照、写毕设、找实习，基本也就没有机会了。

其实我会选择保到重庆的另外一个原因，就是川渝漫展多

国庆期间，我正式遂愿了，参加了重庆梦乡d2的漫展，相比于其他三天（都是雨天），d2的天气还过得去，而且正值降温，即使没有空调也不会热。

早上七点从宿舍打车到附近的地铁站，然后坐了一个多小时地铁到了悦来站，还没有过出口的闸机呢，就看见闸机对面的区域坐着或站着一堆的Coser、妆娘、毛娘等，我算是开了眼，之前哪里见过这等景象，此时暗自窃喜，这就是我想要的

出了地铁站，沿着路线，就到了

入场

漫展是9点开始，我提前十分钟就到了，然后远远地就看到出胡桃（原神）和蕾塞（电锯人）的老师，我在想现在去集邮会不会早了，可能老师还没准备好，然后就先自己逛了下（后来找不到人了）

等把两个场地都逛得差不多了的时候，就开始疯狂找老师集邮了，目标为胡桃和月美（TYPE-MOON）；刚开始的时候集邮合影，但是我是一个人去的，没有人帮忙拍照，自己拍也拍得不是太好，后面就改成“老师，我可以给你拍张照吗！！”

久远寺有珠小姐

前中期基本就是这么度过的，陆陆续续会刷新新的老师，虽然错过了神秘仪式（梦之泪伤那个）有点可惜，但是也不乏乐趣，而且还遇到了One Piece、Jujutsu Kaisen、Shingeki no Kyojin、Naruto等Coser团体，他们都拍了请其他摄影老师拍了大合照，还有一个乐游团（好像是叫这个名字吧）的走场活动。真好啊，一群有着相同爱好的人聚集在一起，而且这种群像就是我想要的

后面主要就是在宅舞区了，之前刷B站的时候看到宅舞都看不懂，感觉跳得一般，不知道看点在哪里，但是到了线下，那感觉就不一样了，不管认不认识吧，曲子出来之后，会跳的就一起上去跳了，而且还相互打配合（宅舞有些是有舞者互动的），整整齐齐地完成了一次又一次表演，太有活力了

您的浏览器不支持 HTML5 视频播放。

最后的半小时，我就留在了外场，吃点饼干充下电，之前刷到漫展视频说，中午吃饭可能要自己点外卖，或者自己带点吃的，所以我昨晚还特意去了趟赵一鸣，但是我多虑了，漫展里面就有吃的，而且麦当劳的价格和外面一样，好像还更便宜，至少比里面其他小吃便宜

我要吐糟里面的小吃拼盘，就三四个小鸡块、三四个小洋葱圈和三四个小鸡米花，然后底下十几个锅巴片，看着是满满一盒，但是你卖我20是不是有点过分了

然后在场外，又遇到一个老师，不知道Cos的是哪个角色，头上戴着头套（好像是叫kigurumi），玩着电吉他（又好像是贝斯），人很高，形象也很好，挺干净的，我就上去拍了一张，直觉告诉我，这可能是全场最好看的

感觉超有气质的

散场后，本地的同门推荐我可以去观音桥看看，那里谷子店很多，我去了，发现很多的Cos散场后也是去的观音桥，大家都在逛谷子点，并且也彻底慢下来了。Cos也是人来着，但是和Cos一起逛谷子店，潜意识就会处理为和某个动漫人物、或者游戏角色一起的场景，我很喜欢这种感觉。

慢慢地，花了一两个小时把谷子店都逛完了，也顺带吃了晚餐（在造梦场吃铁板烧，蛋包饭是真好吃，酸梅汤是真好喝，团购是真便宜），虽然没有看到自己想要的，但是似乎看到了学弟想要的（前段时间跟我说正在推缘之空），我就拍了一张

穹妹键盘垫

最后花了一个小时坐车回去，回去的路上我想着，我要逛一辈子的漫展，我要爱一辈子二次元，之前我对二次元的还停留在个人的感受中，漫展之后我才真正见识到强大而有力的集体热爱，以及他们几乎人人具备的大方、活力与自信这三种素质，亦吾之所往

漫展出口

论学长

Sun, 27 Sep 2026 00:00:00 GMT

对于一个不太优秀的学生而言，学长是一个阶段性的称呼，一般是学弟学妹们的求助信号，他们知道你在某些方面有自己的经验，所以过来取取经。我虽然不太优秀，但是对于学弟学妹们的困惑，我是知无不言的，不太健谈的我却在此时说了一堆又一堆的话，并且投入了真心，我真心希望他们可以取得比我更好的成果。

我现在已经毕业了，只有比我小一两届的个别同学有时还称呼我学长，但也是时间问题，像这种知道提问，知道向学长取经，知道自己主动去了解某一件事的同学，毕业去向一般都不会差，那几个称呼我为学长的同学也是，肯定拥有着一个让人憧憬着的，比我更甚的未来。也许毕业后再过个两三年，等我步入社会之后，就再没有人会称呼我为学长了。我已经帮不了他们的忙了。

昨晚做梦，梦见我即将离开这个城市，正当我推着行李箱，准备去火车站的时候，突然一个曾多次向我提问，最终保研上岸的学妹问我要不要一起吃饭，我当时就去了。吃饭的时候聊得不多，我还没吃完呢，学妹的盘子已经空了，这时她突然站起身，向我鞠躬，庄重地对我道再见，随后走出去，没有驻留，没有回头，再无交集般地走着。我也紧接着走了出去，不过我走的是反方向，我是想驻留的，我是想回头的，我是希望以后还能有交集的，但我做不到，因为在我身上的“学长”称呼，于她而言，已经失去了其应有的特性。我已经没有资格再自称“学长”，而她也不会再有什么问题值得让我去回答。

现实和梦境是有共同点的，说起来，我已经有快两年时间没有跟任何一个学长说过话了。

Zen浏览器自定义

Sun, 27 Sep 2026 00:00:00 GMT

虽然也是自己一步一步从AI嘴里问出来的，但是好歹烧了token，也花了时间

Prerequisites

启用自定义配置：首先访问about:config，将toolkit.legacyUserProfileCustomizations.stylesheets设置为true
开启CSS调试：将devtools.chrome.enabled设置为true
创建自定义文件：访问about:support，找到“打开配置文件夹的按钮”，新建chrome文件夹，并在其中创建userChrome.css和userContent.css文件

浏览器自定义（非内容区）需要在userChrome.css中进行配置，目前只做了如下：

1
/* 修改所有标签页（包括非激活状态）的圆角 */
2
.tabbrowser-tab .tab-background {
3
  border-radius: 12px !important;
4
}
5

6
/* 为几乎所有元素设置字体，但排除标题栏按钮 */
7
*:not(.titlebar-buttonbox-container *) {
8
  font-family: "Noto Serif SC", sans-serif !important;
9
}
10

11
#navigator-toolbox {
12
  --zen-compact-float: 0px !important;
13
  border: none !important;
14
  background-color: var(--zen-main-browser-background-toolbar) !important;
15
}

展开收起

如果要修改内容区的样式，比如about:*、https://*等需要通过地址栏访问的网站，就需要在userContent.css中进行修改，不过其实一般只需要对浏览器内置的页面进行修改就可以了，而且主要是字体方面

1
/* 针对 about:* 页面设置字体 */
2
@-moz-document url-prefix("about:") {
3
  * {
4
    font-family: "Noto Serif SC", sans-serif !important;
5
  }
6
}

给课题组做了个主页

Tue, 08 Sep 2026 00:00:00 GMT

上周组会上，导师说要提高课题组的学术影响力，我想着有一个单独的课题组主页会不会好一些，于是不管三七二十一，这几天用空闲时间做了个

next-teampage

由于主页数据不是经常变动的，因此就没有接数据库，做了个静态站点，文本数据都存在了src/data下，图片的话放在了public/images下，可以根据实际情况来

网站做了国际化和响应式，用起来也简单，欢迎各位老师同学使用该项目

在线演示

虽说导师没有采用就是了，理由是“这个就做得太过了，李校长没有这个”

Event Loop

Mon, 31 Aug 2026 00:00:00 GMT

简单来说，知道了Event Loop，其实就是知道了代码执行的优先级：先call stack，后mircotask quene，最后work quene

call stack中存放了同步函数，例如console.log()、setTimeout()等
mircotask quene中存放了Promise中的resolve()函数
work quene中存放了各种回调函数

以下面的代码为例：

1
setTimeout(() => {
2
  console.log("timeout");
3
}, 10);
4
Promise.resolve().then(() => console.log("Promise"));
5

6
console.log("Others");

下面是代码的执行流程：

首先setTimeout()函数会进入call stack中
由于setTimeout()中存在回调函数，因此() => console.log('timeout')会进入work quene中
Promise.resolve()进入call stack中，由于resolve()中的函数中没有代码执行，因此会被弹出call stack，紧接着then()进入call stack，由于then()中存在resolve的中间处理逻辑，因此() => console.log('Promise')会进入microtask quene中
console.log('Others')是同步函数，进入call stack，执行后出栈
call stack栈空后，先执行microtask quene中的函数，里面只有() => console.log('Promise')
最后执行work quene中的函数，里面只有() => console.log('timeout')

因此最后函数的打印顺序为：Others、Promise、timeout

最初js的代码执行逻辑还是比较复杂的，但在引入async和await之后，就可以将所有的异步函数进行同步处理，确保了代码的执行顺序和编写顺序一致

nodejs在组成上包含了v8引擎和libuv，其中v8引擎负责代码的执行，比如call stack和microtask quene中的代码，event loop也是由v8引擎提供的，而libuv是一个多线程模型，用于处理work quene中的回调函数和一些耗时耗力的操作

很多网站都推荐使用Chrome进行访问，其中的原因之一，就是v8引擎是浏览器内置的js引擎中性能最好的，而Chrome中使用的就是v8

Web Workers

Mon, 31 Aug 2026 00:00:00 GMT

JavaScript是一种单线程编程语言，这便意味着不论你电脑配置有多高，JS只会用单核CPU来执行任务，其余cores基本都会处在闲置状态

但是事件循环（event loop）解决这这种限制，事件循环最重要的一点就是非阻塞

举一个实际的例子，假设页面中有两个按钮，其中一个用来进行IO密集的计算，另外一个用于修改页面的背景颜色。如果我们先点击“计算”的按钮，再点击“修改背景颜色”的话，会出现什么情况呢？只要计算量够大，就会出现等待很长一段时间之后，背景颜色才会被修改

计算

修改背景颜色

计算

修改背景颜色

这显然是很糟糕的，而Web Workers就可以把IO密集的计算任务交给一个新的线程执行，无需占用主进程，做法如下：

在主进程脚本中创建一个worker对象

1
// 这里的 worker.js 中写了我们要完成的IO密集任务
2
const worker = new Worker("worker.js");

通过绑定点击事件，来触发 worker 执行任务

1
const totalButton = document.getElementById("total");
2

3
totalButton.addEventListener("click", () => {
4
  worker.postMessage("Hello worker");
5
});

将IO密集任务写入 worker.js 中

1
// 这里的 message.data 就是上面的 `Hello worker`
2
onmessage = function (message) {
3
  console.log(message);
4
  console.log("Worker has started working");
5
  let total = 0;
6
  for (let i = 1; i <= 10000000000; i++) {
7
    total += 1;
8
  }
9
  console.log("Worker has finished working");
10

11
  // 计算完成后，将数据传递给主进程
12
  this.postMessage(total);
13
};

从 worker 获取计算结果

1
worker.onmessage = function (message) {
2
  console.log(`The total is ${message.data}`);
3
};

因此总结一下 Web Worker 的使用场景：

图片/视频处理、编解码
大数据排序、解析（如 JSON 解析、CSV 处理）
加密、压缩、Canvas 渲染
防止复杂计算阻塞 UI 交互

There's no speed limit

Mon, 24 Aug 2026 00:00:00 GMT

the article

Whether you’re a student, a teacher, or a parent, I think you’ll appreciate this story of how one teacher can completely and permanently change someone’s life in only a few lessons.

I was seventeen and about to start my first year at Berklee College of Music.

I called a local recording studio with a random question about music typesetting.

When the studio owner heard I was going to Berklee, he said, “I graduated from Berklee and taught there, too. I’ll bet I can teach you two years of theory and arranging in only a few lessons. I suspect you can graduate in two years if you understand there’s no speed limit. Come by my studio at 9<00> tomorrow for your first lesson, if you’re interested. No charge.”

Graduate college in two years? Awesome! I liked his style. That was Kimo Williams.

I showed up at his studio at 8<40> the next morning, super excited, though I waited outside before ringing his bell at 8<59>.

He opened the door. A tall man in a Hawaiian shirt and a big hat, with a square scar on his nose, a laid-back demeanor, and a huge smile, sizing me up, nodding.

(Recently I heard him tell the story from his perspective. He said, “My doorbell rang at 8<59> one morning and I had no idea why. I run across kids all the time who say they want to be a great musician. I tell them I can help, and tell them to show up at my studio at 9<00> if they’re serious. Nobody ever does. It’s how I weed out the really serious ones from the kids who just talk. But there was Derek, ready to go.”)

After a one-minute welcome, we were sitting at the piano, analyzing the sheet music for a jazz standard. He was quickly explaining the chords based on the diatonic scale — how the dissonance of the tri-tone in the 5-chord with the flat-7 is what makes it want to resolve to the 1. Within a minute, he started quizzing me.

“If the 5-chord with the flat-7 has that tri-tone, then so does another flat-7 chord. Which one?”

“Uh… the flat-2 chord?”

“Right! So that’s a substitute chord. Any flat-7 chord can be substituted with the other flat-7 that shares the same tri-tone. So reharmonize all the chords you can in this chart. Go.”

The pace was intense, and I loved it. Finally, someone was challenging me — keeping me in over my head — encouraging and expecting me to pull myself up quickly. I was learning so fast, it felt like the adrenaline rush you get while playing a video game. He tossed every fact at me and made me prove that I got it.

In our three-hour lesson that morning, he taught me a full semester of Berklee’s harmony courses. In our next four lessons, he taught me the next four semesters of harmony and arranging classes.

When I got to college and took my entrance exams, I tested out of those six semesters of requirements.

Then, as Kimo suggested, I bought the course materials for other required classes and taught myself, doing the homework in my own time. Then I went to the department head and took the final exam, getting full credit for those courses.

By doing this in addition to completing my full course load, I graduated college in two and a half years. I got my bachelor’s degree when I was twenty.

Kimo’s high expectations set a new pace for me. He taught me that “the standard pace is for chumps” — that the system is designed so anyone can keep up. If you’re more driven than most people, you can do way more than anyone expects. And this principle applies to all of life, not just school.

Before I met Kimo, I was just a kid who wanted to be a musician, doing it casually. Ever since our five lessons, I’ve had no speed limit. I owe every great thing that’s happened in my life to Kimo’s raised expectations. A random meeting and five music lessons showed me that I can do way more than the norm.

Twenty years later, Berklee invited me to give the opening keynote speech to incoming first-year students. Go to sive.rs/berklee to see it. Kimo knows how much he means to me, and we’re friends to this day.

视觉小说入坑指南

Thu, 20 Aug 2026 00:00:00 GMT

概述#

视觉小说是很有沉浸感的一类游戏，如果你也没有朋友喜欢独处，挑一个时间点，在没有人打扰的地方，拉上窗帘，开启一盏暖灯，备好一杯奶茶或者果汁，戴着耳机，看着游戏剧情，欣赏着日系音乐、精彩的配音以及精美的游戏CG，沉溺其中，绝对是一种舒适的体验。

下面我主要介绍一下我平常游玩视觉小说用到的网站或者工具

找游戏#

视觉小说那么多，到底要玩哪一款呢？对，我们需要一个数据库，目前最大的视觉小说数据库应当是VNDB，这里提供了最全的视觉小说信息，甚至还有游戏评分、游玩时长等信息，很容易就能找到一款玩起来感觉还不错的游戏

vndb页面

如果没有电脑或者平板，访问网站不是太方便的，或者觉得网站页面不够简约的话，那么可以安装下面的VNDB第三方客户端

vnlite

也有一些中文的视觉小说资料网站，主要有：

CnGal
月幕

这两个网站除了提供基本的游戏信息之外，还有其他二次元伙计写的文章、杂谈，或许可以帮助更好地选择游戏

找资源#

穷人看过来，富婆少爷可以走开了

知道要玩什么游戏后，下一步就是获取游戏实体了，正常获取游戏一般都是在官网或者在主流的游戏平台购买，我也是支持购买正版的，只不过很多正版并没有提供本土语言，让我不得不去社区寻找翻译组制作的版本（汉化组是神）

我找游戏的渠道一般有如下四个：

如果再找不到的话，那只能去寻求社区帮助、去网盘资源网站搜索了，或许还会有意想不到的收获

真实经历，我当初想找一个月姬R的任天堂游戏实体，但是找到的汉化版本不支持版本比较高的模拟器，楔子部分过完后就出现了画面撕裂的情况。于是我就去一些网盘资源网站，你猜怎么着，我直接找到了月姬R的官方中文版游戏实体，这样就支持最新的模拟器了

游戏工具#

下一步就是要玩游戏了，但只是双击exe文件就可以了吗？确实可以，不过我觉得可以再做一些游玩体验的优化

游戏管理#

如果游戏过多的话，那么整理起来也不方便，并且面对的如果是文件夹大军的话，也不好看，那么我非常建议在本地用一个专门的工具进行游戏管理，比较推荐的是vnweb

vnweb

vnweb支持的内容非常多，包括：

游戏基本信息管理（支持从vndb、bangumi、steam、ymgal等平台获取数据）
游戏PV和OST管理（支持从网易云添加游戏的OST、支持将视频链接或者B站链接和游戏进行绑定，即PV）
游戏角色和台词管理（如果遇到印象深刻的对话或者句子，可以随时记录保存；人物信息也可以快速进行查阅）
游戏攻略（可以随时标记游戏进度，支持从悠久导入攻略，支持自定义攻略，还可以利用网站提供的提示词借助ai来快速生成游戏攻略）
游玩统计（记录每一次游戏时长，根据记录信息生成年报、月报等统计内容）
游戏扫描（可以自动将文件夹中的游戏扫描添加到系统中）
游戏自动存档（每一次游戏结束后，都可以自动将游戏存档进行备份）
自定义外观（包括字体、背景图片、蒙版模糊度和透明度、CSS样式、深浅模式等）
命令行工具（日常玩游戏的话，可以直接打开命令行，输入vnweb start就可以启动上一次的游戏了）

所以用起来吧！

vnweb页面截图

游戏全屏和图像优化#

有些老游戏不支持全屏，或者全屏之后游戏的画质会很差，那么就可以使用Magpie，它是一个轻量级的窗口超分辨率工具，内置众多高效的算法和滤镜，仓库地址如下，具体使用可以参考文档或者去B站搜索配置教程

Blinue

Magpie