npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

noob-plugin-morebackground

v1.0.8

Published

noob的一个插件,让笔记能够使用更多的背景源

Downloads

1

Readme

功能

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

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

的示例插件

原理

esm.sh引入

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

import { Plugin, frontEndApi, kernelApi } from "https://esm.sh/[email protected]";

直接从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));

请作者喝杯咖啡

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

https://afdian.net/a/leolee9086