Noob-plugin-morebackground NPM

功能

就是用来增加一些头图按钮,按一按就换一张,也算是

https://www.npmjs.com/package/siyuan-noob

的示例插件

原理

esm.sh引入

noob的前端api和后端对接模块是完全可以脱离其他部分运行的,在这个插件的头部的这行代码

import { Plugin, frontEndApi, kernelApi } from "https://esm.sh/siyuan-noob@1.1.12";

直接从esm.sh的在线cdn引入了noobAPi,这是一个思源前端api的pollyfill,用来更方便大家是实现一些功能.

esm.sh是一个在线代码分发cdn,以esm(javascript模块)的形式来分发程序代码.

所以它其实非常适合用在思源的代码片段里面(默认禁用了fs模块的).

当然你也可以手动下载编译之后的代码保存在本地来使用.

noob的核心服务内置了一个略加修改的esm.sh(需要node支持才能用,且只能通过本地地址访问),再配合vite,就能够实现比较方便的代码片段书写了.

生命周期

本来是不想在noob的插件类里面引入生命周期的,但是想了想还是弄一下算了.

onMounted函数

在被外部(noob的加载器)加载时,加载器会直接实例化插件类并调用onMounted函数.

但是在没有加载器时,就需要插件自己动手丰衣足食了.

所以每个插件类提供了一个便捷方法叫做buildSelfSwitsh,你可以像在这个插件里面一样,调用它来生成一个用来控制自己的小开关插入到思源的右下角帮助菜单里,其实还是用来调用onMouted函数的.

你可以自行决定要不要调用这个方法.

onUnmounted函数

这个函数会在插件被关闭时被自动调用.

你可以看到它主要是用来移除插件自身造成的副作用的.

需要注意的是离开noob-core的环境之后,插件需要自行管理自己是否在被加载时初始化,这个插件并没有处理这个过程,实际上你可以自行通过读写本地文件的形式实现它.

其他

善用人工智能可能有惊喜哦

下面这个是思源的内置ai(其实是外置的GPT)生成的代码,作用是从必应拉取随机图片,你可以把它加到题图按钮组里面.

const apiKey = 'Your_API_Key'; // 替换为自己的API Key

function getRandomBingImage() {
  const url = `https://api.cognitive.microsoft.com/bing/v7.0/images/search?q=random&count=1`;
  return fetch(url, {
    headers: {
      'Ocp-Apim-Subscription-Key': apiKey,
    },
  })
    .then(response => response.json())
    .then(data => data?.value?.[0]?.contentUrl);
}

// 调用函数获取图片url
getRandomBingImage().then(url => console.log(url));