更新
经 D 大指导，给思源笔记添加了一个 api，/api/icon/getDynamicIcon，可以通过 http://127.0.0.1:6806/api/icon/getDynamicIcon?color=red&type=7&lang=zh_CN 直接调用动态图标
见 ✨ Add internal kernel API `/api/icon` by Achuan-2 · Pull Request #12939 · siyuan-note/siyuan
wolai 的动态图标文档：https://www.wolai.com/wolai/2tkzTE5w7invgSTqKjSwL7
一直很馋 wolai 的动态日历图标。
可以直接调用 api 显示 svg
但是由于不确定哪天 wolai 就关闭这个服务了，也不太敢用。
今天突然发现 wolai 的动态日历图标实现原理其实挺简单的，就只是替换 svg 的几个内容就好了
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-label="Calendar" role="img" viewBox="0 0 512 512" width="100%" height="100%" style="cursor: default">
null
<path d="m512,455c0,32 -25,57 -57,57l-398,0c-32,0 -57,-25 -57,-57l0,-327c0,-31 25,-57 57,-57l398,0c32,0 57,26 57,57l0,327z" fill="#efefef"/>
<path d="m484,0l-47,0l-409,0c-15,0 -28,13 -28,28l0,157l512,0l0,-157c0,-15 -13,-28 -28,-28z" fill="#cf5659"/>
<g fill="#f3aab9">
<circle cx="462" cy="136" r="14"/>
<circle cx="462" cy="94" r="14"/>
<circle cx="419" cy="136" r="14"/>
<circle cx="419" cy="94" r="14"/>
<circle cx="376" cy="136" r="14"/>
<circle cx="376" cy="94" r="14"/>
</g>
<text id="month" x="32" y="142" fill="#fff" font-family="-apple-system, BlinkMacSystemFont, 'Noto Sans', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif, 'Segoe UI', Roboto, 'Helvetica Neue', Arial" font-size="100px" style="text-anchor: left">十月</text>
<text id="day" x="256" y="400" fill="#66757f" font-family="-apple-system, BlinkMacSystemFont, 'Noto Sans', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif, 'Segoe UI', Roboto, 'Helvetica Neue', Arial" font-size="256px" style="text-anchor: middle">25</text>
<text id="weekday" x="256" y="480" fill="#66757f" font-family="-apple-system, BlinkMacSystemFont, 'Noto Sans', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif, 'Segoe UI', Roboto, 'Helvetica Neue', Arial" font-size="64px" style="text-anchor: middle">星期五</text>
null
替换 text 节点的内容，就实现了更新日期和内容
修改配色则是修改 <path d="m484,0l-47,0l-409,0c-15,0 -28,13 -28,28l0,157l512,0l0,-157c0,-15 -13,-28 -28,-28z" fill="#cf5659"/> 和 <g fill="#f3aab9">
但是我不知道如何输入一个地址，返回 svg，
只记得这个挂件 Zuoqiu-Yingyi/widget-url-scheme: 一个可将 URL Scheme 转换为 HTTP 302 重定向地址的挂件 | A widget that converts the URL Scheme to HTTP 302 redirection.可以输入挂件地址打开文档
于是就拿这个代码问 ai 改。
挂件的 index.html 内容改为这样
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态日历</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: transparent;
}
</style>
</head>
<body>
<div id="calendar-container"></div>
<a id="download-link" download="calendar.svg"></a>
<script type="module">
(() => {
const CONSTANTS = {
SEARCH_PARAM_COLOR: 'color',
SEARCH_PARAM_LANG: 'lang',
SEARCH_PARAM_DATE: 'date',
DEFAULT_COLOR: '#cf5659',
DEFAULT_LANG: 'zh-CN'
};
function getUrlParams() {
try {
const url = new URL(window.location.href);
return {
color: url.searchParams.get(CONSTANTS.SEARCH_PARAM_COLOR) || CONSTANTS.DEFAULT_COLOR,
lang: url.searchParams.get(CONSTANTS.SEARCH_PARAM_LANG) || CONSTANTS.DEFAULT_LANG,
dateParam: url.searchParams.get(CONSTANTS.SEARCH_PARAM_DATE)
};
} catch (error) {
console.error('Error parsing URL parameters:', error);
return {
color: CONSTANTS.DEFAULT_COLOR,
lang: CONSTANTS.DEFAULT_LANG,
dateParam: null
};
}
}
function generateCalendarSVG(month, date, weekday, color) {
return `<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-label="Calendar" role="img" viewBox="0 0 512 512" width="512" height="512">
<title>Calendar - ${month} ${date}</title>
<path d="m512,455c0,32 -25,57 -57,57l-398,0c-32,0 -57,-25 -57,-57l0,-327c0,-31 25,-57 57,-57l398,0c32,0 57,26 57,57l0,327z" fill="#efefef"/>
<path d="m484,0l-47,0l-409,0c-15,0 -28,13 -28,28l0,157l512,0l0,-157c0,-15 -13,-28 -28,-28z" fill="${color}"/>
<g fill="#f3aab9">
<circle cx="462" cy="136" r="14"/>
<circle cx="462" cy="94" r="14"/>
<circle cx="419" cy="136" r="14"/>
<circle cx="419" cy="94" r="14"/>
<circle cx="376" cy="136" r="14"/>
<circle cx="376" cy="94" r="14"/>
</g>
<text id="month" x="32" y="142" fill="#fff" font-family="system-ui, -apple-system, sans-serif" font-size="100px" style="text-anchor: left">${month}</text>
<text id="day" x="256" y="400" fill="#66757f" font-family="system-ui, -apple-system, sans-serif" font-size="256px" style="text-anchor: middle">${date}</text>
<text id="weekday" x="256" y="480" fill="#66757f" font-family="system-ui, -apple-system, sans-serif" font-size="64px" style="text-anchor: middle">${weekday}</text>
</svg>`;
}
function updateCalendar() {
const { color, lang, dateParam } = getUrlParams();
let now;
try {
now = dateParam ? new Date(dateParam) : new Date();
if (dateParam && isNaN(now.getTime())) {
throw new Error('Invalid date parameter');
}
} catch (error) {
console.error(error);
now = new Date();
}
const month = now.toLocaleString(lang, { month: 'long' });
const date = now.getDate();
const weekday = now.toLocaleString(lang, { weekday: 'long' });
const svg = generateCalendarSVG(month, date, weekday, color);
document.getElementById('calendar-container').innerHTML = svg;
}
// 初始更新日历
updateCalendar();
})();
</script>
</body>
</html>
效果就是输入 http://localhost:6806/widgets/dynamicCalendar/?date=2024-10-21，真的能渲染日历图标
但是这个打开的不是 svg，依然是 html，再问 ai 改进，改来改去也没有成功实现，不知道是不是挂件只能返回 html，只能靠插件，用 http 服务器等方法（ai 说的）来返回 svg 了，但是我不会，只能期待感兴趣的大佬，在此基础上，可以开发一个动态日历图标了。
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于