登录 注册

插件开发 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

PixPin20241025222809.png

一直很馋 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，真的能渲染日历图标

PixPin20241025223413.png

但是这个打开的不是 svg，依然是 html，再问 ai 改进，改来改去也没有成功实现，不知道是不是挂件只能返回 html，只能靠插件，用 http 服务器等方法（ai 说的）来返回 svg 了，但是我不会，只能期待感兴趣的大佬，在此基础上，可以开发一个动态日历图标了。

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    22337 引用 • 89380 回帖
1 引用
插件开发求助丨安卓端如何通过本地 URL 返回动态 svg • Achuan-2
3 操作
Achuan-2 在 2024-10-29 20:08:06 更新了该帖
Achuan-2 在 2024-10-28 00:37:11 更新了该帖
Achuan-2 在 2024-10-25 23:17:48 更新了该帖
上海 位置
8 感谢
3 收藏
1 引用
3 操作
13 回帖
8
2
277 243 31 1 1

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
Achuan-2
给时间以生命而不是给生命以时间，如果你喜欢我的分享，欢迎给我买杯咖啡 https://www.yuque.com/achuan-2 上海
回帖
816
 帖子
226
 积分
625

近期热议

推荐标签 标签

  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发，最早发布于 2014 年 9 月。

    58 引用 • 22 回帖
  • Spring

    Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。

    944 引用 • 1459 回帖 • 17 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 664 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目，是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台，为开发者提供便利的 API 接口来调用服务，让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 483 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    69 引用 • 372 回帖
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖 • 1 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations，简称 DJI)，成立于 2006 年，是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商，客户遍布全球 100 多个国家。通过持续的创新，大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现，服务器端用 Erlang 语言编写，支持多种语言客户端，如：Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息，在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 362 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    6 引用 • 63 回帖
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    117 引用 • 99 回帖 • 212 关注
  • 招聘

    哪里都缺人，哪里都不缺人。

    190 引用 • 1057 回帖
  • Maven

    Maven 是基于项目对象模型（POM）、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 302 关注
  • 百度

    百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 175 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件，打造你得心应手的工具集合。

    6 引用 • 14 回帖 • 2 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    8112 引用 • 37001 回帖 • 160 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 22 关注
  • SVN

    SVN 是 Subversion 的简称，是一个开放源代码的版本控制系统，相较于 RCS、CVS，它采用了分支管理系统，它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 680 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具，主要功能包括：位置相关的内容递送；用户认证和授权；集中式网络监控。

    1 引用 • 7 回帖 • 587 关注
  • danl
    • 132 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案，后端采用 Go 编写，采用 MIT 许可证。

    4 引用 • 16 回帖 • 5 关注
  • 服务器

    服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务，可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务，所以该项目也已经停止维护了！

    34 引用 • 467 回帖 • 742 关注
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧！

    7 引用 • 55 回帖 • 19 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3187 引用 • 8213 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 136 关注

最新标签