挂件

[88250]

概述

挂件是思源内核伺服的静态网页，它通过 API 存取数据，通过 <iframe> 进行渲染展现。

使用

挂件通过挂件集市安装，安装后挂件将被放置到工作空间/data/widgets 文件夹下。在编辑器中使用斜杆菜单触发调用搜索，选择需要的挂件后改挂件就会以挂件块的形式插入到文档中。

开发

开发者可以使用自己熟悉的框架（比如 React 或者 Vue.js 等）来开发挂件，示例项目。

通过内核提供的 API 来读取数据，比如通过 SQL 查询接口查询内容块：

POST /api/query/sql

{
     "stmt": "SELECT * FROM blocks WHERE content LIKE'%content%' LIMIT 7"
}

挂件可以通过属性来保存数据：

POST /api/attr/setBlockAttrs

{
  "id": "块 ID",
  "attrs": {
    "custom-attr1": "value1",
    "custom-attr2": "value2",
  }
}

如果有大量数据需要存储，建议将这些数据通过上传资源文件 API 上传，然后将返回的资源文件地址通过设置属性接口（属性名使用 data-assets）保存在挂件自身的属性上。使用 data-assets 这个固定的属性名的目的是为了防止清理未引用资源时误删挂件数据文件。

[mohuishou]

挂件块如何获取到自己的 id 信息？

[88250]

@mohuishou 试试这个 self.frameElement.parentElement.parentElement.getAttribute('data-node-id')。对了，我能问一下获取 id 的使用场景是什么吗？

[mohuishou]

@mohuishou 试试这个 self.frameElement.parentElement.parentElement.getAttribute('data-node-id')。对了，我能问一下获取 id 的使用场景是什么吗？

想要拿到的挂件块上存储的数据，用来获取一些配置，还有上面的更新挂件块数据不也要 id 信息么

[88250]

@mohuishou 哦哦，了解了，后面我们会考虑提供 JS 接口来方便获取挂件块自己的 ID 还有适当封装一下内核接口。

[2234839]

希望可以单独提供一个查询自身 ID 的 api , 在直接启动一个 server 开发的时候由于跨域限制无法通过上面的方法获取自身 id

[2234839]

挂件快的高度问题或许可以通过类似这样的方案来解决

[bestv5]

挂件能不能在侧边栏添加，或者将来考不考虑增加在侧边栏（例如标签树）增加打开挂件。

[88250]

@bestv5 挂件不是插件……插件将来应该会单独设计。

[Zuoqiu-Yingyi]

能否添加一个替换指定资源文件的API, 用于挂件中关联文件的重命名/更新呀?

[88250]

能否添加一个替换指定资源文件的API, 用于挂件中关联文件的重命名/更新呀?

嗯，请关注 #3286

[Zuoqiu-Yingyi]

目前(v1.6.3)挂件是不是使用了静态的套接字呀, 我在本地中插入如下的挂件块

{
	"ID": "20211122223251-5d38hvt",
	"Type": "NodeWidget",
	"Data": "\u003ciframe src=\"http://127.0.0.1:6806/widgets/url-scheme\" data-src=\"http://127.0.0.1:6806/widgets/url-scheme\" data-subtype=\"widget\" border=\"0\" frameborder=\"no\" framespacing=\"0\" allowfullscreen=\"true\"\u003e\u003c/iframe\u003e",
	"Properties": {
		"id": "20211122223251-5d38hvt",
		"updated": "20211122223251"
	}
}

在局域网的其他主机(192.168.1.*)中就无法访问了, 依旧是向 http://127.0.0.1:6806/widgets/url-scheme 发起请求

[88250]

@Zuoqiu-Yingyi 是的，写死的 127.0.0.1，这个后期可能会加一个域名解析到 127 来解决。

[Zuoqiu-Yingyi]

是的，写死的 127.0.0.1，这个后期可能会加一个域名解析到 127 来解决。

@88250 D大, 这个是不是该提上日程了, 希望和 iframe src 设置为 widgets/xxx 一样处理, 刚刚发现 localhost:6806 和 127.0.0.1:6806 之间也有跨域问题😂

[88250]

域名解析方案需要联网，这里可能有点问题。

[Zuoqiu-Yingyi]

域名解析方案需要联网，这里可能有点问题。

@88250 D 大, 使用相对于 Web 服务根路径的绝对路径如何, 例如 src="/widgets/url-scheme" data-src="/widgets/url-scheme", 经过测试, 可以满足要求

[88250]

@Zuoqiu-Yingyi 那就先不考虑域名解析了，谢谢。

[2234839]

如果有大量数据需要存储，建议将这些数据通过上传资源文件 API 上传，然后将返回的资源文件地址通过设置属性接口（属性名使用 data-assets）保存在挂件自身的属性上。使用 data-assets 这个固定的属性名的目的是为了防止清理未引用资源时误删挂件数据文件。

但这样一个挂件只能关联一个资源文件，我想要关联多个资源文件该如何实现
可否让 data-assets 开头的属性都是关联的

[88250]

@2234839 能说下场景吗？

[2234839]

@2234839 能说下场景吗？

例如我正在实现的OceanPress插件，用于对用户文档中的挂件生成快照

OceanPress利用这个快照来实现生成的静态网站中也能查看到挂件的效果。

那么这个快照就是与该挂件块高度相关的，我想将其关联到该挂件块的 data-assets 更利于用户管理，他删除掉挂件后也可以清理该快照

但挂件本身也是需要使用 data-assets 的，所以我想一个挂件关联多个资源

[88250]

这个属性主要是给挂件自己用的，外部变更数据的话可能会出问题。建议还是你单独维护挂件的关联快照，数据可以通过 File API 存放在其他地方（比如 storage 下），这样就不受清理资源的影响了。

对于用户删除挂件的情况，可以搞一个类似 清理未引用资源 的功能，空间占用不大的话我觉得前期可以暂时不用考虑。

[2234839]

这个属性主要是给挂件自己用的，外部变更数据的话可能会出问题。建议还是你单独维护挂件的关联快照，数据可以通过 File API 存放在其他地方（比如 storage 下），这样就不受清理资源的影响了。

对于用户删除挂件的情况，可以搞一个类似 清理未引用资源 的功能，空间占用不大的话我觉得前期可以暂时不用考虑。

好吧，自行管理问题到是不大，想偷点懒😁