Notion自制滑稽脸进度条

type
Post
status
Published
summary
刚开始接触Notion的时候，看什么都是新鲜的。这不，在建立阅读书架的时候就想整一个和别人不一样的进度条(闲的蛋疼)，然后就有了今天这个【滑稽脸进度条】
slug
notion-progress-bar
date
Jan 10, 2023
tags
进度条
notion
category
实践技巧
password
icon
URL
Property
May 4, 2025 12:40 AM
刚开始接触Notion的时候，看什么都是新鲜的。这不，在建立阅读书架的时候就想整一个和别人不一样的进度条(闲的蛋疼)，然后就有了今天这个【滑稽脸进度条】，效果如下：
notion imagenotion image
notion imagenotion image
notion imagenotion image
进度条的主要思路如下：
  • 判断计算字段
    • 如果计算百分比的两个字段有一个为空，则进度条不显示
    • 如果两个字段值相同，直接输出全部黑脸🌚，最后再加上百分比（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, 
                            "🌒", 
                            "🌓"
                        )
                    ) + "🌝🌝🌝🌝🌝🌝🌝🌝🌝", 
                    (substring("🌚🌚🌚🌚🌚🌚🌚🌚🌚🌚", 0, floor((prop("当前页数") / prop("书籍页数")) * 10) * 2) + 
                        if(
                            toNumber(substring(format(floor(round((prop("当前页数") / prop("书籍页数")) * 100))), 1)) == 0, 
                            "🌕", 
                            if(
                                toNumber(substring(format(floor(round((prop("当前页数") / prop("书籍页数")) * 100))), 1)) < 4, 
                                "🌔", 
                                if(
                                    toNumber(substring(format(floor(round((prop("当前页数") / prop("书籍页数")) * 100))), 1)) > 6, 
                                    "🌒", 
                                    "🌓"
                                )
                            )
                        )
                    )+ substring("🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝", (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, "🌒", "🌓")) + "🌝🌝🌝🌝🌝🌝🌝🌝🌝", (substring("🌚🌚🌚🌚🌚🌚🌚🌚🌚🌚", 0, floor((prop("当前页数") / prop("书籍页数")) * 10) * 2) + if(toNumber(substring(format(floor(round((prop("当前页数") / prop("书籍页数")) * 100))), 1)) == 0, "🌕", if(toNumber(substring(format(floor(round((prop("当前页数") / prop("书籍页数")) * 100))), 1)) < 4, "🌔", if(toNumber(substring(format(floor(round((prop("当前页数") / prop("书籍页数")) * 100))), 1)) > 6, "🌒", "🌓")))) + substring("🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝", (floor((prop("当前页数") / prop("书籍页数")) * 10) * 2) + 2)) + " ") + format(round((prop("当前页数") / prop("书籍页数")) * 100))) + "%"))
当然，代码中的黑脸🌚和黄脸🌝以及月球🌔🌓🌒都可以换成其他图案，字段也可以换成你自己的字段（我主要是用在阅读书架中，所以字段是【当前页数】和【书籍页数】）
If you have any questions, please contact me.