UNTAG 介绍了多种保存纯净网页的方法，让信息爱好者直呼过瘾。在重复、大量保存一个网站的同类网页时，其实还有进一步解放双手的方法。
以 UNTAG 网站的《卡片笔记实践篇》这篇文章为例，下面的关联文章和底部页脚部分是不需要的，保存到本地会扰乱搜索结果。
可以通过 Keyboard Maestro 运行针对固定网站的剪藏代码，将不需要内容删除掉，省去每次鼠标来回点击的时间。再模拟 SingleFile 插件保存网页的快捷键 ⌘ + ⇧ + Y ，实现剪藏+保存一键触发，干净利落。
Chrome Keyboard Maestro 动作下载
也可以为 UNTAG 网站自制一个书签小工具，一刀剪出干净页面。
剪藏 UNTAG（拖拽到网址收藏夹后使用）
工作原理
定位要删除的元素
打开浏览器开发者工具，点击元素选择器，尝试用鼠标在要删除的元素周围移动，确定要删除的元素对应的 HTML 代码位置，此时右侧的 HTML 代码区域也会有高亮标记随之移动。
确定大概位置后点击一下，定位当前元素所在的 HTML 代码区域。将鼠标在定位的 HTML 区域上下移动一下，根据左边的元素高亮情况尽可能选择可删除的最大范围的 HTML 代码。
确定好之后，在 HTML 代码上右键——Copy——Copy JS Path，复制当前 HTML 代码的 JS Path，应该是如下所示： document.querySelector("#__nuxt > div > div.n-config-provider > div > div.page_full_width > div > div > div.right_container > div:nth-child(6)")
背景知识——什么是 JS Path？
Copy JS Path，实际上获取的是一个使用 document.querySelector的表达式，该表达式可以定位到在元素检查器中选中的特定元素。
在控制台中粘贴并执行这段代码，将返回对应的元素。
这个功能在调试和开发过程中非常有用，它为开发者提供了一种快速获取元素引用的方法，而不需要手动构建选择器。
从截图中可以看到，关联文章部分被高亮了，这证明我们已经通过 JavaScript 代码选中了要删除的部分。
背景知识——什么是 document？
document 是一个全局对象，代表加载到浏览器中的当前网页，它是操作当前网页的入口点。通过 document 对象，可以访问和修改网页的内容。
例如 document.querySelector('selector') 可以选择一个元素。
使用 JavaScript 修改 document 时，页面的显示也会相应地更新。
接下来如法炮制，获取底部页脚部分的元素的表达式
应该类似这样 document.querySelector("#__nuxt > div > div.n-config-provider > div > div.footer")
在选择的 HTML 代码上右键——Delete element，删除选中的 HTML 代码块，观察一下选择的 HTML 代码是否正确。
成功删除了底部页脚部分，说明选择到了正确的 HTML 代码。
删除选中的元素
有了要删除的元素，接下来就是怎么删的问题。
这非常简单，以删除底部页脚部分为例，只需要 2 行 JavaScript 代码：
let element = document.querySelector("#__nuxt > div > div.n-config-provider > div > div.footer")
element.remove()
- 第一行代码：使用 let 声明一个变量 element，将页面元素的查询结果赋值给 element 变量
- 第二行代码：从 HTML 代码中删除该元素
再写一段代码来删除关联文章部分。 将关联文章的查询结果赋值给 element，再次使用 element.remove() 删除关联文章部分
let element = document.querySelector("#__nuxt > div > div.n-config-provider > div > div.footer")
element.remove()
element = document.querySelector("#__nuxt > div > div.n-config-provider > div > div.page_full_width > div > div > div.right_container > div:nth-child(6)")
element.remove()
把写好的代码复制到开发者工具中的控制台（Console）中执行
成功删除了页面中不需要的元素。
在实际使用中其他网站可能需要删除 2 个以上的元素，为了更方便的使用，可以优化一下代码并添加上注释帮助理解。
let elements = [
// 选择关联文章部分
document.querySelector("#__nuxt > div > div.n-config-provider > div > div.page_full_width > div > div > div.right_container > div:nth-child(6)"),
// 选择页脚部分
document.querySelector("#__nuxt > div > div.n-config-provider > div > div.footer")
]
for(let element of elements) {
element.remove()
}
let elements = [ ... ] 定义了一个名为 elements 的数组变量。在这个数组中，有两个元素，每个元素都是一个要删除的区域。使用 // 为代码添加上注释。 注意，数组中的两个元素之间需要使用 , 连接。
for ... 遍历 elements 数组中的每个元素并删除它们。
在控制台中执行优化后的代码：
背景知识——为什么通过控制台可以修改当前页面
当浏览器打开一个网页时，浏览器会解析HTML、CSS和JavaScript，然后渲染页面。此时会创建一个环境来执行该页面上的 JavaScript 代码。
通过浏览器开发者工具的控制台，开发者可以在当前页面的 JavaScript 环境中执行代码，因此可以直接访问和修改当前页面中的元素。
执行 JavaScript 代码的两种方式
自动化工具 Keyboard Maestro
我在执行 JavaScript 代码的下方加上了 SingleFile 插件保存网页的快捷键，保存 UNTAG 网页就是一个按键的事儿~
进阶——书签小工具
以《剪藏网页到本地的轻量化思路》这篇文章中介绍的网页剪藏小工具为例，与日常普通的书签对比，发现地址栏不是以熟悉的 URL 地址开头，而是以 javascript: 开头。
javascript:是一个 URI（统一资源标识符）方案。当在浏览器的地址栏中输入以 javascript: 开头的代码或点击一个包含此方案的书签时，浏览器会执行后面的 JavaScript 代码，而不是加载一个新页面。
不过出于安全原因直接在浏览器的地址栏中输入或粘贴以 javascript: 开头的代码时，浏览器默认不会执行这段代码，这是为了防止恶意网站诱导用户输入或粘贴恶意代码。 尽管直接在地址栏中执行 JavaScript 被限制，但书签工具仍然被允许，因为它们需要用户明确的交互（即点击书签）。这为那些知道他们正在做什么的用户提供了便利，同时减少了不熟悉的用户不小心执行恶意代码的风险。 所以，要创建我们自己的书签小工具，就要先创建一个空白书签，在 URL 部分粘贴上 JavaScript 代码。
在粘贴代码之前，要对代码做一些处理，首先删除注释并将代码压缩到一行。注意代码之间需要用;连接。
let elements = [document.querySelector("#__nuxt > div > div.n-config-provider > div > div.page_full_width > div > div > div.right_container > div:nth-child(6)"), document.querySelector("#__nuxt > div > div.n-config-provider > div > div.footer")]; for(let element of elements) { element.remove(); }
找一个在线工具将压缩后的代码进行 URL 编码，避免出现一些解析问题。
let%20elements%20%3D%20%5Bdocument.querySelector(%22%23__nuxt%20%3E%20div%20%3E%20div.n-config-provider%20%3E%20div%20%3E%20div.page_full_width%20%3E%20div%20%3E%20div%20%3E%20div.right_container%20%3E%20div%3Anth-child(6)%22)%2C%20document.querySelector(%22%23__nuxt%20%3E%20div%20%3E%20div.n-config-provider%20%3E%20div%20%3E%20div.footer%22)%5D%3B%20for(let%20element%20of%20elements)%20%7B%20element.remove()%3B%20%7D
现在就可以在书签 URL 处填上 javascript: 和编码后的代码。
测试一下
过往文章收藏文章索引： 《一种将线上内容精简格式后保存到本地的方法》 《剪藏网页到本地的自动化思路（以 Keyboard Maestro 为例）》 《剪藏网页到本地的轻量化思路》