如何打造个性化 Notion 进度条? | 您所在的位置:网站首页 › 进度条拉不下来 › 如何打造个性化 Notion 进度条? |
Matrix 精选 Matrix 是少数派的写作社区,我们主张分享真实的产品体验,有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章,展示来自用户的最真实的体验和观点。 文章代表作者个人观点,少数派仅对标题和排版略作修改。 我在今年七月份发了一个关于 Notion 进度条的演示 Demo,说好了要写一个教程,但是一直拖,就拖到了现在,索性就动手写一波吧。 Hi~ 我是 Linmi,这一篇我们来聊聊如何利用 Notion formula 来制作一个个性化进度条,本文算是 Notion 的进阶的使用教程,有一定的理解难度,但是做出来会很有成就感喔。 实现效果![]() 当时在 Notion 群里有一位小伙伴想为他的健身计划做一个进度条,刚好我之前也实现过,索性就贴出了代码,然后就有意思了,我飘了,到处群发截图,就是不发教程,是不是这人很可恶。 回过头来说,第一版我用了大量的 IF,考虑到我的编程能力不及我的好友 longyi(一位知名开源开发者,具体可以点看他的 Github) 的 0.0000001,能实现真的是万幸。 😄虽说代码垃圾,但是实现效果还是可圈可点的。 第二版在我了解 Notion formula 的Slice()函数之后,做了相应的修改,意味着代码减少了很多,修改的属性也就少了很多。 思路这一次我们来试试实现 2019 已经过去了多少的进度条演示,这里要用到计算日期已经过去多久。 从开头的 GIF 演示中,整个进度条是由十个方块■组成,一个方块■代表10%,0 – 10% 就占一个方块■,11% – 20% 就占两个方块■■,以此类推。 那么就很简单了,比如今年已经过去 180 天,经过计算,得出来今年已经走完了 180/365 = 49%,49% 在 41% – 50% 之间,占用五个方块,显示效果为 「■■■■■ 49%」。 实现这里的我选择一步步来讲解,如果已经熟悉 Database 新建使用,直接跳过看下面代码解析即可。 新建 Database,创建属性为 Formula这里我们新建的 Database 选择 Table 浏览模式。这里我新建两个 Table Database,以方便分享模板供对比参考。 先建一个 Page,再创建一个 Table-inline ,选择右上角「···」将「Full Width」打开。 ![]() 接着我们修改属性,这里需要设置先 2019.01.01,用现在日期减去 2019.01.01,就能得到今年过了多少天。接着设置 Formula,计算出今年已经过去多少天。 这里我直接对两个现有的属性就行修改,「Tag」 修改为「Time」,「File」修改为「formula」,适当拉长输入框。 ![]() 然后 Time 里选择好 2019.01.01,也顺便带个技巧,Notion 默认的 Time 并不符合国人的视觉习惯,需要修改一下,操作如下图: ![]() 具备初始时间,咱就开始吧,这里我们要获取现在的时间,手动输入?当然不是,Notion 提供了获取现在时间的函数 now(),接着我们来计算一下今年已经过去多久 = now() – 2019.01.01,行不行,不行。 在之前的文章中我也提到,Notion formula 中的时间是不支持直接加减,需要用到函数 dateBetween() ![]() 代码如下: dateBetween(now(), prop("Time"), "days")如果不是计算日期,单纯加减即可,无需函数。 计算 2019 已经过去的百分比接下来我们计算百分比,套用之前的代码,这里我们将已经过去的时间除以 365(这里为了做演示不考虑闰年之类),接着得到一个小数,但是这里我们需要展示百分比,那么就需要对这个小数乘以 100,然后在后面加上 % 得到最后 10% 的显示效果。 ![]() 代码如下: format(toNumber(dateBetween(now(), prop("Time"), "days") / 365 * 100)) + "%"这里简单对代码做一下解析,由于dateBetween()计算出来的是时间,和数字属性不一样,所以我们需要对这个时间进行转化,使用toNumber()函数来将刚刚的时间转换成数字,再除以 365。 接着就是需要在后面添加上 「%」,由于「%」是文本,与数字属性又不一样,所以这里得将数字转化成文本,这样两者才能拼合。 其实演示图中又遇到一个问题,那就是百分比后面小数太多了,有什么办法能换成整数么? Notion formula 提供了 Round()函数,你可以将它理解为四舍五入。 ![]() 针对这段代码,我们进行一下四舍五入。 toNumber(dateBetween(now(), prop("Time"), "days") / 365 * 100)转换后: round(toNumber(dateBetween(now(), prop("Time"), "days") / 365 * 100))最后总体代码: format(round(toNumber(dateBetween(now(), prop("Time"), "days") / 365 * 100))) + "%"![]() 基础工作准备完成后,接下来可以开始我们的进度条制作。 制作进度条现在我正在考虑要不要说明一下 IF 判断来做这件事,代码讲起来也异常消耗人的注意力。嗯,还是直接贴代码,重点讲 Slice() 函数。 IF 判断代码(开头 GIF 演示代码) if(round(prop("已完成") / prop("总量") * 100) == 100, "■■■■■■■■■■ " + format(round(prop("已完成") / prop("总量") * 100)) + "%", if(round(prop("已完成") / prop("总量") * 100) < 100 and round(prop("已完成") / prop("总量") * 100) >= 90, "■■■■■■■■■ " + format(round(prop("已完成") / prop("总量") * 100)) + "%", if(round(prop("已完成") / prop("总量") * 100) < 90 and round(prop("已完成") / prop("总量") * 100) >= 80, "■■■■■■■■ " + format(round(prop("已完成") / prop("总量") * 100)) + "%", if(round(prop("已完成") / prop("总量") * 100) < 80 and round(prop("已完成") / prop("总量") * 100) >= 70, "■■■■■■■ " + format(round(prop("已完成") / prop("总量") * 100)) + "%", if(round(prop("已完成") / prop("总量") * 100) < 70 and round(prop("已完成") / prop("总量") * 100) >= 60, "■■■■■■ " + format(round(prop("已完成") / prop("总量") * 100)) + "%", if(round(prop("已完成") / prop("总量") * 100) < 60 and round(prop("已完成") / prop("总量") * 100) >= 50, "■■■■■ " + format(round(prop("已完成") / prop("总量") * 100)) + "%", if(round(prop("已完成") / prop("总量") * 100) < 50 and round(prop("已完成") / prop("总量") * 100) >= 40, "■■■■ " + format(round(prop("已完成") / prop("总量") * 100)) + "%", if(round(prop("已完成") / prop("总量") * 100) < 40 and round(prop("已完成") / prop("总量") * 100) >= 30, "■■■ " + format(round(prop("已完成") / prop("总量") * 100)) + "%", if(round(prop("已完成") / prop("总量") * 100) < 30 and round(prop("已完成") / prop("总量") * 100) >= 20, "■■ " + format(round(prop("已完成") / prop("总量") * 100)) + "%", if(round(prop("已完成") / prop("总量") * 100) < 20 and round(prop("已完成") / prop("总量") * 100) > 0, "■ " + format(round(prop("已完成") / prop("总量") * 100)) + "%", if(round(prop("已完成") / prop("总量") * 100) == 0, "⛽️ 快开始任务吧", "❌ 我猜你数字填错了") ) ) ) ) ) ) ) ) ) )是的,看起来很难受。还是选取轻便的方法实现吧。 Slice() 函数快捷实现进度条让我们我们先来看看 Slice()函数, ![]() Slice()函数会对输入的字符进行切割,输入我们想切割的数量,就会得到切割完成后数据。 这里我们可以对进度条进行简单的切割,做一下演示。 ![]() 代码如下: slice("■■■■■■■■■■", 9)注意:这里切割十个方块,最后剩下的只有一个,即(10 – 9),后面我们会用到这个。 顺着这样的思路,9 能不能是一个可以变得量呢,比如随着日期百分比进行一个变化?也就是说可以上面的百分比变化。那我们试试看。 ![]() 代码如下: slice("■■■■■■■■■■", 10 - toNumber(dateBetween(now(), prop("Time"), "days") / 365 * 10))没问题,成功实现,这里对代码做一下解析。这里我们先对小数乘以十,得到一个个位数。 因为 Slice()函数中的数字是切割掉前面的方块,所以我们反向操作,用 10 减去上面的个位数,那么Slice()就会切割完成后的方块就是我们想要的方块啦。 再接再厉,接下来则呢么在进度条后面加上数字百分比呢? 直接相加即可。 ![]() 代码如下: slice("■■■■■■■■■■", 10 - toNumber(dateBetween(now(), prop("Time"), "days") / 365 * 10)) + " " + format(round(toNumber(dateBetween(now(), prop("Time"), "days") / 365 * 100))) + "%"中间的「” “」是一个空格,主要是为了美观。 个性化你的进度条在文章之前我们提到了方块■,这里的方块能不能替换成 Emoji,或者是文字呢? 当然可以!这里我将方块■替换成爱心❤️,效果如下: ![]() 代码如下: slice("❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️", 20 - toNumber(dateBetween(now(), prop("Time"), "days") / 365 * 20)) + " " + format(round(toNumber(dateBetween(now(), prop("Time"), "days") / 365 * 100))) + "%"但是需要注意的是爱心❤️是两个字符,所以切割出来的数据是不准确的,需要将倍数乘以二,最终得到我们想要的效果。 20 - toNumber(dateBetween(now(), prop("Time"), "days") / 365 * 20))当然按照这个思路,还可以制作月球转动的效果。 ![]() 期待各位小伙伴们的发挥。 延伸当然 Notion 进度条不仅仅可以来表示还剩多久,还可以表示工作进度、健身进度、学习进度、阅读进度、旅行进度等等…… 基本操作原理都一样,按照自己需求定制即可。 说回来,开头的 GIF 其实有一些有趣的点,就是加了emoji「❌」还有「⛽️」,「2019 已经过去了多少的进度条演示」中,孤零零的显示一个这个应该怎么制作呢? IF 判断看这里这里就需要用到 IF 判断了,针对之前健身进度,这里有三个指标。 当健身天数为零的时候,那么就显示「⛽️ 快开始任务吧」 当健身天数不为零,且在范围内,显示进度条 当健身天数不为零,但是数字超出限定范围内,比如负数,那么就显示「❌ 我猜你数字填错了」顺着这个逻辑,我们就可以使用代码轻松实现出来。 先把「2019 已经过去了多少的进度条演示」判断代码贴一下: if(empty(prop("Time")), "", slice("❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️", 20 - toNumber(dateBetween(now(), prop("Time"), "days") / 365 * 20)) + " " + format(round(toNumber(dateBetween(now(), prop("Time"), "days") / 365 * 100))) + "%")效果如下: ![]() 😄剩下交给大家,欢迎评论留言。 后话Notion formula 的能力怎么说,限制性还是比较大,基础的展示计算可以做,但是一些联动就很困难,或者说根本就做不到。 最近刚好也看到官方对 formula 的反馈,未来会做比较大的更新,我甚是期待,不过就算没有看到官方的反馈,按照创始人的构思,怎么会不做呢? 对了,目前 Notion 看起来是以优化性能为主要任务,还有就是 Notion API 正在开发中,更期待,能完成与其他应用的联动,Notion 就飞起了。 > 下载少数派 客户端、关注 少数派公众号 ,了解更多有趣的应用 🚀 > 特惠、好用的硬件产品,尽在 少数派sspai官方店铺 🛒 |
CopyRight 2018-2019 实验室设备网 版权所有 |