Obsidian插件安装与开发

news2024/12/23 14:45:26

大概背景

事情的起因还是因为做笔记，我喜欢利用插件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/imageDemo

const 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/imageName
	let 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，需要手动点击清除，会弹出清除文件的日志。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1990943.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ESXI加入VMware现有集群提示常规性错误

ESXI加入VMware现有集群提示常规性错误

集群内有vSphere6.5和6.7的版本&#xff0c;都开启了EVC 这台老服务器是DELL R710添加时报错&#xff0c;网上查了些资料说要重装ESXI或者关闭EVC等等 最终解决方法是&#xff0c;给这台ESXI配置一个NTP服务器&#xff0c;同步系统时间&#xff0c;之后即可正常加入集群 往期文…
阅读更多...
【安卓】文件存储

【安卓】文件存储

文章目录 将数据存储到文件中从文件中读取数据 文件存储是Android中最基本的数据存储方式&#xff0c;它不对存储的内容进行任何格式化处理&#xff0c;所有数据都是原封不动地保存到文件当中的&#xff0c;因而它比较适合存储一些简单的文本数据或二进制数据。如果你想使用文件…
阅读更多...
QPaintEvent

QPaintEvent

阅读更多...
家庭教育—情绪教育：塑造孩子情绪智力的金钥匙

家庭教育—情绪教育：塑造孩子情绪智力的金钥匙

文章目录 1. 背景介绍2. “1310镇静”方法的介绍3. 方法的科学依据4. 实施步骤5. 总结 1. 背景介绍 在快节奏的现代生活中&#xff0c;儿童面临着越来越多的情绪挑战。情绪教育作为素质教育的重要组成部分&#xff0c;越来越受到家长和教育者的重视。情绪教育不仅关乎儿童的心…
阅读更多...
第100+20步 ChatGPT学习：R实现Lasso回归

第100+20步 ChatGPT学习：R实现Lasso回归

基于R 4.2.2版本演示 一、写在前面 花了好几期分享了使用R语言实现机器学习分类&#xff0c;基本把常见模型都讲完了。 最后就以Lasso回归收尾得了。 Lasso回归应该很出名了&#xff0c;做特征变量筛选的&#xff0c;因此&#xff0c;不过多介绍。 二、R代码实现Lasso回归 …
阅读更多...
OceanBase V4.2特性解析：MySQL模式下GIS空间表达式的场景及能力解析

OceanBase V4.2特性解析：MySQL模式下GIS空间表达式的场景及能力解析

1. 背景 1.1. OceanBase Mysql gis空间表达式的应用场景及能力 在OceanBase 4.1版本中&#xff0c;mysql模式下支持了gis数据类型以及部分空间对象相关的表达式&#xff0c;随着客户使用空间数据的需求日益增长&#xff0c;需要快速地补齐空间数据存储和计算分析的能力&#…
阅读更多...
简单分享下Python进程

简单分享下Python进程

1. 单进程与多进程 理论讲解&#xff1a; 进程是操作系统中资源分配的基本单位&#xff0c;每个进程都有独立的内存空间。 多进程允许同时运行多个进程&#xff0c;提高CPU利用率和程序响应速度。 示例代码&#xff1a; import os print("当前进程ID:", os.getp…
阅读更多...
【适配器模式】设计模式: 穿越接口的时空隧道(架起接口间的桥梁)

【适配器模式】设计模式: 穿越接口的时空隧道(架起接口间的桥梁)

文章目录 Java 设计模式之适配器模式&#xff1a;理论与实践1. 引言1.1 结构型模式介绍1.2 为什么需要适配器模式&#xff1f; 2. 适配器模式概述2.1 定义2.2 关键概念2.3 适配器模式的类型 3. 适配器模式的参与者4. 适配器模式的工作原理4.1 类适配器模式的工作流程4.2 对象适…
阅读更多...
CSS基础 - CSS3

CSS基础 - CSS3

目录 A. 简介 B. 基础用法 C. 总结 A. 简介 CSS3 是 CSS&#xff08;层叠样式表&#xff09;技术的升级版本。 一、新特性概述 选择器增强 CSS3 引入了更多强大的选择器&#xff0c;使得开发者能够更精确地选择和样式化网页元素。例如&#xff0c;属性选择器可以根据元素…
阅读更多...
Golang | Leetcode Golang题解之第329题矩阵中的最长递增路径

Golang | Leetcode Golang题解之第329题矩阵中的最长递增路径

题目&#xff1a; 题解&#xff1a; var (dirs [][]int{[]int{-1, 0}, []int{1, 0}, []int{0, -1}, []int{0, 1}}rows, columns int )func longestIncreasingPath(matrix [][]int) int {if len(matrix) 0 || len(matrix[0]) 0 {return 0}rows, columns len(matrix), len(m…
阅读更多...
仓颉编程入门 -- 循环语句详解

仓颉编程入门 -- 循环语句详解

仓颉编程入门 – 循环语句 一 . while 表达式 while 表达式的基本形式为&#xff1a; while (条件) {循环体 }注意事项 : 其中“条件”是布尔类型表达式&#xff0c;“循环体”是一个代码块。while 表达式将按如下规则执行&#xff1a; 计算“条件”表达式&#xff0c;如果…
阅读更多...
计算机毕业设计选题推荐-电缆行业生产管理系统-Java/Python项目实战

计算机毕业设计选题推荐-电缆行业生产管理系统-Java/Python项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…
阅读更多...
LabVIEW软件开发的未来是什么？

LabVIEW软件开发的未来是什么？

LabVIEW软件开发的未来展望可以从以下几个方面进行分析&#xff1a; 1. 与硬件集成的进一步增强 LabVIEW一贯以其与硬件的紧密集成而著称&#xff0c;未来这一优势将进一步得到强化。随着物联网&#xff08;IoT&#xff09;设备、工业4.0和智能制造的发展&#xff0c;LabVIEW将…
阅读更多...
Mipi SoundWire Spec 详解4.2~4.3

Mipi SoundWire Spec 详解4.2~4.3

目录 4.2 低层特性 4.2.1 物理接口 4.2.1.1 信号拓扑 4.2.1.2 多数据通道 4.2.1.3 高性能PHY 4.2.2 数据编码 4.2.3 物理信号值和逻辑信号值的术语 4.2.4 对开发和测试低级功能的支持 4.3 控制特性 4.3.1 比特流与帧结构 4.3.1.1 控制字与带宽权衡 4.3.2 同步 4.3.…
阅读更多...
今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 8月8日，星期四

今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 8月8日，星期四

每天一分钟&#xff0c;知晓天下事&#xff01; 2024年8月8日 星期四 农历七月初五 1、 财政部预拨4.65亿元资金支持辽宁、吉林等7省&#xff08;市&#xff09;开展应急抢险救灾工作。 2、 2024年“三区”人才支持计划发布&#xff1a;全国将选派15952名教师赴“三区”。 3…
阅读更多...
什么是三维坐标系？

什么是三维坐标系？

在研究向量和高级微积分主题时&#xff0c;了解 3D 坐标系非常重要。过去&#xff0c;我们一直在处理平面和矩形坐标。这一次&#xff0c;我们将研究三维坐标系的组成部分和约定。 3D 坐标系使我们能够表示包含三个相互垂直轴的空间中的一个量。通过 3D 坐标系统&#xff0c;我…
阅读更多...
计算机网络——网络层（多协议标签交换MPLS、软件定义网络SDN）

计算机网络——网络层（多协议标签交换MPLS、软件定义网络SDN）

多协议标签交换MPLS 多协议标签交换MPLS&#xff08;multiProtocal Label Switching&#xff09;&#xff1a;“多协议”表示在MPLS的上层可以采用多种协议。 MPLS利用面向连接技术&#xff0c;使每个分组携带一个叫作标签的小整数&#xff08;这叫作打上标签&#xff09;。当分…
阅读更多...
Linux下终极下载管理器:uGet and aria2

Linux下终极下载管理器:uGet and aria2

你是否曾在火狐浏览器中点击过下载链接&#xff0c;然后连接中断&#xff0c;不得不从头开始重新下载文件&#xff1f; 这就是 uGet 下载管理器的用武之地。 1&#xff09;uGet 是一款开源的轻量级下载管理器&#xff0c;适用于 Linux、BSD、Android 和 Windows。有了 uGet&a…
阅读更多...
Github 2024-08-08 开源项目日报Top10

Github 2024-08-08 开源项目日报Top10

根据Github Trendings的统计，今日(2024-08-08统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量TypeScript项目5JavaScript项目3Python项目2C#项目1C++项目1Go项目1免费编程学习平台：freeCodeCamp.org 创建周期：3302 天开发语言：TypeScri…
阅读更多...
Linux-入门-02

Linux-入门-02

上节我们讲了如何安装虚拟机,本节课讲一些linux的常用命令,首先我们需要做一些配置,我们的centos的镜像是最小版安装,里面什么也没有,所以我们的linux是不能进行联网的,接下来我们就来一步一步联网 1、配置网络 首先我们需要先使用命令查看ip地址,linux中一切皆文件,只能使用命…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023