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

image

一、前情提要

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

思源笔记折腾记录-整点花里胡哨-自己定义随机头图 - 知乎 (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,完成。

效果就像这样:

更多的随机题图.gif

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • dd798922110

    玩的这么花……

  • StarDustSheep

    道理我都懂,你放我老婆的图干嘛

  • archblue
    订阅者

    发现个小问题,在思源客户端中一切正常,在网页上按钮无效

    1 回复
  • leolee
    订阅者 作者

    不应该啊,我这好像是正常的

    image.png

    1 回复
  • ciwoyipang
    捐赠者 支持者 订阅者

    这是要在主程序里改么,更新一次就要改一次?

    1 回复
  • archblue
    订阅者

    试了 firefox、chrome 都是点击没反应,提示“cors missing allow orgin”

  • leolee
    订阅者 作者

    那我也不知道是怎么回事了 暂时复现不了

    1 回复
  • leolee
    订阅者 作者

    这是一套代码片段,而且主要是偏向给主题作者和有兴趣自己做功能的用户一点参考的(因为我除了脑洞可能比较大,代码实在是菜得很),如果不了解怎么加载它的话最好暂时不用,如果有集市的作者觉得这些小玩意有用的话会整合优化进主题之类,到时候直接安装使用就可以了.

    1 回复
  • ciwoyipang
    捐赠者 支持者 订阅者

    那直接代码片段里添加 js,是不是也差不多了

  • archblue
    订阅者

    刚发现,这套代码在 linux 下不能用,js 是跨平台啊,好奇怪

  • DWY
    捐赠者 订阅者

    电脑小白看得到做不到,┭┮﹏┭┮

  • emmm

    面向中文编程吗 😂 ,这代码写在公司项目,估计不被打死还是被打死

请输入回帖内容 ...