本地文件深度交互新玩法：Obsidian Copilot的深度开发

优质文章学习记录

— 10 min read
本地文件深度交互新玩法：Obsidian Copilot的深度开发

前言

当 “本地知识库管理” 撞上 “AI 智能分析”，会擦出怎样的火花？试想一下：你的 Obsidian 里存着多年积累的笔记、文档，却只能手动翻阅检索；而现在，一个插件 + 蓝耘 API，就能让这些 “静态文字” 瞬间 “活” 起来 —— 自动总结核心内容、智能回答专业疑问，甚至挖掘隐藏关联！今天，就带大家拆解 Obsidian 联动蓝耘 API 的全新玩法，看看如何让本地文件从 “信息仓库” 变身 “智能助手” 。

蓝耘API KEY的创建

先进行API的创建
先点击蓝耘进行一个正常的注册流程

image.png


进入到主页之后，我们点击上方的MaaS平台

image.png


进入到平台后我们可以看到很多的大模型

image.png


不仅仅是文本生成、音频理解、视频理解还是视频生成，都有对应的大模型
每个模型都有很详细的介绍以及价格示例，用过api调用的都可以看到这个价格还是比较贴近平民的

image.png


并且可以进行在线体验的，这里是先进行思考的，然后再给出结果的，算上思考的时间，给出结果只花了几秒钟，效率还是很不错的

image.png


并且这里还有一个可视化的界面，观察你的tokens消耗数量

image.png


仔细发现还有大额的token，也是很香的，这就是我为什么选择蓝耘的原因

image.png


废话不多说，我们直接来到API KEY管理，点击创创建API KEY。创建好了之后我们直接点击复制就ok 了
格式如下：sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

image.png

进行obsidian Copilot的配置

这里的obsidian你如果没有下载的话可以私信我哦，我可以发给你的
进入到obsidian的主页，点击左下角的齿轮进入到设置中

image.png


来到第三方插件中，可以看到这里有一个社区插件市场，我们直接点击预览按钮

image.png


在搜索框中输入Copilot
选择第一个

image.png


然后我们可以看到这个插件相关的信息，下面都是一些展示样例

image.png


我们这里直接点击安装操作
等待安装

image.png


完成安装

image.png


点击启用

image.png


这里右上角报提示了

image.png


我们来到第三方插件这里，可以看到我们这里可以进行api的设置

image.png


我们来到Model

image.png

往下翻找到Add Custom Model，并进行点击操作，添加对话模型

image.png


进入到添加模型的界面是这样的

image.png


这里们将信息进行写入，写入之后我们点击右下角的Verify进行测试下是否能链接成功，如果链接成功的话是会在右上角反馈successful的，如下：

image.png


可以参考下我这里的数据

Model Nmae:/maas/qwen/Qwen3-235B-A22B Provider:OpenAI Format Base URL:https://maas-api.lanyun.net/v1 API KEY:你得去蓝耘MASS平台进行创建

测试成功了之后，我们直接点击这个Add Model进行模型的添加操作
然后这里我们就可以看到我们刚刚添加的蓝耘api模型

image.png

这里我在配置的时候一直报错，得亏蓝耘的工作人员反馈速度快，不然我一直处于报错现象

image.png

添加好了模型之后，我们这里是可以进行参数调节的，具体如何调节看你们的喜好

image.png


上面我们添加的是对话模型，下面的是嵌入模型，这里我们就不添加了，因为用不到，我们正常的进程对话就行了

image.png


然后我们来到Basic，我们将Default Chat Model默认对话模型设置为我们刚刚添加的

image.png


image.png


其他的参数我们就默认就行了

image.png

文件分析测试

我这里有一个表达式求值的实验报告

image.png


我们在安装了obsidian Copilot这个插件后，左侧有一个对话的按钮

image.png


我们直接进行点击，右侧就能看到我们的对话框了

image.png


我们这里可以根据提示，输入[[就能引用我们的文件了

image.png


输入好问题之后，我们直接点击chat进行问题的询问

image.png


如下是ai的回答

image.png


ai分析了我们的文件，然后对某些小点进行优化操作

image.png


他这里还询问我是否需要提供一个可视化的图，答案生成的速度也是非常的快

image.png


下面他的回答真的惊掉了我的下巴，

image.png


这种流程图的语法我是一点儿都不会，我这里直接就是让蓝耘的ai帮我生成，这看着就很舒服了

下面我还想试下更长的文章他是还能像这样进行优化操作
这里我们展示的是C++的日志系统项目，我们让ai帮我梳理下项目，生成一个流程图，

image.png


这里我们一定要先引用上这个文件，不然是会出现报错的
第一次我们这里出现了报错了，估计是文件太大了哈哈哈

image.png


所以我们这里得设置下我们上传的token数了，来到我们的Copilot Settings面板
将这三个参数进行一个适度的增加操作

image.png


image.png


看来还是不行哈哈哈，因为这个项目的字数到54761了，确实超过了上传的tokens了

image.png


那我们就针对于这个项目创建一个简单的介绍吧，这样应该是没问题了

image.png


效果如下：也是可以清晰的看到我们的项目的落地情况以及同步模式和异步模式

image.png


我们这里可以复制它的回答粘贴到文章中去
效果也是很不错的

image.png


像日常写项目的时候，写项目比较的时候，用到这个工具直接让ai分析我们的项目流程，也是很方便，再加上蓝耘的api快速反应，效率更高了

这里展示下这个生成的流程图吧，我觉得ai做的挺好的

同步模式异步模式是否开始日志记录日志模式选择直接调用输出方法写入前端缓冲区选择输出目标控制台输出文件输出滚动文件输出缓冲区已满?交换前后端缓冲区继续写入后台线程处理批量写入输出目标控制台输出文件输出滚动文件输出

Ai的Prompt的设置

使用 ctrl+P 唤出命令菜单，然后输入 copilot add 就会出现添加命令的选项

image.png
使用 Copilot 进行文本编辑时，有时你会遇到一个问题：Copilot 不知道你正在编辑的是哪篇文章。为了避免这种情况，你可以在自定义的 Prompt 中使用以下变量： - `{activeNote}` 告诉 Copilot，你指定的是「当前窗口下激活的这篇文章」 - `{[[]]}` 告诉 Copilot 你指定的是哪一篇文章 - `{}` 告诉 Copilot 你指定的是光标选中的段落 - `{#tag1,tag2}`告诉 Copilot 你指定的是包含了哪些标签的文章，只要包含其中一个标签就会命中 - `{FolderPage}` 告诉 Copilot 你指定的是哪个文件夹路径下的所有文档 我们也可以在这里给ai设置角色设定

基于prompt的设定，ai会更加的智能化的
你们也可以设定一个自己的ai机器人哦，针对某些固定的事情进行回答操作

总结

通过 Obsidian 插件搭桥、蓝耘 API 赋能，我们见证了本地文件从 “被动存储” 到 “主动交互” 的蜕变 —— 自动总结、智能问答，每一步都在重塑知识管理的效率边界。不过，这场 “AI + 本地工具” 的融合实验，还有多少潜力待挖掘？那得你自己循着轨迹来试试哦！！！

Read more

前端数据埋点

当我们想知道：“这个按钮有多少人点了？”、“用户在这个页面停留了多久？”、“哪个渠道来的用户转化率最高？”。 回答这些问题的核心技术手段，就是埋点（Tracking）。 一、什么是埋点？基本逻辑是什么？ 1.1 定义 简单来说，埋点就是在特定的位置“埋”下一段代码或配置，当用户触发特定行为（如点击、浏览、输入）时，自动采集相关数据并发送到服务器的过程。 如果把网站比作一家超市，埋点就是安装在货架、收银台、门口的摄像头和传感器，记录顾客的行走路线、拿起商品的次数以及最终购买的行为。 1.2 基本逻辑流程 一个完整的埋点流程通常包含以下五个步骤： 1. 触发（Trigger）： 用户产生行为（点击按钮、页面加载、接口请求等）。 2. 采集（Collect）： 前端代码捕获该行为，并收集上下文信息（时间、URL、用户 ID、设备信息等）

Nanbeige 4.1-3B Streamlit UI效果展示：左右气泡自动识别与Flex反转

Nanbeige 4.1-3B Streamlit UI效果展示：左右气泡自动识别与Flex反转 如果你厌倦了千篇一律、布局死板的AI对话界面，总感觉它们缺少一点“灵魂”和“温度”，那么今天展示的这个项目，或许能给你带来完全不同的体验。 想象一下，你打开一个AI对话页面，看到的不是侧边栏、工具栏和单调的输入框，而是一个像手机短信或二次元游戏聊天室一样清爽的界面。你的消息在右侧，AI的回复在左侧，气泡圆润，背景优雅，文字像打字机一样一个个跳出来——整个过程流畅得仿佛在和一位老朋友发消息。 这正是我们为Nanbeige 4.1-3B模型打造的Streamlit WebUI。它没有使用复杂的前端框架，仅仅通过纯Python和一点“CSS魔法”，就彻底重塑了Streamlit的原生交互体验。这篇文章，我将带你深入这个界面的核心，重点揭秘它如何实现“左右气泡自动识别”这一看似简单却极具挑战的视觉效果。 1. 告别传统：一个极简二次元风格的对话界面 在深入技术细节前，让我们先直观感受一下这个界面带来的视觉冲击。传统的Streamlit应用，布局往往受限于其原生组件，侧边栏、主区域泾渭分
阿里开源纯前端浏览器自动化 PageAgent，[特殊字符] 浏览器自动化变天啦？

阿里开源纯前端浏览器自动化 PageAgent，[特殊字符] 浏览器自动化变天啦？

🤖 浏览器自动化变天了！从 Playwright 到 PageAgent，ZEEKLOG/掘金编辑器为何成了"拦路虎"？ 摘要：浏览器自动化正在经历从"脚本执行"到"智能代理"的范式转移。阿里开源的 PageAgent 让 AI"住进"网页，但面对 ZEEKLOG 的换行陷阱和掘金的 CodeMirror 黑盒，纯 DOM 自动化为何频频碰壁？本文深度解析技术演进与实战破局方案。 01 技术演进：三代浏览器自动化方案对比 浏览器自动化技术，正在经历一场从"机械执行"到"智能理解"的革命。
【前端】Vue3+elementui+ts，给标签设置样式属性style时，提示type check failed for prop，再次请出DeepSeek来解答

【前端】Vue3+elementui+ts，给标签设置样式属性style时，提示type check failed for prop，再次请出DeepSeek来解答

🌹欢迎来到《小5讲堂》🌹 🌹这是《前端》系列文章，每篇文章将以博主理解的角度展开讲解。🌹 🌹温馨提示：博主能力有限，理解水平有限，若有不对之处望指正！🌹 目录 * 前言 * 警告信息 * DeepSeek解答 * 问题原因 * 解决方案 * 关于 !important * 最终建议写法 * Vue小技巧 * Vue 3 实用代码小技巧 * 1. 组合式 API 技巧 * 2. 组件通信技巧 * 3. 模板技巧 * 4. 性能优化技巧 * 5. 组合式函数技巧 * 6. 生命周期技巧 * 7. 路由技巧 (Vue Router) * 8. 状态管理 (Pinia) 技巧 * 9. 调试技巧 * 文章推荐 前言 翻看了下上一篇写前端文章还是一年前，