插件开发 idea 丨模仿 wolai 的动态日历图标

更新

经 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

![image](https://api.wolai.com/v1/icon?type=1&locale=en&pro=0&color=red "英文动态日历")

但是由于不确定哪天 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 了，但是我不会，只能期待感兴趣的大佬，在此基础上，可以开发一个动态日历图标了。

思源安装问题

思源 mac M 在官网下载安装后，第一次安装成功，后续打开就一直显示 “初始化工作空间失败 Failed to create workspace directory” “ 获取内核服务端口失败 Failed to get kernel serve port ” ，已尝试删除 siyuan 文件夹，彻底卸载重装，电脑 ..

思源从 AI 复制出来的数学符号无法识别渲染的一种解决方法

前言最近在学习数学和密码学相关的期末知识，用到 ai，发现复制到思源无法识别出来，不知道是思源的 markdown 不够标准的原因还是 GPT 那边的原因 [图片] 后来发现通过使用 ctrl+l 快捷键（行级公式）可以渲染出来只是多一个括号而已，问题不大 [图片] 但是我的复习题答案字数有 1 万多字，啊，要点到多 ..

求助导出格式和编辑格式大不一样

[图片] 差不多像这样，感觉有序无序编号都下移了很多。已经将代码块全部关闭。怀疑是用的 asri 主题有点问题（今天晚上刚进行一次更新），不过还不确定……导出功能很久没用了。有人知道是什么情况吗

提及面板的内容可编辑

之前用的少了，在提及面板里面的内容可以编辑是设计如此吗？发现提及部分的文本的 contenteditable=true，如果点击提及部分会出现光标，并且可以编辑文本。在点击了提及面板的段落之后，就会在点击的段落后出现一段（很长的）空白，并且点击空白会插入新的段落块。 [图片] 聚焦过去之后取消聚焦就可以看到对面也插入 ..

写思源插件

思源插件1 下载插件文件我用的是社区的 F 佬写的 svlte 插件 SiYuan plugin sample (Vite & Svelte) 这里还是挺简单的：样板工程部署2 开始代码构建添加软链接为了方便调试，需要将插件开发文件中的 dist 文件夹绑定到 siyuan 插件底下的插件文件夹注意：开 ..

v3.1.15 表格粘贴错误

表格链接：https://support.huawei.com/enterprise/zh/doc/EDOC1000141427/62a4ef8d VLAN 划分方式原理优点缺点适用场景基于接口根据交换机的接口来划分 VLAN。网络管理员预先给交换机的每个接口配置不同的 PVID，当一个数据帧进入交换机时 ..

欢迎来到这里！

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

关于

13 回帖

插件开发 idea 丨模仿 wolai 的动态日历图标

注册关于

请输入回帖内容 ...

Achuan-2 • 1 个月前 • 2 评论
订阅者先知作者

哈哈哈哈哈哈

看到这个插件 taotaochen86/siyuan-plugin-jsrunner: Run jscode from post request and return the result to the client-side

输入给 ai，竟然写成功了，无敌哈哈哈哈

用的哪个 ai 啊，这么强

ilovesiyuan • 1 个月前

@ilovesiyuan claude 3.5 sonet new

Achuan-2 • 1 个月前
其他回帖
Achuan-2 • 1 个月前
订阅者先知作者

倒数日实现
Achuan-2 • 1 个月前 • 1 • 1 赞同
订阅者先知作者

Add internal kernel API `/api/icon/getDynamicIcon` by Achuan-2 · Pull Request #12939 · siyuan-note/siyuan

已经 PR 了，下个版本就会发布，思源笔记直接内置
Achuan-2 • 1 个月前
订阅者先知作者

目前有一个问题，貌似安卓端和 mac 端不能用
查看全部回帖

相关帖子

请问思源笔记的模板如何修改？

思源安装问题

思源从 AI 复制出来的数学符号无法识别渲染的一种解决方法

求助导出格式和编辑格式大不一样

提及面板的内容可编辑

写思源插件

v3.1.15 表格粘贴错误

欢迎来到这里！

近期热议

推荐标签标签

最新标签

插件开发 idea 丨模仿 wolai 的动态日历图标

相关帖子

请问思源笔记的模板如何修改？

思源安装问题

思源从 AI 复制出来的数学符号无法识别渲染的一种解决方法

求助导出格式和编辑格式大不一样

提及面板的内容可编辑

写思源插件

v3.1.15 表格粘贴错误

欢迎来到这里！

近期热议

推荐标签 标签

最新标签

推荐标签标签