思源笔记丨动态图标使用笔记

思源笔记 v3.1.11 支持了动态图标:Add internal kernel API `/api/icon/getDynamicIcon` by Achuan-2 · Pull Request #12939 · siyuan-note/siyuan

这篇帖子分享下如何用链接传参的方式使用动态图标,选择图标样式、颜色等。v3.1.11 版本还不支持文档图标设置动态图标,可以期待下之后能支持这个功能(见文档图标支持使用动态图标 · Issue #12943 · siyuan-note/siyuan

PixPin_2024-10-28_11-59-31

参数

目前有 8 种 color 和 8 种 type

PixPin_2024-10-28_12-00-52

  • type:图标类型,默认为 1

    • type=1:显示年月日星期
    • type=2:显示年月日
    • type=3:仅显示年月
    • type=4:仅显示年
    • type=5:当前周数
    • type=6:仅返回星期
    • type=7:倒数日
    • type=8:文字图标
  • lang:默认为当前思源笔记使用的语言,仅在 type=1、2、3、5、6、7 时有效

    • lang=zh_CN:显示中文简体
    • lang=zh_CHT:显示中文繁体
    • lang=en_US/lang=en_ES:显示英文
    • 其他语言用英文显示

    PixPin_2024-10-28_12-01-31

  • color:设置配色,一共八种配色

    • color=red
    • color=blue
    • color=yellow
    • color=green
    • color=purple
    • color=pink
    • color=orange
    • color=grey

    PixPin_2024-10-28_12-01-45

    支持通过 color=FE3427color=%23FE3427 设置自定义颜色(注意:直接输出 color=#FE3427,会由于 # 是 URL 特殊符号,导致 URL 被截断,会使得参数不起作用)

    PixPin_2024-10-28_12-02-36

    ![](api/icon/getDynamicIcon?color=FE3427&type=3)
    
  • date: 设置日期,默认为当前日期,日期设置格式为 yyyy-mm-dd,仅在 type=1-7 时有效

  • weekdayType: 设置星期格式,默认为第一种类型,仅在 type=1、6 时有效

    • 中文

      • weekdayType=1"周日", "周一", "周二", "周三", "周四", "周五", "周六"
      • weekdayType=2"周天", "周一", "周二", "周三", "周四", "周五", "周六"
      • weekdayType=3"星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"
      • weekdayType=4"星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六

      PixPin_2024-10-28_12-02-57

    • 英文

      • weekdayType=1"Sun","Mon","Tue","Wed","Thu","Fri","Sat"
      • weekdayType=2"SUN","MON","TUE","WED","THU","FRI","SAT"
      • weekdayType=3"Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"
      • weekdayType=4"SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY"

      PixPin_2024-10-28_12-03-16

  • content:设置文字图标的内容,默认为空,仅在 type=8 时有效

    注意 content 输入下面特殊符号,需要用 URL 编码替代,否则导致解析参数失败或丢失

    • %: %25
    • +: %2B
    • #: %23

使用

如果是在思源笔记内部使用(不用外部软件打开),可以直接用 api/icon/getDynamicIcon 后添加 type、color、lang、date/content 等参数,例如 api/icon/getDynamicIcon?color=red&type=7&lang=zh_CN

外部使用需要添加 ip 地址和端口,如 http://127.0.0.1:6806/api/icon/getDynamicIcon

示例

type=1:显示年月日星期

默认显示今天的日期。

可通过 date=2024-10-27 指定显示的日期

PixPin_2024-10-28_12-03-39

![](api/icon/getDynamicIcon?color=red&lang=zh_CN&date=2024-10-27)
![](api/icon/getDynamicIcon?color=red&lang=en_US_US&date=2024-10-27)

type=2:显示年月日

PixPin_2024-10-28_12-03-50

![](api/icon/getDynamicIcon?type=2&color=red&lang=&date=2024-10-27)
![](api/icon/getDynamicIcon?type=2&color=red&lang=en_US&date=2024-10-27)

type=3:仅显示年月

PixPin_2024-10-28_12-03-59

![](api/icon/getDynamicIcon?type=3&color=red&lang=zh_CN&date=2024-10-27)
![](api/icon/getDynamicIcon?type=3&color=red&lang=en_US&date=2024-10-27)

type=4:仅显示年

PixPin_2024-10-28_12-04-10

![](api/icon/getDynamicIcon?type=4&color=red&lang=zh_CN&date=2024-10-27)

type=5:当前周数

PixPin_2024-10-28_12-04-22

![](api/icon/getDynamicIcon?type=5&color=red&lang=zh_CN&date=2024-10-27)

![](api/icon/getDynamicIcon?type=5&color=red&lang=en_US&date=2024-10-27)

type=6:仅返回星期

不输入 color 的话,默认星期一到星期五为红色,星期六和星期日为蓝色

PixPin_2024-10-28_12-04-32

![](api/icon/getDynamicIcon?type=6&lang=en_US&date=2024-10-21 "星期一")

![](api/icon/getDynamicIcon?type=6&lang=en_US&date=2024-10-22 "星期二")

![](api/icon/getDynamicIcon?type=6&lang=en_US&date=2024-10-23 "星期三")

![](api/icon/getDynamicIcon?type=6&lang=en_US&date=2024-10-24 "星期四")

![](api/icon/getDynamicIcon?type=6&lang=en_US&date=2024-10-25 "星期五")

![](api/icon/getDynamicIcon?type=6&lang=en_US&date=2024-10-26 "星期六")

![](api/icon/getDynamicIcon?type=6&lang=en_US&date=2024-10-27 "星期日")

指定 color

PixPin_2024-10-28_12-04-45

![](api/icon/getDynamicIcon?type=6&lang=en_US&date=2024-10-21&color=red "星期一")

![](api/icon/getDynamicIcon?type=6&lang=zh_CN&date=2024-10-22&color=blue "星期二")

![](api/icon/getDynamicIcon?type=6&lang=zh_CN&date=2024-10-23&color=green "星期三")

![](api/icon/getDynamicIcon?type=6&lang=zh_CN&date=2024-10-24&color=yellow "星期四")

![](api/icon/getDynamicIcon?type=6&lang=zh_CN&date=2024-10-25&color=purple "星期五")

![](api/icon/getDynamicIcon?type=6&lang=zh_CN&date=2024-10-26&color=pink "星期六")

![](api/icon/getDynamicIcon?type=6&lang=zh_CN&date=2024-10-27&color=grey "星期日")

type=7:倒数日

该图标会显示当前日期与指定日期之间的天数。

支持 lang=en_US 修改为英文:

  • 已过Past 表示。
  • 还有Left 表示。

PixPin_2024-10-28_12-04-56

![](api/icon/getDynamicIcon?color=red&date=2024-10-22&type=7&lang=zh_CN)
![](api/icon/getDynamicIcon?color=red&date=2024-10-22&type=7&lang=en_US)

PixPin_2024-10-28_12-05-07

![](api/icon/getDynamicIcon?color=red&type=7&lang=zh_CN)
![](api/icon/getDynamicIcon?color=red&type=7&lang=en_US)

PixPin_2024-10-28_12-05-20

![](api/icon/getDynamicIcon?color=red&date=2025-10-26&type=7&lang=zh_CN)
![](api/icon/getDynamicIcon?color=red&date=2025-10-26&type=7&lang=en_US)

type=8:文字图标

该图标可以显示文字。

PixPin_2024-10-28_12-05-28

![](api/icon/getDynamicIcon?type=8&content=知乎&color=blue)
![](api/icon/getDynamicIcon?type=8&content=GREAT&color=red)

如何在 dailynote 模板中设置动态图标,创建 dailynote 自动添加图标?

v3.1.11 还不支持文档图标支持使用动态图标

之后等这个功能实现了,就可以在 dailynote 模板后面添加下面这段代码,应该就能让 dailynote 自动添加上指定的动态文档图标了。

.action{/* 获取今天日期和星期 */}
.action{$today := now | date "2006-01-02" }
.action{$weekday := now | date "Mon" }
.action{/* 工作日用红色图标,周末用蓝色图标 */}
.action{$color := "red"}
.action{if or (eq $weekday "Sat")  (eq $weekday "Sun") }
.action{$color = "blue"}
.action{else} 
.action{$color = "red"}
.action{end} 
.action{/* 设置文档图标:选择type6,仅返回星期样式 */}
{: icon="api/icon/getDynamicIcon?type=6&date=.action{$today}&color=.action{$color}"   type="doc"}

  • 思源笔记

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

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

    22370 引用 • 89532 回帖
2 操作
Achuan-2 在 2024-11-17 21:34:37 更新了该帖
Achuan-2 在 2024-11-09 19:04:51 更新了该帖

相关帖子

欢迎来到这里!

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

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

    阿川好,有没有实例展示一下,大家可以更方便了解这个可以怎么用?

    3 回复
  • 其他回帖
  • jiusii

    大佬,:倒数日的

    ![](api/icon/getDynamicIcon/getDynamicIcon?color=red&date=2025-10-26&type=7&lang=zh_CN)
    ![](api/icon/getDynamicIcon/getDynamicIcon?color=red&date=2025-10-26&type=7&lang=en_US)
    

    两个代码不可以用了,加载不出来。版本 3.11

    1 回复
  • iqeq

    通过 svg 参数动态修改图标,非常好的思路,感谢分享,期待新版可以直接把 API 输入方式添加一个按钮,方便普通用户使用。

    1 回复
    1 操作
    iqeq 在 2024-11-10 10:44:08 更新了该回帖
  • Achuan-2

    mmexport1731151531941.png

    dev 版本已经有按钮了

  • 查看全部回帖