小部件基础知识

本指南将引导您完成在Trilium中创建基本控件。通过执行这些步骤，您将学习如何构建与用户交互的简单 UI 元素。

第 1 步：基本小部件结构

首先，我们将尽可能创建最基本的小部件。这是一个简单的例子：

class MyWidget extends api.BasicWidget {
    get position() { return 1; }
    get parentWidget() { return "left-pane"; }

    doRender() {
        this.$widget = $("");
        return this.$widget;
    }
}

module.exports = new MyWidget();

要实现此小部件，请执行以下作：

在 Trilium 中创建一个新笔记并粘贴到上面的代码中。JS Frontend
将属性分配给笔记。#widget
重新启动 Trilium 或重新加载窗口。

要验证小部件是否正常工作，请打开开发人员工具（ + + ）并运行。如果找到该元素，则小部件正常运行。如果返回，请仔细检查笔记是否具有属性。CmdShiftIdocument.querySelector("#my-widget")undefined#widget

第 2 步：添加 UI 元素

接下来，让我们通过添加一个按钮来改进小部件。

const template = ``;

class MyWidget extends api.BasicWidget {
    get position() {return 1;}
    get parentWidget() {return "left-pane"}

    doRender() {
        this.$widget = $(template);
        return this.$widget;
    }
}

module.exports = new MyWidget();

进行此更改后，重新加载 Trilium。您现在应该在左窗格的左上角看到一个按钮。

第 3 步：设置控件样式

为了使按钮更具视觉吸引力并正确定位，我们将应用一些自定义样式。Trilium 包含 Box Icons，我们将使用它将按钮文本替换为图标。例如图标。bx bxs-magic-wand

这是更新后的模板：

const template = ``;

接下来，我们将使用 CSS 调整按钮的位置：

class MyWidget extends api.BasicWidget {
    get position() { return 1; }
    get parentWidget() { return "left-pane"; }

    doRender() {
        this.$widget = $(template);
        this.cssBlock(`#my-widget {
            position: absolute;
            bottom: 40px;
            left: 60px;
            z-index: 1;
        }`);
        return this.$widget;
    }
}

module.exports = new MyWidget();

重新加载 Trilium 后，该按钮现在应该出现在左侧窗格的左下角，与其他作按钮一起出现。

第 4 步：添加用户交互

让我们通过在单击按钮时显示消息来使按钮具有交互性。我们将使用脚本 API 中的方法。api.showMessage

class MyWidget extends api.BasicWidget {
    get position() { return 1; }
    get parentWidget() { return "left-pane"; }

    doRender() {
        this.$widget = $(template);
        this.cssBlock(`#my-widget {
            position: absolute;
            bottom: 40px;
            left: 60px;
            z-index: 1;
        }`);
        this.$widget.find("button").on("click", () => api.showMessage("Hello World!"));
        return this.$widget;
    }
}

module.exports = new MyWidget();

最后一次重新加载应用程序。当您单击该按钮时，应该会出现一条“Hello World！”消息，确认您的小部件功能齐全。

“您的支持是我持续分享的动力”

微信

支付宝