如何打造个性化 Notion 进度条?

我在今年七月份发了一个关于 Notion 进度条的演示 Demo,说好了要写一个教程,但是一直拖,就拖到了现在,索性就动手写一波吧。

我在今年七月份发了一个关于 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 是不符合国人的视觉习惯,需要修改一下,操作如下图:

计算 2019 已经过去多少天

具备初始时间,咱就开始吧,这里我们要获取现在的时间,手动输入?当然不是,Notion 提供了获取现在时间的函数 now(),接着我们来计算一下今年已经过去多久 = now() - 2019.01.01,行不行,不行。

在之前的文章中我也提到,Notion formula 中的时间是不支持直接加减,需要用到函数 dateBetween(),具体解析请看:Notion 制作纪念日与倒计时 | Notion 进阶教程

代码如下:

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))) + "%"

中间的「" "」是一个空格,主要是为了美观。

?到此,教程就结束啦!?这里感谢一下 Maylie 小姐姐。

"诶,别急,你先等等,开头的个性化呢?"

你瞧我这榆木脑袋,这就做。

个性化你的进度条

在文章之前我们提到了方块■,这里的方块能不能替换成 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 判断了,针对之前健身进度,这里有三个指标。

  1. 当健身天数为零的时候,那么就显示「⛽️ 快开始任务吧」
  2. 当健身天数不为零,且在范围内,显示进度条
  3. 当健身天数不为零,但是数字超出限定范围内,比如负数,那么就显示「❌ 我猜你数字填错了」

顺着这个逻辑,我们就可以使用代码轻松实现出来。

先把「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 就飞起了。

感谢阅读,请评分鼓励一下我!

感谢评价,欢迎关注我的 Twitter 哦。

感谢阅读,请评分鼓励一下我!

感谢评价,欢迎关注我的 Twitter 哦。

Notion

Notion 中如何添加目录?

2019-9-23 22:31:11

Notion

Notion Database 中如何批量修改标签?

2019-9-30 14:32:33

42 条回复 A文章作者 M管理员
  1. 我做了一个倒计时进度表,可以去看一下https://www.bilibili.com/read/cv16198277

  2. 谢谢,受文章启发,做了个日记的进度条,比如今天是9月下旬,进度条样式如下:
    ????????????
    记录了公式怎么设置的,有需要的可以看看 https://www.notion.so/6622a3d568e84d199ae83c8ff67cfcac

  3. 出现Too few arguments in function slice. 为什么呢

  4. 那个健身计划的小伙伴就是我,娃哈哈,我现在也开始学习如何编程了,前来学习!

  5. slice("■■■■■■■■■■", (prop("总支出")-prop("预算")))
    下面就提示这样Too few arguments in function slice.

    • 是 number 属性么?

    • Linmi

      对,就是这里出错了,预算没设置成 number

  6. 课程进度代码 需要开课时间和结课时间
    if(dateBetween(now(), prop("开课"), "days") < 0, "?课程未开始", if(dateBetween(now(), prop("结课"), "days") 0, "?课程已结课,继续加油", " ")))

    • if(dateBetween(now(), prop("开课"), "days") < 0, "?课程未开始", if(dateBetween(now(), prop("结课"), "days") 0, "?课程已结课,继续加油", " ")))

    • 代码被吞

  7. 月球转动代码(效果是显示本月过了多少了):
    "本月?已过 " + format(date(prop("Date"))) + " 天 " + slice("????????", 0, 2 * floor(date(prop("Date")) / 4)) + if(date(prop("Date")) % 4 == 0, "", if(date(prop("Date")) % 4 == 1, "?", if(date(prop("Date")) % 4 == 2, "?", if(date(prop("Date")) % 4 == 3, "?", "")))) + slice("???????", 0, 2 * (7 - ceil(date(prop("Date")) / 4))) + if(dateBetween(dateAdd(prop("Date"), 1, "months"), prop("Date"), "days") % 4 == 0, "", if(dateBetween(dateAdd(prop("Date"), 1, "months"), prop("Date"), "days") % 4 == 1, "?", if(dateBetween(dateAdd(prop("Date"), 1, "months"), prop("Date"), "days") % 4 == 2, "?", if(dateBetween(dateAdd(prop("Date"), 1, "months"), prop("Date"), "days") % 4 == 3, "?", "")))) + format(round(date(prop("Date")) * 100 / dateBetween(dateAdd(prop("Date"), 1, "months"), prop("Date"), "days"))) + "%"

    • 大家可以基于我这个改各种功能哈?

    • 30和31天都不是百分百?

  8. 想知道大佬的动图是怎么做的[doge]

  9. 請問如何設定倒數計時的進度條呢?我看了很久,還是寫不出來...例如結束日期是 11 月 6 日,而今天距離那天還剩下多少百分比....

    • 那就加一个 property,选择结束日期。

    • Linmi

      嗯,還是寫不出來,但謝謝你提供。(放棄?)

    • Linmi

      嗯,還是寫不出來,但謝謝你提供。(放棄?)

    • Linmi

      嗯,還是寫不出來,但謝謝你提供。(放棄?)

    • 不好意思,多按兩次,因為都沒反應,請刪除,謝謝!

    • 可以去看一下https://www.bilibili.com/read/cv16198277

  10. 看了linmi大大的教程和一位B站UP主的视频(感谢两位大大)尝试做了一个月球转动的进度条,顺便添加了自己的一点小想法,如果有更好的建议可以一起讨论呀。(模板可以复制,如有需要自行复制到自己的工作区并修改即可)
    notion链接:https://www.notion.so/29b62a305ff74be4bc90b1ea9fe58e05

    • 这个真心厉害

    • 超棒,感谢

    • 超级棒 感谢

    • 谢谢!流下了没有技术的眼泪

  11. 很想要那个月球转动效果的代码。。。

  12. 牛逼o( ̄▽ ̄)d

  13. 使用的时候发现toNumber()其实是多余的,dataBetween()的输出本来也是数字形式,把这个地方也替换成round()做一个四舍五入更为合适

    slice("■■■■■■■■■■", 10 - round(dateBetween(now(), prop("BeginTime"), "days") / prop("DayOfYear") * 10)) + " " + format(round(dateBetween(now(), prop("BeginTime"), "days") / prop("DayOfYear") * 100)) + "%"

    • 感谢提醒。不过上个月我整理了一些问题,增强修改的版本会在近期发一篇文章出来,你提到的问题也是有写的哈。

  14. 参考教程,我写了一个这样的进度条,也贡献给大家。
    效果:⬛⬛⬛⬛⬛⬜⬜⬜⬜⬜ 50%
    公式:
    slice("⬛⬛⬛⬛⬛⬛⬛⬛⬛⬛", 10 - round(prop("已完成") / prop("总计") * 10 - 0.5)) + slice("⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜", round(prop("已完成") / prop("总计") * 10 - 0.5)) + " " + if(prop("已完成") > 0, format(round(prop("已完成") / prop("总计") * 100)), "0") + "%"

    • 棒棒哒

    • 超棒~感谢

    • 小白请问一下 复制代码为什么会显示 Too few arguments in function slice 呀

    • 代码后面有空格。

    • 请问超过100%的时候百分比还在一直往前走的情况,需要加什么代码吗?,现在有个数据显示107%了哈哈

    • 添加一下 if,如果分子大于分母,就不现实。

  15. 敲极棒啊!!??

  16. 感谢~多亏了教程,省了不少脑细胞~

  17. 感谢,受你思路启发实现了一个很不错的项目进度条 ?

    • 嗯哪,有收益就好。

搜索