思源笔记折腾记录 - 更多的随机头图

一、前情提要

我们之前搞了一个随机头图：

思源笔记折腾记录-整点花里胡哨-自己定义随机头图 - 知乎 (zhihu.com)

但是它只能随机我们本地的图片。

所以我们来试一下搞出更多的随机图片。

二、原理和实现

1、随机图片接口

随便上网一搜就可以找到很多随机图片接口啦

哪里有获取随机图片的服务接口？ - 知乎 (zhihu.com)

不过还是二次元图片居多嗷。。。。。

不管了，反正能用就行。

2、实现一个自定义头图按钮的接口

实际上跟之前做自定义菜单那些差不多啦，不断地查找还没有注入的题头按钮组，然后注入生成的按钮：

noobApi\customBackground\index.js

let 自定义题图按钮 = []
export function 注册自定义题图按钮(按钮选项){
  
    自定义题图按钮.push(按钮选项)
}
function 注入全部题图按钮(){
    let 题图按钮数组 = document.querySelectorAll('.protyle-background__img .protyle-icons')
    题图按钮数组.forEach(
        题图按钮组=>{
            注入题图按钮(题图按钮组)
        }
    )
}
function 注入题图按钮(按钮组){
    自定义题图按钮.forEach(
        按钮配置=>{
	    //这里不打印错误其实更好，自己注释掉吧
            try{
            if(!按钮组.querySelector(`[data-item-id=${按钮配置.id}]`)){
                生成题图按钮(按钮配置,按钮组)
            }
            }catch(e){
                console.error(e)
            }
        }
    )
}
function 生成题图按钮(按钮配置,按钮组){
    let span =document.createElement("span");
    span.setAttribute("class", "protyle-icon b3-tooltips b3-tooltips__sw ");
    span.setAttribute("data-item-id", 按钮配置.id);
    span.setAttribute("aria-label", 按钮配置.label);
    span.setAttribute("style", "relative");
    span.addEventListener("click", 按钮配置.回调函数);
    span.innerHTML = `<svg><use xlink:href="${按钮配置.图标}"></use></svg>`;
    let 随机按钮 = 按钮组.querySelector(
      "[aria-label='上下拖动图片以调整位置']"
    );
    按钮组.insertBefore(span, 随机按钮);

}
//实际上这个可以有性能更好的实现，不过现在这样应该影响也不大
setInterval(注入全部题图按钮,300)

​

然后把它暴露给其他代码片段使用：

import * as block from './util/blocks.js'
import 核心api from './util/kernelApi.js'
import 自定义块标菜单 from './customMenu/index.js'
import 添加自定义随机背景图 from './customBackground/index.js'
import { 注册自定义题图按钮 } from './customBackground/index.js'
import 自定义工具栏 from './customToolbar/index.js'
import {生成单个dom元素} from './util/dom.js'
import {Tab,注册自定义tab}  from './customTab/index.js'
import * as layoutUtil from './util/layouts.js'
添加自定义随机背景图()
let noobApi={
	自定义菜单:{
		块标菜单:自定义块标菜单
	},
    内容块:block,
    编辑器:{
        自定义工具栏:自定义工具栏,
        注册自定义题图按钮
    },
    核心api:核心api,
    DOM工具:{
        生成单个dom元素
    },
    layouts:{
        注册自定义tab,
        Tab,
        util:layoutUtil
    }
}
window.noobApi = noobApi
​

好了，然后随便找了两个随机图片接口弄了上去，如果有自己喜欢的自己再加吧

moreBackGround\index.js

import noobApi from "../noobApi/index.js";
const {注册自定义题图按钮} =  noobApi.编辑器
 class  moreBackground   {
    constructor(){
        let 头图按钮配置1 = {
            id:"小歪",
          type:"小歪",
          label:"小歪",
          回调函数:(event)=>this.获取小歪图片(event),
          图标:"#iconImage"
        }
        注册自定义题图按钮(头图按钮配置1)
        let 头图按钮配置2 = {
            id:"acg",

          type:"acg",
          label:"小筑",
          回调函数:(event)=>this.获取acg图片(event),
          图标:"#iconImage"
        }
        注册自定义题图按钮(头图按钮配置2)
    }
    获取文档id(目标){
        if(目标.getAttribute('data-node-id')){
            return 目标.getAttribute('data-node-id')
        }
        else {
            return this.获取文档id(目标.parentElement)
        }
    }
    async 获取acg图片(event){
      event.preventDefault();
  
      let 文档id =this.获取文档id(event.target)
      let 头图元素组 = document.querySelectorAll(`.protyle-background[data-node-id="${文档id}"] div.protyle-background__img img`)
      let img = await fetch("https://img.xjh.me/random_img.php?return=302")
      let  imgurl = img.url
      头图元素组.forEach(
        el=>{
          el.setAttribute("style","")
          el.setAttribute("src",imgurl)
          }
      )
      noobApi.核心api.setBlockAttrs(
        {
          id:文档id,
          attrs:{
            "title-img":`background-image:url(${imgurl})`
          }
        }
      )

    }
    async 获取小歪图片(event){
      event.preventDefault();
  
      let 文档id = this.获取文档id(event.target)
      let 头图元素组 = document.querySelectorAll(`.protyle-background[data-node-id="${文档id}"] div.protyle-background__img img`)
      console.log(文档id)
      let img = await fetch("https://api.ixiaowai.cn/api/api.php")
      console.log(img)
      let  imgurl = img.url
      头图元素组.forEach(
        el=>{
          el.setAttribute("style","")
          el.setAttribute("src",imgurl)
          }
      )
      noobApi.核心api.setBlockAttrs(
        {
          id:文档id,
          attrs:{
            "title-img":`background-image:url(${imgurl})`
          }
        }
      )
  
    }
}
new moreBackground()
​

ok，完成。

效果就像这样：