最近折腾的几个小特性

假期闲来无事做两个纯粹用来装13的小特性：

• obsidian 插件 personal assistant 统计数据展示支持动画渲染；
• 松烟阁和 memos 支持足迹展示（动态和静态）；

足迹 imprints

在阅读 Fuzzing 相关论文的时候受到顶会论文作者 Heqing Huang 的启发，给自己的域名增加访问者足迹的记录：

介绍一下实现方法：

1. 在 ClustrMap 添加自己的域名；
2. 选择 Globe Widget 代码；
3. 在 Ghost Code Injection 中添加代码（注意要在 footer 中注入）：

<div id="dialogBox">
  <script type="text/javascript" id="clstr_globe" src="//clustrmaps.com/globe.js?d=aRZWHhEcAxeNPYsaMyFauSDpZEQRypw5lI8h_lTQrhQ"></script>
  <center style="font-size:2rem;margin-bottom:0.5rem;color:#e0e0e0;text-shadow: 0 0 10px #0ebeff, 0 0 20px #0ebeff, 0 0 50px #0ebeff, 0 0 100px #0ebeff, 0 0 200px #0ebeff;"><strong>足迹</strong></center>
</div>

统计数据与动画

之前给 Obsidian 插件 Personal Assistant 增加了统计数据展示的特性，对这个特性进行了优化：

• 增加显示细节，图标统一、颜色填充、label 名显示、字体设置等；
• 替换并优化 preview icon；
• 增加 progressive 渲染动画；

实现主要原理是用到 Chartjs Animation:

const animationProgressive = {
    x: {
      type: 'number',
      easing: 'linear',
      duration: delayBetweenPoints,
      from: NaN, // the point is initially skipped
      delay(ctx: any) {
        if (ctx.type !== 'data' || ctx.xStarted) {
          return 0;
        }
        ctx.xStarted = true;
        return ctx.index * delayBetweenPoints;
      }
    },
    y: {
      type: 'number',
      easing: 'linear',
      duration: delayBetweenPoints,
      from: previousY,
      delay(ctx: any) {
        if (ctx.type !== 'data' || ctx.yStarted) {
          return 0;
        }
        ctx.yStarted = true;
        return ctx.index * delayBetweenPoints;
      }
    }
};

References

1. Animations | Chart.js
2. Free Website Counter Showing Visitor Location on Map