返回文字星云
Obsidian插件开发开源

Bookmark Cards：让 Obsidian 收藏夹变得赏心悦目

一个让书签管理变得优雅的可视化插件 —— 自动抓取网站封面，支持双视图切换。

5 分钟阅读

Bookmark Cards：让 Obsidian 收藏夹变得赏心悦目

在上一篇文章中，我分享了为什么选择 Obsidian 以及开始开发插件的经历。今天，我想详细介绍一下我的第二个插件 —— Bookmark Cards。

插件诞生的背景

自从开始使用 Obsidian，我尝试把一些在视频中刷到的好用的网址记录下来，以便后续查看。

作为一个刚接触 Obsidian 的新手，我用 Markdown 文件管理书签收藏。但随着记录的越来越多，每次打开那个长长的列表，看着一堆纯文本链接，总觉得少了点什么。

传统 Markdown 书签的问题：

## 技术博客
- https://vuejs.org/
- https://react.dev/
- https://nodejs.org/

看着这些链接，你能快速识别出哪个是哪个吗？很难。

我想要什么？

我想要一个既保留 Markdown 原生格式，又能提供美观可视化的解决方案：

  1. 纯文本链接不够直观 - 希望能看到网站的封面和描述
  2. 层级结构不够清晰 - 当书签数量增多时，需要更好的组织方式
  3. 缺少可视化体验 - 相比浏览器书签栏，Obsidian 的书签管理太朴素了

于是，Bookmark Cards 诞生了。

核心功能

🎨 双视图模式

插件提供两种视图模式，可以随时切换：

列表视图 - 适合快速浏览层级结构：

📁 前端技术
  📁 Vue.js
    🔗 Vue.js 官方文档
  📁 React
    🔗 React 官方文档
📁 后端技术
  🔗 Node.js 官网

卡片视图 - 适合可视化展示：

  • 网格布局，每个书签都是一张精美的卡片
  • 自动显示网站标题、描述和封面图
  • 悬停动画，交互体验流畅

🕸️ 智能元数据抓取

这是我最喜欢的功能！插件会自动：

  • 抓取网站的标题（Open Graph）
  • 获取网站描述
  • 显示网站封面图片
  • 缓存元数据，避免重复请求

你只需要在 Markdown 中写一个链接，剩下的交给插件。

📝 Markdown 原生支持

插件完全兼容 Markdown 语法，不需要学习新的格式：

# 我的收藏夹

## 技术博客
- [Vue.js 官方文档](https://vuejs.org/)
- [React 官方文档](https://react.dev/)

## 工具
- [[我的笔记]]  # 支持 Wiki-links
- https://obsidian.md  # 支持直接 URL

⚙️ 灵活的配置选项

  • 指定收藏夹文件路径
  • 启用/禁用列表视图
  • 启用/禁用卡片视图
  • 自定义默认封面图片
  • 内置精美 SVG 默认封面

开发过程中的挑战

1. 元数据抓取的跨域问题

最初我想直接在前端抓取网站元数据，但遇到了 CORS 限制。

解决方案：

  • 使用代理服务抓取元数据
  • 实现缓存机制，避免重复请求
  • 提供默认封面，优雅降级

2. 性能优化

当书签数量很多时，如何保证流畅的体验？

优化策略：

  • 懒加载图片
  • 批量抓取元数据
  • 智能缓存策略
  • 虚拟滚动（计划中）

使用场景

这个插件特别适合：

  1. 技术学习者 - 管理大量的技术文档和教程链接
  2. 内容创作者 - 收集灵感和参考资料
  3. 研究人员 - 整理论文和学术资源
  4. 设计师 - 收藏设计网站和作品集

快速开始

安装步骤

  1. 在插件页面下载插件压缩包
  2. 解压到 .obsidian/plugins/ 目录
  3. 在 Obsidian 设置中启用插件
  4. 创建一个 Markdown 文件作为收藏夹
  5. 在插件设置中指定文件路径

创建你的第一个收藏夹

创建一个 Bookmarks.md 文件：

# 我的技术收藏

## 前端框架
- [Vue.js](https://vuejs.org/)
- [React](https://react.dev/)

## 开发工具
- [Obsidian](https://obsidian.md/)
- [VS Code](https://code.visualstudio.com/)

然后在插件设置中指定这个文件，点击侧边栏的书本图标，就能看到美观的书签卡片了！

高级技巧

1. 创建分类结构

# 我的收藏夹

## 技术博客
### 前端
### 后端
### 全栈

## 学习资源
### 视频教程
### 文档网站

2. 添加笔记和描述

## 前端框架

- [Vue.js](https://vuejs.org/)
  渐进式 JavaScript 框架，易学易用
  
  使用场景：
  - 单页应用
  - 组件化开发

3. 使用 Wiki-Links

## 我的项目

- [[个人博客]]
- [[Jynoke]]
- [[学习笔记]]

开源与反馈

这个插件是完全开源的，代码托管在 GitHub。

如果你在使用过程中遇到问题，或者有任何建议，欢迎：

  • 提交 GitHub Issues
  • 通过小红书私信我

写在最后

开发 Bookmark Cards 的过程让我对 Obsidian 的插件系统有了更深入的理解。从最初的想法到最终发布，花了大约两周时间。

最让我开心的是，这个插件不仅解决了我自己的问题，也帮助到了其他 Obsidian 用户。看到社区的反馈和建议，让我更有动力继续改进它。

如果你也是 Obsidian 用户，不妨试试这个插件，让你的书签管理变得更加优雅！

立即下载：Bookmark Cards 插件页面

GitHub 仓库：jynoke-obsidian-plugins

相关文章：

查看更多文章