[JS/TS] baoyu-url-to-markdown 技能使用教程：高效保存网页为本地 Markdown 文件

你是否经历过这样的烦恼？收藏夹里的技术文章链接突然失效，显示“404 Not Found”；想复制内容到笔记里，却发现排版错乱、代码块变形；或者订阅的付费内容过期后就再也无法查看？

今天要介绍一个名为 baoyu-url-to-markdown 的工具技能，它能帮你把任何网页完整、干净地保存到本地的 Markdown 文件中，从此告别链接失效和内容丢失的焦虑。

什么是 baoyu-url-to-markdown？

简单来说，这是一个能将网页内容“完整归档”的工具。其强大之处在于，它可以将任何网页（包括需要滚动加载或登录查看的内容）转换为结构清晰的 Markdown 格式。更贴心的是，它会根据网页域名自动创建文件夹进行归类（例如 react.dev、medium.com），并在每个生成的 Markdown 文件头部自动记录文章标题、作者、发布时间等元数据，极大地方便了后续的检索与管理。

如何安装？

前置条件

在开始安装前，请确保你的电脑上已具备以下环境：

1. Claude Code：Anthropic 推出的 AI 编程助手命令行工具。你可以前往前端 & 移动板块查找相关的环境配置指南。
2. Node.js 环境：用于运行 JavaScript 程序。请访问 Node.js 官网下载并安装 LTS 版本。

安装步骤

安装过程非常简单，只需在终端中执行一行命令：

npx skills add https://github.com/jimliu/baoyu-skills --skill baoyu-url-to-markdown

命令解析：

• npx skills add：用于添加一个新的技能（Skill）。
• https://github.com/jimliu/baoyu-skills：该技能所在的源代码仓库地址。
• --skill baoyu-url-to-markdown：指定要安装的具体技能名称。

执行命令后，系统会自动完成克隆仓库、选择技能、确认安装范围等步骤，整个过程仅需数秒。

使用场景与操作指南

场景一：保存公开的技术文章

需求：你在 Vercel 官方博客看到一篇关于 AI SDK 的文章，希望保存下来深入学习。

操作：

1. 复制文章 URL：https://vercel.com/blog/introducing-the-vercel-ai-sdk
2. 在终端执行命令：

npx -y bun ~/.agents/skills/baoyu-url-to-markdown/scripts/main.ts https://vercel.com/blog/introducing-the-vercel-ai-sdk

3. 工具将自动完成以下操作：打开网页、等待加载、滚动触发懒加载内容、提取并转换内容、保存至本地。

运行结果示例：

Fetching: https://vercel.com/blog/introducing-the-vercel-ai-sdk
Mode: auto
Waiting for page to load...
Scrolling to trigger lazy load...
Capturing page content...
Saved: url-to-markdown/vercel.com/introducing-the-vercel-ai-sdk-npm-i-ai-vercel.md
Title: Introducing the Vercel AI SDK: npm i ai - Vercel

生成的文件：
文件会自动保存在 url-to-markdown/vercel.com/ 目录下。文件开头包含完整的 Front Matter 元数据：

---
url: https://vercel.com/blog/introducing-the-vercel-ai-sdk
title: "Introducing the Vercel AI SDK: npm i ai - Vercel"
description: "An interoperable, streaming-enabled, edge-ready software development kit for AI apps built with React and Svelte."
published: "2023-06-15"
captured_at: "2026-02-03T06:01:04.021Z"
---

# Introducing the Vercel AI SDK: npm i ai - Vercel

[文章正文内容...]

该文件大小约为 7.0KB，包含了完整的文章内容和代码示例。

场景二：保存需要登录查看的内容（使用 --wait 模式）

需求：你想保存某付费技术平台上一篇需要登录后才能阅读的文章。

操作：

1. 在命令中添加 --wait 参数：

npx -y bun .baoyu-skills/baoyu-url-to-markdown/scripts/main.ts https://towardsdatascience.com/how-to-apply-agentic-coding-to-solve-problem/ --wait

2. 工具会打开浏览器并显示提示，等待你手动操作：

   Fetching: https://towardsdatascience.com/how-to-apply-agentic-coding-to-solve-problem/
   Mode: wait
   Browser opened. Please login and navigate to the content you want to capture.
   Press Enter when ready...

3. 此时，你可以在打开的浏览器中完成登录、等待页面完全加载、并滚动以确保所有动态内容都已呈现。

4. 确认页面内容准备就绪后，回到终端窗口，按下 Enter 键。

5. 工具将立即捕获当前页面内容并保存为 Markdown 文件。

场景三：批量归档多个页面

需求：你想一次性保存 React 和 Next.js 的官方文档首页。

操作：
使用 && 连接多个命令即可实现批量抓取：

npx -y bun ~/.agents/skills/baoyu-url-to-markdown/scripts/main.ts https://react.dev/learn && \
npx -y bun ~/.agents/skills/baoyu-url-to-markdown/scripts/main.ts https://nextjs.org/docs

运行结果与目录结构：

Fetching: https://react.dev/learn
Saved: url-to-markdown/react.dev/quick-start-react.md
Title: Quick Start – React

Fetching: https://nextjs.org/docs
Saved: url-to-markdown/nextjs.org/nextjs-docs-nextjs.md
Title: Next.js Docs | Next.js

工具会自动按域名创建清晰的文件夹结构：

url-to-markdown/
├── react.dev/
│   └── quick-start-react.md (15KB)
├── nextjs.org/
│   └── nextjs-docs-nextjs.md (65KB)
└── vercel.com/
    └── introducing-the-vercel-ai-sdk-npm-i-ai-vercel.md (7KB)

与笔记工具集成

保存下来的 Markdown 文件可以轻松导入主流笔记软件，与你现有的知识管理流程无缝衔接。

• Obsidian：直接将整个 url-to-markdown 文件夹拖入你的笔记库即可。或者，在抓取时使用 -o 参数直接指定保存路径：

  npx -y bun ~/.agents/skills/baoyu-url-to-markdown/scripts/main.ts https://example.com/article -o ~/Documents/Obsidian/Articles/article.md

• Notion：在 Notion 页面中选择“导入” → “Markdown”，然后选择你保存的文件即可。
• 其他支持 Markdown 的软件：大部分现代笔记软件都支持直接打开或导入 Markdown 文件。

文件头部的元数据（Front Matter）在笔记软件中尤为有用。例如，在 Obsidian 中，你可以利用 Dataview 插件，根据日期、来源或标签来筛选和关联文章，构建属于你自己的技术文档知识网络。

总结与建议

使用 baoyu-url-to-markdown 一段时间后，最深刻的体会是终于可以安心地收藏有价值的内容，无需再担心它们某天会消失。这个工具的优势很明显：保存内容完整、支持登录页面、自动按来源分类整理，并且生成标准化的 Markdown 格式，兼容性极佳。

建议养成“随手归档”的习惯，遇到值得深入学习的文章或文档时，花几秒钟运行一下命令。每周可以固定时间整理这些本地存档，打上标签，做好归类。工具的核心价值在于辅助我们更高效地积累和管理知识，坚持学习和系统化整理才是关键。在 云栈社区 的Node.js等板块，你也能找到许多关于自动化与效率提升的讨论和资源。