目录

obsidian插件开发(一)入门

系列 - obsidian插件开发基础
目录

Obsidian介绍

obsidian是一款支持本地存储以及多种方式云端同步的笔记软件,界面很简洁,本质上开箱即用。但是如果你想要实现更多功能,要么去插件市场找,如果没有找到合适的,那就一起来动手自己做一个插件吧!

克隆插件样本到本地

打开官网 https://github.com/obsidianmd/obsidian-sample-plugin 选择Create a new repository,这样你就会获得一份克隆

/obsidian%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91%E4%B8%80%E5%85%A5%E9%97%A8/Pasted%20image%2020231105175821.png

随便起一个名字

/obsidian%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91%E4%B8%80%E5%85%A5%E9%97%A8/Pasted%20image%2020231105175947.png

接着下载到本地

1
https://github.com/tignioj/myobsplugins.git

把他放到obsidian插件目录中

/obsidian%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91%E4%B8%80%E5%85%A5%E9%97%A8/Pasted%20image%2020231105180129.png

安装环境

进入我们刚下载好的插件目录

1
cd myobsplugins

安装依赖库

1
npm i

运行

1
npm run dev

此时打开obsidian我们就能看到插件了!

/obsidian%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91%E4%B8%80%E5%85%A5%E9%97%A8/Pasted%20image%2020231105180607.png

热加载Hot-reload

为了避免频繁开关插件,官方推荐热加载的方式来开发我们的插件,此时我们要额外下载一个插件。 https://github.com/pjeby/hot-reload

安装方式同理,把他下载到插件目录,然后重启obsidian就能手动启用了

/obsidian%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91%E4%B8%80%E5%85%A5%E9%97%A8/Pasted%20image%2020231105180955.png

编写代码

用vscode打开插件目录,编辑插件根目录下的main.ts

导入组件

1
import { Notice, Plugin } from "obsidian";

找到  async onload() 方法,添加以下代码

1
2
this.addRibbonIcon('dice', 'Greet',
() => { new Notice('Hello, world!'); });

这时候会看到编辑器左边多了一个小按钮,点击按钮就会弹出Hello world.

/obsidian%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91%E4%B8%80%E5%85%A5%E9%97%A8/Pasted%20image%2020231105181814.png
恭喜你成功入门。

参考官网

https://docs.obsidian.md/Home

相关内容

obsidian从零开始搭建hugo博客(二)快速建站
obsidian从零开始搭建hugo博客(一)环境安装
obsidian插件开发-链接的显示问题
obsidian插件开发-常用文件操作
用obsidian管理hugo文章小技巧