Notion自制滑稽脸进度条

type

Post

status

Published

summary

刚开始接触Notion的时候，看什么都是新鲜的。这不，在建立阅读书架的时候就想整一个和别人不一样的进度条(闲的蛋疼)，然后就有了今天这个【滑稽脸进度条】

slug

notion-progress-bar

date

Jan 10, 2023

category

实践技巧

password

icon

URL

Property

Feb 28, 2024 01:07 PM

刚开始接触Notion的时候，看什么都是新鲜的。这不，在建立阅读书架的时候就想整一个和别人不一样的进度条(闲的蛋疼)，然后就有了今天这个【滑稽脸进度条】，效果如下：

进度条的主要思路如下：

判断计算字段

如果计算百分比的两个字段有一个为空，则进度条不显示
如果两个字段值相同，直接输出全部黑脸🌚，最后再加上百分比（100%）数值

计算百分比

如果百分比是一位数，判断第一个月球的阴晴圆缺🌔🌓🌒，后面再加上9个黄脸🌝，最后再加上百分比数值
如果百分比是两位数，根据数值个位判断月球的阴晴圆缺🌔🌓🌒，根据数值十位判断黑脸🌚和黄脸🌝的数量，分别加到月球的前后，最后再加上百分比数值

逻辑理清楚了，直接上代码：

调试代码


##########   调试版   ##########
if(
    empty(prop("书籍页数")) or empty(prop("当前页数")), 
    "", 
    if(
        prop("书籍页数") == prop("当前页数"), 
        "🌚🌚🌚🌚🌚🌚🌚🌚🌚🌚 100%", 
        if(
            floor(prop("当前页数") / prop("书籍页数") * 100) < 10, 
            if(
                floor(prop("当前页数") / prop("书籍页数") * 100) < 4, 
                "🌔",
                if(
                    floor(prop("当前页数") / prop("书籍页数") * 100) > 6, 
                    "🌒", 
                    "🌓"
                )
            ) + "🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝" , 
            slice("🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑", 0, floor(prop("当前页数") / prop("书籍页数") * 10) * 2) + 
            if(
                toNumber(slice(format(floor(round(prop("当前页数") / prop("书籍页数") * 100))), 1)) == 0,
                "🌕",
                if(
                    toNumber(slice(format(floor(round(prop("当前页数") / prop("书籍页数") * 100))), 1)) < 4,
                    "🌔", 
                    if(
                        toNumber(slice(format(floor(round(prop("当前页数") / prop("书籍页数") * 100))), 1)) > 6, 
                        "🌒",
                        "🌓"
                    )
                )

            ) + 
            slice("🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝", floor(prop("当前页数") / prop("书籍页数") * 10) * 2 + 2)
        ) + " " + format(round(prop("当前页数") / prop("书籍页数") * 100)) + "%"
    )
)

最终代码（直接复制即可使用）


##########   使用版   ##########
if(empty(prop("书籍页数")) or empty(prop("当前页数")), "", if(prop("书籍页数") == prop("当前页数"), "🌚🌚🌚🌚🌚🌚🌚🌚🌚🌚 100%", if(floor(prop("当前页数") / prop("书籍页数") * 100) < 10, if(floor(prop("当前页数") / prop("书籍页数") * 100) < 4, "🌔",if(floor(prop("当前页数") / prop("书籍页数") * 100) > 6, "🌒", "🌓")) + "🌝🌝🌝🌝🌝🌝🌝🌝🌝" , slice("🌚🌚🌚🌚🌚🌚🌚🌚🌚🌚", 0, floor(prop("当前页数") / prop("书籍页数") * 10) * 2) + if(toNumber(slice(format(floor(round(prop("当前页数") / prop("书籍页数") * 100))), 1)) == 0,"🌕",if(toNumber(slice(format(floor(round(prop("当前页数") / prop("书籍页数") * 100))), 1)) < 4,"🌔", if(toNumber(slice(format(floor(round(prop("当前页数") / prop("书籍页数") * 100))), 1)) > 6, "🌒","🌓"))) + slice("🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝", floor(prop("当前页数") / prop("书籍页数") * 10) * 2 + 2)) + " " + format(round(prop("当前页数") / prop("书籍页数") * 100)) + "%"))

当然，代码中的黑脸🌚和黄脸🌝以及月球🌔🌓🌒都可以换成其他图案，字段也可以换成你自己的字段（我主要是用在阅读书架中，所以字段是【当前页数】和【书籍页数】）