20241027 更新
经 D 大指导,给思源笔记添加了一个 api,/api/icon/getDynamicIcon,可以通过 api/icon/getDynamicIcon?color=red&lang=zh_CN&date=2024-10-27
直接调用动态图标
见 ✨ Add internal kernel API `/api/icon` by Achuan-2 · Pull Request #12939 · siyuan-note/siyuan
需求
想参考 wolai 的动态图标:https://www.wolai.com/wolai/2tkzTE5w7invgSTqKjSwL7
在思源也开发一个动态图标插件,目的是可以直接本地生成动态图标,而不依赖网络(wolai 说不准哪天就不让非会员用这个功能了)
目前已经在 windows 端,基本上把 wolai 的动态图标都抄了一遍,具体见插件开发 idea 丨模仿 wolai 的动态日历图标 - 链滴
问题
但是目前的问题是,我在安卓上没法用,安卓不方便调试,不知道出了什么问题
我采取的方案是参考插件 taotaochen86/siyuan-plugin-jsrunner,是写了一个 http 服务器,想问问大佬们有什么办法,能解决这个问题,让各端都可以使用链接来返回动态 svg。
下面是我目前的插件代码
https://github.com/Achuan-2/siyuan-plugin-dynamic-calendar-icon
server.ts
const http = globalThis.require("http");
// src/server.ts
interface ColorScheme {
primary: string;
secondary: string;
}
export class CalendarServer {
private server: any;
private port: number;
private colorSchemes: { [key: string]: ColorScheme } = {
red: { primary: "#cf5659", secondary: "#f3aab9" },
blue: { primary: "#5AA9E6", secondary: "#3A79B6" },
yellow: { primary: "#DBAD6A", secondary: "#AB7D3A" },
green: { primary: "#5FBB97", secondary: "#2F8867" },
purple: { primary: "#E099FF", secondary: "#BE66CF" },
pink: { primary: "#EA5D97", secondary: "#CA3D77" },
fuchsia: { primary: "#93627F", secondary: "#633241" },
grey: { primary: "#565557", secondary: "#767577" }
};
constructor(port: number) {
this.port = port;
}
public start(): void {
if (!this.server) {
this.server = http.createServer((req: any, res: any) => {
const url = new URL(req.url, `http://localhost:${this.port}`);
const params = {
color: url.searchParams.get('color') || 'red',
date: url.searchParams.get('date'),
locale: url.searchParams.get('locale') || 'cn',
type: url.searchParams.get('type') || '1'
};
const svg = this.generateCalendarSVG(params);
res.writeHead(200, {
'Content-Type': 'image/svg+xml',
'Cache-Control': 'no-cache',
'Pragma': 'no-cache'
});
res.end(svg);
});
this.server.listen(this.port);
console.log(`Calendar SVG server started on port ${this.port}`);
}
}
public stop(): void {
if (this.server) {
this.server.close();
this.server = null;
console.log(`Calendar SVG server stopped`);
}
}
index.ts
import { Plugin } from "siyuan";
import "./index.scss";
import { CalendarServer } from "./server";
export default class CalendarSVGPlugin extends Plugin {
private server: CalendarServer = new CalendarServer(45678);
onload() {
// 启动服务器
this.server.start();
}
onunload() {
// 关闭服务器
this.server.stop();
}
}
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于