当前位置： 首页 > news >正文

Obsidian插件安装与开发

news 来源：原创 2024/9/21 2:48:17

大概背景

事情的起因还是因为做笔记，我喜欢利用插件Obsidian Git自动同步笔记到Gitee，写md文档有个问题就是关于图片如何存储。

我个人习惯是将所有图片都保存到指定的文件夹下，如图👇

在这里插入图片描述

由于Obsidian对粘贴图片默认格式为这样的：![[Pasted image 20240802143131.png]]这是Obsidian特有的，并不对md文档通用，于是在码云上在线浏览，图片将无法展示。

在这里插入图片描述

于是就迫切的希望有一种插件，能够将粘贴得图片进行格式化，比如![image-demo](./static/image-demo.png)这种markdown通用语法。

实际上，还真有：Image Classify Paste，然而此插件并没有完成全部的功能，于是有了下面的插件开发正文。

在这里插入图片描述

插件安装

Obsidian的插件和其他应用程序略有差别，每一个Vault仓库对应了自己的所属插件，比如我新建一个Vault仓库，那么这个仓库默认是没有插件的。

关于vault的概念，对应本地的一个文件夹，为obsidian中的顶级目录。

在这里插入图片描述

可以看到目录中存在一个隐藏文件.obsidian/plugins，实际上这就是插件目录，每个vault仓库都有自己的插件。通过在Obsidian应用程序中安装插件（设置 > 第三方插件 > 插件市场浏览安装），其实就是下载插件文件夹到此目录下。

由于各种原因，国内有时候无法正常访问，应该说大部份时候都无法浏览插件和安装插件，需要git加速，这里推荐使用dev-sidecar。

也可以通过插件obsidian-proxy-github实现，但是由于长时间无人维护，内置的一些加速网址其实已经不好用了，或者说完全用不了了，因此并不推荐。

安装方式

Obsidian内直接安装

前提是你已经可以Git加速正常访问插件市场。

在这里插入图片描述

直接下载文件安装

无论你从哪里找到的资源，通常来讲都是github，你只需要下载下来解压缩，然后将此插件目录放到你的vault仓库下的.obsidian/plugin目录下即可。

Mac通过Command + Shift + .在访达中查看隐藏文件
在这里插入图片描述

插件启动和设置

无论哪种方式安装的插件，最后都需要启用（默认是不启用的）。

在这里插入图片描述

左下角第三方插件可进行设置。

插件开发

插件本质是JavaScript，所以进行Obsidian plugin的开发其实就是js语言的使用。

官方有很好的指导手册：Obsidian Docs

插件目录结构

正常插件目录结构如下：

在这里插入图片描述

main.js

核心部分，所有插件功能都在这里实现。

快速入门参考官方指导：# Obsidian Developer Docs

在这里插入图片描述

manifest.json

插件的描述信息，这些信息将在社区插件市场浏览展示用。

{  "id": "image-classify-paste",  "name": "Image Classify Paste",  "version": "0.1.4",  "minAppVersion": "0.15.0",  "description": "paste your image like typora, the image link name not `![[Paste xxx]]` but `![some name](relative-directory/xxx.png)`with a relative directory. 类比于typora的方式粘贴图片到本地，存放在以当前md文档命名的文件夹里。",  "author": "tianfx",  "authorUrl": "https://github.com/ostoe",  "isDesktopOnly": true  
}

社区插件市场
在这里插入图片描述

data.json

在设置插件功能后，会自动生成此文件，用于保存用户的设置，比如我的设置👇

在这里插入图片描述

生成的data.json

{  "defaultSetting": "default",  "imageNamePattern": "{{fileName}}",  "dupNumberAtStart": false,  "dupNumberDelimiter": "-",  "dupNumberAlways": false,  "autoRename": false,  "handleAllAttachments": false,  "excludeExtensionPattern": "",  "disableRenameNotice": false,  "IsShowCustomPath": true,  "PasteImageOption": "tocustom",  "CustomPath": "static",  "IsEscapeUriPath": true,  "IsAddRelativePath": true,  "IsApplyLocalImage": true,  "IsApplyNetworklImage": true,  "IsRelativePath": true  
}

可以看到CustomPath的目录为我指定的static。

插件调试debug

Obsidian提供了内置的调试工具，可以很好的支持插件开发调试，通过快捷键Windows用户Win + Shift + I或者Mac用户Command + Shift + I。但也可能是其他的，比如我的Command + Option + I，无论哪种，最通用的是通过View菜单栏查看。

在这里插入图片描述

打开后调试窗口如下👇

在这里插入图片描述

在Console输入app.plugins.plugins['Plugin ID']就可以获取到插件对象了，也就是main.js中定义的变量和函数，其中Plugin ID为定义在manifest.json中的ID。

热更新插件

每次修改main.js要想在console控制台看到效果都需要进行插件的停用和启用（需要程序重新加载文件），可以利用插件hot-reload进行热更新，实现每次修改自动更新插件的目的，关于此插件的安装只能通过github网站下载安装，插件市场无此插件。

在这里插入图片描述

此插件有个特别注意的点就是，需要在进行热更新的插件目录添加.hotreload文件。比如我的插件目录为myPlugin,具体存放在MyVault/.obsidian/plugins/myPlugin，那么在myPlugin目录下就需要存在文件.hotreload。

在这里插入图片描述

这样每次修改内容都可以即时的在obsidian内置的开发工具中调试查看内容了。

修改插件

如果你也跟我一样有这样的需求，将粘贴的图片格式化Markdown标准语法格式，那么下面对插件Image Classify Paste的修改同样也适合你。

前提，在设置中进行自定义，并且图片存在在指定目录下。

在这里插入图片描述

关键方法入口
在这里插入图片描述

getRenameFilePath(mdFile, filename)方法参数如下：

参数mdFile
在这里插入图片描述

其实就是当前的md文档对象。

参数fileName

就是当前的md文档的文件名。

修改部分

在这里插入图片描述

在getRenameFilePath(mdFile, filename)方法内修改：

// 改动1: 这一行实际没有用到，注释了
// const linkName = this.settings.IsEscapeUriPath ? encodeURI(path.join(dirPath, newFilename)) : path.join(dirPath, newFilename);// 改动2: 新增相对路径生成方法 path.relateJoin()
//添加相对路径，比如dirPath为：/static,mdFile为：/a/b/c/demo.md newFileName为：imageDemo,则输出==> ../../../static/imageDemoconst IsAddRelativePath = this.settings.IsAddRelativePath ? path.relateJoin(dirPath,mdFile,newFilename) : "";const newLinkText = "![" + newFilename + "](" + IsAddRelativePath +")";

这里进行了IsAddRelativePath判断是否进行相对路径引用，但是原作者并没有实现此功能，这里做了变动。

relateJoin()

/**
* 返回相对目录
*
* 场景1：mdFile为顶级目录
* mdFile
* dirPath: a/b
* a
* 	b
* 返回 ==> ./dirPath/imageName 即 ./a/b/imageName
*
* 场景2: mdFile和dirPath同级目录（非顶级同级）
* mdFile:a/mdFile
* dirPath:a/b
* a
* 	mdFile
* 	b
* 返回 ==> ./b/imageName
*
* 场景3: mdFile在深层目录
* mdFile:a/mdFile
* dirPath:b/c
* a
* 	mdFile
* b
* 	c
* 返回 ==> ../dirPath/imageName 即 ../b/c/imageName
*
* @param dirPath 图片存储路径
* @param mdFile 当前操作的MD文件
* @param imageName 图片名称
* @returns {string} 图片相对路径引用
*/relateJoin(dirPath,mdFile,imageName){// 如果为顶级mdFile直接返回 ./if(mdFile.parent.path == "/"){return "./" + dirPath + "/" + imageName;}// 如果为同级目录,比如 a/b/static a/b/mdFile ==> ./static/imageNamelet mdFileParts = mdFile.parent.path.split("/")let dirPathParts = dirPath.split("/");// 比如 dirPath: a/b/static ==> 得到 a/b 父目录数组const dirPathLastName = dirPathParts.pop();if(mdFileParts.length == dirPathParts.length){let flag = true;for(let i = 0; i< mdFileParts.length; i++){if(mdFileParts[i] != dirPathParts[i]){flag = false;}}if(flag){return "./" + dirPathLastName + "/" + imageName;}}// 其他情况,mdFile需要../到父目录层级let prefix = ""for (let i = 0; i < mdFileParts.length; i++) {prefix += "../"}return prefix + dirPath + "/" + imageName;
},

将此方法添加到path变量中即可。

如果出现其他问题也可按照上面的插件开发内容自行调试。

插件推荐

obsidian git

将笔记内容自动同步到远程仓库（github或者gitee）都可以。

安装教程参考：# 【Obsidian】【Git】使用gitee同步/保存obsidian笔记

在这里插入图片描述

Image Classify Paste

如果你也和我一样想要同步的笔记能够在线查看图片，那么大概率也会存在我这种问题，利用这个插件进行粘贴图片的格式化。

Clear Unused Images

从名字就知道，用来清除没有用到的图片，比如我粘贴一张图片，默认就会保存到/static目录，但是发现图片有问题，于是重新截屏了一张，但是原来的图片并不会删除，也就是无效文件的存在。这个插件会在侧边栏生成一个Ribbon，需要手动点击清除，会弹出清除文件的日志。

在这里插入图片描述

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Thinkphp框架漏洞（附修复方法）
  • 【QT】鼠标按键事件 - QMouseEvent QKeyEvent
  • 在psotgres中的gist和gin索引介绍
  • RM小陀螺技术经验与思考
  • 无法访问jakarta.servlet.http.HttpServletRequest
  • 基于QT实现的简易WPS（已开源）
  • HCIP笔记4-OSPF(2)
  • solidity 数学和密码学函数
  • HarmonyOS应用开发知识地图
  • 清空QWidget
  • 回归预测|基于雪消融优化极端梯度提升树的数据回归预测Matlab程序SAO-XGBoost多特征输入单输出 含基础模型
  • 常用API（三）
  • 网络编程 开篇
  • Java数据结构 | 二叉树基础及基本操作
  • 【Web开发手礼】探索Web开发的秘密（十四）-Vue2（1）Node.js的安装、Vue入门
  • JavaScript-如何实现克隆(clone)函数
  • 【译】理解JavaScript：new 关键字
  • conda常用的命令
  • download使用浅析
  • Nacos系列：Nacos的Java SDK使用
  • Shadow DOM 内部构造及如何构建独立组件
  • SpingCloudBus整合RabbitMQ
  • 第13期 DApp 榜单 ：来，吃我这波安利
  • 将 Measurements 和 Units 应用到物理学
  • 聊聊hikari连接池的leakDetectionThreshold
  • 算法系列——算法入门之递归分而治之思想的实现
  • 微信公众号开发小记——5.python微信红包
  • 译自由幺半群
  • elasticsearch-head插件安装
  • Prometheus VS InfluxDB
  • 宾利慕尚创始人典藏版国内首秀，2025年前实现全系车型电动化 | 2019上海车展 ...
  • ### RabbitMQ五种工作模式：
  • #[Composer学习笔记]Part1:安装composer并通过composer创建一个项目
  • #APPINVENTOR学习记录
  • #WEB前端（HTML属性）
  • （2.2w字）前端单元测试之Jest详解篇
  • （Arcgis）Python编程批量将HDF5文件转换为TIFF格式并应用地理转换和投影信息
  • (Forward) Music Player: From UI Proposal to Code
  • （超简单）使用vuepress搭建自己的博客并部署到github pages上
  • （二）七种元启发算法（DBO、LO、SWO、COA、LSO、KOA、GRO）求解无人机路径规划MATLAB
  • （七）Appdesigner-初步入门及常用组件的使用方法说明
  • (三分钟了解debug)SLAM研究方向-Debug总结
  • （四）JPA - JQPL 实现增删改查
  • (一)、软硬件全开源智能手表，与手机互联，标配多表盘，功能丰富(ZSWatch-Zephyr)
  • （一）spring cloud微服务分布式云架构 - Spring Cloud简介
  • (转) 深度模型优化性能 调参
  • (转)Linq学习笔记
  • (转)Windows2003安全设置/维护
  • *_zh_CN.properties 国际化资源文件 struts 防乱码等
  • .babyk勒索病毒解析：恶意更新如何威胁您的数据安全
  • .bat批处理（三）：变量声明、设置、拼接、截取
  • .gitignore不生效的解决方案
  • .NET 3.0 Framework已经被添加到WindowUpdate
  • .net core docker部署教程和细节问题
  • .net core webapi 大文件上传到wwwroot文件夹