思源笔记折腾记录 - 划选词汇快速设置属性

原理

插入按钮

在 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/siyuan-noob@1.2.6";
  
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@1.0.7?keep-names')

​​

建议如果运行没有问题也没有什么想要的新功能的话，指定版本加载会是一个好主意。

It would be a good idea to load a specified version if there are no issues with the current version and there are no desired new features.

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

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/1POT9bJr-Bb_10n8Reb1jiQ?pwd=miih 提取码: miih 复制这段内容后打开百度网盘手机 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/noob-plugin-quickset@1.0.1?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

‍