缘起
弄了小 NAS，就老琢磨着装点儿啥好，其实我对于管理书签的需求并不大，单纯是冲着颜值安装了 karakeep。然后就开始了折腾之旅，差不多把常见的书签管理工具都试了个遍，果然还是 karakeep 最得我心。
那到这里，故事应该结束了。但我只有 4 GB 内存，这家伙要占用我 1 GB。我说了，这方面儿的需求并不大，他占用我 1/4 的资源，我很不爽。而且它对网站的抓取速度和效果也常常无法令我满意。
认真审视自己的需求：管理，便于查找，希望能够添加上标签描述，还有预览图。当然，我很懒，手动整理是不可能整理的，之所以现在愿意动手儿，就是因为各种工具下都会有 AI 的加成，能省力很多。
想来想去，这点事情 Obsidian 也就办了，而且，因为我的笔记在各个设备上都是实时同步的，所以我出门儿也可以在手机上方便的使用。这比我那没有公开到外网的的 NAS 可方便多了。
计划通，那就搞，然后今天就把流程跑通了，当然，中间踩了几个坑，但也学了一些东西，也了解了一些事情。所以折腾这件事情本身并不在乎它的结果，过程本身就是收获。
效果图
配料
【请至 2 楼阅读 2.0 版本】
- 主料：Obsidian
- 核心插件：
- 数据库：用来创建书签的汇总卡片视图
- 网页浏览器：用来打开 AI 的网页（后面会详细说），当然你直接用浏览器也是可以的
- 第三方插件：
- Advanced URI：用来为命令创建链接，方便实现自动化
Dataview：用来动态生成 AI 提示词，这样我就能把笔记库中现有的标签放入提示词，获得更好的生成效果实测标签聚拢效果并不好，所以现在改用预设分类标签实现，也就不用动态生成提示词了- Local lmages Plus：把网站预览图下载到本地
- Paste image rename：对图片进行更好的重命名
- Tag Wrangler：用来后期管理，主要是可以对标签进行整体重命名
- Templater：用来创建文件，并顺序调用命令
- 关键网站：
- https://www.thum.io/ 为网站生成缩略图
- https://www.kimi.com/ 选择 Kimi 的原因是丢给他一个网址它可以做到访问网址读取内容并通过网络搜索获取相关信息，这相当于接入了两个 MCP 服务，但如果自己接入有可能遇到某些网页内容过多导致了上下文长度超出限额。所以稍微麻烦一点直接使它的网页版效果非常好。
食用方法：
以上插件的细节设置不讲了，请自行研究，这里主要描述工作流程：
起始页
Start.base
formulas:
screenshot: file.embeds[0]
views:
- type: cards
name: 书签
filters:
and:
- "!url.isEmpty()"
order:
- title
- url
- description
- tags
sort:
image: formula.screenshot
imageAspectRatio: 0.625
这里非常简单，一个卡片视图的数据库。列出所有具有 url 属性并且不为空的笔记。添加了一个公式属性，获取文件中第一个嵌入内容，作为卡片的封面。封面图比例是 0.625，这里和网站缩略图的尺寸是对应的。
需要特别说明如果使用的是网络图片，则不被视作嵌入信息，所以要把图片保存到本地才能正常显示。
书签笔记基本结构
---
created: 2025-12-20 09:24:00
title: 小众软件
url: https://www.appinn.com/
description: 专注于分享免费、小巧、实用、有趣、绿色软件的网站，提供Windows、Mac、Android、iOS等平台的软件评测、使用体验和下载信息，发掘并推荐有价值的小众软件
tags:
- 软件下载
- 软件评测
- 技术博客
- 免费软件
- 实用工具
---
screenshot:: 
这里将截图放在笔记内容中，是为了方便插件将图片下载到本地，我测试了将图片转换为 base64，但是太长了，导致笔记打开非常卡。而使用下载的方式我还可以保存尺寸稍大一些的预览图。
这里的双冒号是尝试使用 dataview 风格的元数据标注（Base 不支持）。
AI 提示词
可以放入 Kimi 的常用语中，如果使用其他 AI 工具，也可以放入智能体或者助手的系统提示语中。
请根据后续所给出网址指向的网站内容，以及互联网中对该网站的评价，来完善如下书签信息（标题、描述和标签），并以原格式返回，以便我直接替换输入内容。
## 细节要求：
- 其他信息完全保持原样，不要做任何修改
- 如非必要或者专有名词等，尽量使用简体中文
- 如无必要，属性值不加引号
- 生成的结果以代码块形式返回，方便复制
- 标题使用不含描述的简短标题
- 描述着重说明这是一个什么网站，包含什么，用来做什么，这种用来识别网站的关键信息
- 保持 YAML 语法正确（标签列表使用多行格式）
- 首先在下方的网站类别中选择合适的标签，标签格式为 `一级分类/二级分类`
- 对于一个网站一般只添加一次分类标签，如果确实同属于多个分类，可以适当添加，但最多两个分类标签
- 如果类别确实无法覆盖当前网站，可以适当新增类别，但请保持简洁
- 然后为网站补充具有代表性的标签，对网站进行完善标记，标签数量控制在3~7个
## 书签模板：
```markdown
---
created:
title: 【网站名称】
url: 【网站网址】
description: 【网站描述】
tags:
- 【标签1】
- 【标签2】
- 【标签3】
---
```
## 例子：
```markdown
---
created: 2025-12-20 09:24:00
title: 小众软件
url: https://www.appinn.com/
description: 专注于分享免费、小巧、实用、有趣、绿色软件的网站，提供Windows、Mac、Android、iOS等平台的软件评测、使用体验和下载信息，发掘并推荐有价值的小众软件
tags:
- 软件下载
- 软件评测
- 技术博客
- 免费软件
- 实用工具
---
```
## 网站类别
- 工作学习
- 办公软件
- 开发工具
- 设计资源
- 学习平台
- 文档资料
- 实用工具
- 搜索引擎
- 翻译工具
- 文件处理
- 系统工具
- 安全隐私
- 科技数码
- 产品资讯
- 软件下载
- 硬件信息
- 教程攻略
- 购物消费
- 电商平台
- 比价工具
- 支付服务
- 购物攻略
- 娱乐影音
- 视频网站
- 音乐平台
- 游戏娱乐
- 阅读小说
- 新闻资讯
- 综合新闻
- 行业资讯
- 本地信息
- 生活休闲
- 旅游出行
- 美食烹饪
- 健康养生
- 家居生活
- 社交社区
- 社交平台
- 论坛社区
- 博客平台
- 投资理财
- 股票基金
- 财经资讯
- 理财工具
- 管理维护
- 待处理
- 重要备份
- 历史存档
- 测试开发
去问 Kimi
可以使用核心插件“网页浏览器”来打开 Kimi，这样做的优点只是不需要切换软件了。
提示词粘贴进去，再把结果复制出来。
创建笔记
Templater 模板文件。第一行定义书签笔记放置的目录。
使用时在弹出的提示框中粘贴入刚才复制出来的结果，他会
- 从中提取标题作为笔记的标题
- 然后创建对应的文件
- 写入粘贴入的内容
- 调用 Local lmages Plus 将网站缩略图保存到本地
- 调用 Paste image rename 对网站缩略图进行重命名
【注意事项】：这里生成网站截图设置了等待时间是 12 秒，对于一些加载较慢的网站可能会获得更好的效果，但这个等待时间确实太长了，你可以根据自己的需要进行修改，或者去除这一参数。参数设置参考： Thum.io | URL API Documentation
保存图片和图片重命名都会在截图加载完成后进行。
<%*
/** 设置笔记保存的文件夹路径 */
const folderPath = 'bookmarks';
/** 提示用户输入笔记内容 */
const noteContent = await tp.system.prompt("Please enter note content");
/** 获取笔记元数据 */
const getMetaData = (key, defaultValue=null) => {
const regex = new RegExp(`^${key}:\\s*(.*)$`, 'm');
const match = noteContent.match(regex);
return match ? match[1].trim() : defaultValue;
}
/** 提取标题和URL */
const title = getMetaData('title', 'Untitled');
const url = getMetaData('url', '');
const screenshotUrl = `https://image.thum.io/get/wait/12/viewportWidth/1600/width/1440/crop/900/png/noanimate/${ url }`;
/** 创建新笔记 */
if(title && url) {
const newFileContent = noteContent.replace(
/^created:.*/m,
`created: ${ tp.date.now('YYYY-MM-DD HH:mm:ss') }`
)
.replace(
/---\S*$/,
`---\n\nscreenshot:: \n\n`
);
tp.file.create_new(newFileContent, title, true, folderPath)
}
/** 获取笔记路径 */
const filePath = encodeURIComponent(`${folderPath}/${title}.md`);
/** 下载并重命名截图 */
const screenshot = new Image();
screenshot.src = screenshotUrl;
screenshot.onload = () => {
window.setTimeout(() => {
window.open(`obsidian://adv-uri?filepath=${filePath}&commandid=obsidian-local-images-plus%3Adownload-images`)
}, 1000);
window.setTimeout(() => {
window.open(`obsidian://adv-uri?filepath=${filePath}&commandid=obsidian-paste-image-rename%3Abatch-rename-all-images`)
}, 3000)
};
tR += ""
%>
小书签
任何截图方式都不可能保证绝对完美，上述方法对于大部分网站效果都可以接受，但个别涉及验证登录等情况会无法获得预期的截图。这时候可以在浏览器中打开该网站使用如下小书签弹出一个尺寸合适的窗口进行手动截图：
- scale 是当前屏幕的缩放比例，可以从电脑的系统设置中直接查看
- 1440 和 900 是期望的截图尺寸
- 但因为窗口边框等因素内容区域的尺寸可能并不是这个数值，所以根据实际情况加一下偏移量
javascript:(function(){
const scale = 1.25;
const targetWidth = 1440 - 5;
const targetHeight = 900 - 13;
const windowWidth = Math.floor(targetWidth / scale);
const windowHeight = Math.floor(targetHeight / scale);
window.open(
window.location.href,
'cleanWin',
`width=${windowWidth},height=${windowHeight},left=200,top=150,` +
'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes'
)})();
工作流程
flowchart TB
Start --->|打开Kimi| systemPrompt[输入系统提示词] ---> inputUrl[输入网址] --->copyResult[复制生成结果]--->createFile["粘贴入 Templater 的提示框中"] ---> wait[等待图片处理完成]
扩展玩法
因为每一个网站的记录本身就是一篇笔记，所以可以在截图后面记录任何内容。
也可以结合 singlefile 保存网站的存档，因为只需要将文件保存到合适的目录然后在笔记中引用该文件。
完成
实际操作起来也不算麻烦，而且效果还不错。当然很多细节还有待完善，以及美化工作还没有做。
总而言之，老鼠很可爱，所以请我喝杯咖啡吧~~