原理

插入按钮

在noobApi的支持下，往悬浮工具栏里面增加一个按钮，点击之后悬浮显示设置属性按钮。

With the support of noobApi, add a button to the floating toolbar, and when it is clicked, the button for setting properties will appear floating.

siyuan-noob - npm (npmjs.com)

你也可以把它当成noob的编辑器工具栏接口的一个实例。

You can also see it as an instance of the editor toolbar interface for noobs.

大概就像这样：

It's something like this:

import {frontEndApi, kernelApi } from "https://esm.sh/[email protected]";
  
frontEndApi.editor.toolbar.registItem({
      id: "快速设置",
      提示: "快速设置",
      图标: `#iconSettings`,
      点击回调函数: (event) => 显示设置面板(event),
    });

真实的代码可能跟这里的有些差异，但是基本上就是如此。

The actual code may have some differences from what is shown here, but it is basically the same.

移除按钮

按钮的移除其实跟按钮的引入基本上一致，你可以选择传入id或者直接传入整个配置。

The removal of a button is actually similar to its introduction, as you can choose to pass in an ID or directly pass in the entire configuration.

frontEndApi.editor.toolbar.unRegistItem({
      id: "快速设置",
      提示: "快速设置",
      图标: `#iconSettings`,
      点击回调函数: (event) => 显示设置面板(event),
    });
//just id|仅传入id
frontEndApi.editor.toolbar.unRegistItem("快速设置");

使用方式|Usage instructions

安装|Installation

1、代码片段快速引入|import with esm.sh

这个插件完全支持使用esm.sh引入，你可以使用下面的代码片段来直接引入它：

This plugin fully supports importing with esm.sh. You can use the following code snippet to import it directly:

import ('https://esm.sh/noob-plugin-quickset?keep-names')

这样引入之后,在思源的右下角帮助菜单里面就会多出一个小开关:

After introducing in this way, a small switch will be added to the help menu in the lower right corner of Sire.

同时,编辑器的工具栏按钮将会多出一项:

At the same time, the toolbar of the editor will have an additional button.

使用这个按钮就可以将现在划选的内容添加到当前块属性或者文档块属性里面了。

You can use this button to add the currently selected content to the current block or document block properties.

esm.sh是一个以esm形式分发javascript代码的全球CDN，我觉得它非常适合思源代码片段的使用场景

esm.sh is a global CDN that distributes JavaScript code in esm format, which I think is very suitable for the usage scenario of Thinker Source code snippets.

ESM>CDN

2、代码片段本地引入

把它的安装包下载到本地，解压之后找到一个index.js文件（同级还会有一个plugin.json），然后随便你通过什么方式引入它。

Download its installation package to the local machine, extract it, and locate an index.js file (there will also be a plugin.json at the same level). Then, it's up to you to import it however you like.

链接: https://pan.baidu.com/s/1Jw053sJi--YKZxU2nMZKkg?pwd=7bws 提取码: 7bws 复制这段内容后打开百度网盘手机App，操作更方便哦
--来自百度网盘超级会员v5的分享

更新|update

使用esm.sh方式引入的话，在包名之后加上版本号就可以了。

If you use the esm.sh method to import, you just need to add the version number after the package name.

'https://esm.sh/[email protected]?keep-names'

使用本地代码片段方式引入的话，覆盖本地文件就可以。

If you use the method of importing local code snippets, you can simply overwrite the local files.

卸载|uninstall

删除文件和对应的代码片段就可以。

You can just delete the file and corresponding code snippet.

如果是通过代码片段方式引入，直接删除就行。

If it was imported using code snippets, simply delete it.

获取其他分享的插件|Get other sharing plugins

为了方便大家分享代码片段，在此建议：

In order to facilitate the sharing of code snippets, it is suggested here:

使用noob-plugin-<插件名>方式发布的是noob的插件。

The package published using the noob-plugin- method are plugins of noob.

使用siyuan-snippets-<片段名>方式发布的是普通的代码片段。

The siyuan-snippets- method is used to publish regular code snippets.

到npmjs上搜索一下这两个前缀就可以了。

Just search for these two prefixes on npmjs.

建议保证你的代码片段能够编译成esm形式，这样可以方便通过esm.sh来进行分发。

Recommend ensuring that your code snippet can be compiled into ESM format so that it can be easily distributed through esm.sh.

有关滥用npm的顾虑，在查看了npmjs的相关政策之后，我认为这属于对它的合理使用，没有违反相关约束。

例如obsidian的类型定义文件就是发布在npm上的，rubick也使用它来分发插件代码。

另外虽然有收费功能，但是思源本身是一个开源共建的软件，我认为使用npm来分享思源的功能增强代码是非常合理的。

以上是我个人的看法，与思源笔记官方无关。

Regarding concerns about the abuse of npm, after reviewing the relevant policies on npmjs, I believe that this is a reasonable use of it and does not violate any relevant constraints.

For example, the type definition files for Obsidian are published on npm, and Rubick also uses it to distribute plugin code , same with vite and other projects.

Furthermore, although there are paid features, siyuan-note itself is an open source software and I think it is very reasonable to use npm to share siyuan-note's feature-enhancing code.

The above is my personal opinion and has nothing to do with the official siyuan-note.

捐助|donate

如果它对你有用可以通过爱发电来请作者喝杯咖啡。

If it's useful to you, you can buy the author a cup of coffee through afdian.com.

https://afdian.net/a/leolee9086

‍