Obsidian 插件开发文档

Appearance

On this page

HTML 元素 ​

Obsidian API 中的一些组件，比如 settings tab，会暴露 container elements（容器元素）:

ts
import { App, PluginSettingTab } from "obsidian";

class ExampleSettingTab extends PluginSettingTab {
  plugin: ExamplePlugin;

  constructor(app: App, plugin: ExamplePlugin) {
    super(app, plugin);
    this.plugin = plugin;
  }

  display(): void {
    let { containerEl } = this;

    // ...
  }
}

Container elements（容器元素） 是 HTMLElement 对象，可以在 Obsidian 中创建自定义界面。

使用 createEl() 创建 HTML 元素 ​

每个 HTMLElement，其中也包含 container element（容器元素），对外暴露出 createEl() 方法，该方法在原始元素下创建一个 HTMLElement。

下例中展示了您该如何在 container element（容器元素）中添加一个 <h1> 标签：

ts
containerEl.createEl("h1", { text: "Heading 1" });

createEl() 方法返回新元素的引用：

ts
const book = containerEl.createEl("div");
book.createEl("div", { text: "How to Take Smart Notes" });
book.createEl("small", { text: "Sönke Ahrens" });

给您的元素添加样式 ​

您可以通过在插件的根目录下添加 styles.css 文件来给您的插件添加自定义样式。现在来给上面的 book 示例添加一些样式：

css
.book {
  border: 1px solid var(--background-modifier-border);
  padding: 10px;
}

.book__title {
  font-weight: 600;
}

.book__author {
  color: var(--text-muted);
}

TIP

--background-modifier-border 以及 --text-muted 都是 Obsidian 来定义以及使用的 CSS变量。如果您将这些变量应用到您的样式中，那么即使用户使用不同的主题，您的插件看起来也会很棒！🌈

要想在 HTML 元素中使用这些样式，可以给它们设置 cls 属性：

ts
const book = containerEl.createEl("div", { cls: "book" });
book.createEl("div", { text: "How to Take Smart Notes", cls: "book__title" });
book.createEl("small", { text: "Sönke Ahrens", cls: "book__author" });

现在它已经比之前好看多了! 🎉

Styled book item

动态样式 ​

如果您想基于用户的设置或者其他值来改变元素的样式，可以使用 toggleClass 方法：

ts
element.toggleClass("danger", status === "error");