跳至主要內容

开发文档

开发文档

开发文档

重载插件

一般要编译成js，然后移动到插件目录，再重载插件

也可以热重载：Hot-Reload 插件

插件剖析

Plugin 类中定义了插件的生命周期，并且将操作暴露给其他插件：

import { Plugin } from "obsidian";

export default class ExamplePlugin extends Plugin {
  async onload() {
    // 配置插件所需的资源
    // 不过有时我看到其他插件写的是：override async onload(): Promise<void> {}
  }
  async onunload() {
    // 释放插件配置的任何资源
  }
}

插件生命周期、控制台打印

onload() 生命周期函数在用户激活 Obsidian 插件时触发。这将是您设置插件大部分功能的地方。

onunload() 生命周期函数在插件被禁用时触发。插件所调用的任何资源必须在这里得到释放，以防止在您的插件被禁用后对 Obsidian 的性能产生影响。

为了更好的理解这些方法会在何时被调用，当插件被加载或者被卸载时，您可以在控制台中打印一条消息。控制台是个很有用的工具，可以让开发者们监控他们代码的状态。

要想打开控制台:

  1. 通过在 Windows 和 Linux 系统中按下组合键 Ctrl+Shift+I，或者在 macOS 系统中按下组合键 Cmd-Option-I 的方式打开或关闭开发者工具。
  2. 在开发者工具的窗口中点击 Console 标签打开控制台。
import { Plugin } from "obsidian";

export default class ExamplePlugin extends Plugin {
  async onload() {
    // highlight-next-line
    console.log('loading plugin')
  }
  async onunload() {
    // highlight-next-line
    console.log('unloading plugin')
  }
}

React

在本指南中，您将配置您的插件以使用 React。假设您已经拥有一个使用 custom view 的插件，并且想使用 React 来改写它。

虽然您并不需要使用单独的框架来开发一个插件，以下是您想使用 React 的几点原因：

  • 您有使用 React 的经验，并且想使用熟悉的技术。
  • 您想在插件中重复使用现有的 React 组件。
  • 您的插件需要复杂的状态管理，或者有使用常规 HTML element 无法实现的其他功能。

配置您的插件

  1. 将 React 添加到依赖中:
    npm install react react-dom
  2. 添加 React 的类型声明:
    npm install --save-dev @types/react @types/react-dom
  3. 在 tsconfig.json 的 compilerOptions 对象中开启 JSX 支持：
    tsconfig.json
    {
  "compilerOptions": {
    "jsx": "react"
  }
}

创建React组件

……

Svelte

该指南解释了如何配置您的插件以使用 Svelte, 一个轻量级的可用于替换诸如 React 以及 Vue 这些的框架。

Svelte 是围绕一个可以预编译您的代码为普通 Javascript 的编辑器构建的，这意味着在运行时不需要加载任何类库。这也意味着不需要使用虚拟 DOM 去追踪状态的变化，允许您的插件以最小的额外开销运行。

如果您想学习到更多关于 Svelte 的只是，以及如何去使用它，可以查阅 tutorial 以及 documentation 这两篇文档。

本指南假定您已经阅读完创建您的第一个插件 这篇文档。

配置您的插件

要想构建一个 Svelte 应用，您需要去安装依赖以及配置您的插件以编译使用 Svelte 编写的代码。

  1. 将 Svelte 添加到您插件的依赖中：

    npm

    npm install --save-dev svelte svelte-preprocess @tsconfig/svelte esbuild-svelte

    yarn

    yarn add --dev svelte svelte-preprocess @tsconfig/svelte esbuild-svelte

  2. 修改 tsconfig.json 文件以为常见的 Svelte 问题启用额外的类型检查。types 属性非常关键，它可以让 Typescript 识别出 .svelte 文件。
    并将inlineSourceMap内容从 tsconfig.json 中移除，该配置与 Svelte 的配置相冲突。

    {
    "extends": "@tsconfig/svelte/tsconfig.json",	// 增加
        "compilerOptions": {
            "types": ["svelte", "node"],			// 增加
            // "inlineSourceMap": true,				// 去除
        }
}

  3. 在 esbuild.config.mjs 文件中引入以下内容：（Import和将 Svelte 添加到插件列表中）

    
import esbuildSvelte from "esbuild-svelte";			// 增加
import sveltePreprocess from "svelte-preprocess";	// 增加

esbuild.build({
    plugins: [										// 增加
        esbuildSvelte({
            compilerOptions: { css: true },
            preprocess: sveltePreprocess(),
        }),
    ],
    ...
}).catch(() => process.exit(1));

创建并加载一个 Svelte 组件

在插件的根目录下，创建一个名为 Component.svelte 的新文件

<script lang="ts">
  export let variable: number;
</script>

<div class="number">
  <span>My number is {variable}!</span>
</div>

<style>
  .number {
    color: red;
  }
</style>

要想使用 Svelte 组件，需要在一个即存的 HTML element. 中加载它。比如，如果在 Obsidian 的自定义 ItemView 中进行加载：

import { ItemView, WorkspaceLeaf } from "obsidian";

import Component from "./Component.svelte";			// Svelte 组件文件

export const VIEW_TYPE_EXAMPLE = "example-view";

export class ExampleView extends ItemView {
  component: Component;

  constructor(leaf: WorkspaceLeaf) {
    super(leaf);
  }

  getViewType() {
    return VIEW_TYPE_EXAMPLE;
  }

  getDisplayText() {
    return "Example view";
  }

  async onOpen() {
    this.component = new Component({				// 创建组件
      target: this.contentEl,							// 需要创建在哪
      props: {											// 组件参数
        variable: 1
      }
    });
  }

  async onClose() {
    this.component.$destroy();						// 销毁组件
  }
}

Vue

文档的该节内容是新增的，Vue弄起来也有点麻烦

第一步：下载插件开发模板

……

载到本地。

  1. 跳转到您刚才创建的代码仓库。

  2. 点击 Code ，并复制代码仓库地址。

  3. 打开终端，进入您本地 Obsidian 仓库插件所在的文件夹。

    cd path/to/vault/.obsidian/plugins

  4. 将源码下载到该文件夹下。

    git clone https://github.com/your-username/obsidian-instant-coffee.git

第二步：安装依赖

  1. 打开终端，进入您的插件文件夹。

    cd path/to/vault/.obsidian/plugins/obsidian-instant-coffee

  2. 安装依赖。

    npm

    npm install

    yarn

    npm install -D naive-ui

第三步：修改插件的 manifest 配置

可以参照 创建您的第一个插件 - 修改插件的 manifest 配置 。

第四步：查看 src 文件夹

第五步：编写 Vue 组件

第六步：挂载 Vue 组件

第七步：编译

链接到当前文件 0
没有文件链接到当前文件