数据库模版列如何使用这样的进度条

对于每天看打卡状态的人来说,通过 checkbox 打卡再正常不过了,虽然模板列的功能很强大,可玩性更高,但是对小白真的很不友好,像这样通过 checkbox 显示的进度条在 notion、flowus、wolai 上都能轻松实现,求求好心的大佬给个代码,相信会有很多人需要的 🙏

CleanShot20240405at00.19.082x.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    19818 引用 • 75895 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    6890 引用 • 31073 回帖 • 229 关注

相关帖子

被采纳的回答
  • 如果按照你的图片,大概按下面的代码改改就能用了:

    image.png

    .action{$total:= 4} .action{/* 填列数 */}
    .action{$count:= 0}
    
    .action{/* 有多少列就填多少组 */}
    .action{$state1:= index . "早起"}
    .action{$state2:= index . "运动"}
    .action{$state3:= index . "阅读"}
    .action{$state4:= index . "日报"}
    
    .action{if eq $state1 "√"}
    .action{$count = add1 $count}
    .action{end}
    
    .action{if eq $state2 "√"}
    .action{$count = add1 $count}
    .action{end}
    
    .action{if eq $state3 "√"}
    .action{$count = add1 $count}
    .action{end}
    
    .action{if eq $state4 "√"}
    .action{$count = add1 $count}
    .action{end}
    
    
    .action{$width:= round (mulf (divf $count $total) 100) 0}
    .action{$transparency:= addf (mulf (divf $count $total) 0.8) 0.2}
    
    <div style="display: flex; justify-content: flex-end; height: 100%;">
    <span style="font-size: 100%; margin-right: 4px;">.action{$width}%</span>
    <span style="background-color: rgba(175,184,193,0.2); width: 100%; display: inline-block;height: 12px;border-radius: 6px;align-self: center;overflow: hidden;">
        <span style="text-align: right; font-size: 12px; width: .action{$width}%; background-color: rgba(45,164,78,.action{$transparency}); display: inline-block;height: inherit;vertical-align: top;"></span>
    </span>
    </div>
    

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • ethanyang 1 评论

    太复杂的了,基本的功能可以内置吗?

    1 回复
    模板列的需求多种多样,没有开发精力一一去做,只能让用户自己写代码了
    JeffreyChen
  • 其他回帖
  • 举个例子,我的模板列长这样:

    image.png

    用的代码是:

    .action{$a:= index . "考点完成数占比" }
    .action{$b:= 100 }
    .action{$c:= mul $a 100}
    .action{$d:= div $c $b}
    .action{$e:= addf (mulf (divf $d 100) 0.8) 0.2}
    .action{$f:= index . "考点总数" }
    .action{$g:= index . "考点完成数" }
    <div style="display: flex; justify-content: flex-end; height: 100%;">
    <span style="font-size: 100%; margin-right: 4px;">.action{$g}/.action{$f}</span>
    <span style="background-color: rgba(175,184,193,0.2); width: 100%; display: inline-block;height: 12px;border-radius: 6px;align-self: center;overflow: hidden;">
        <span style="text-align: right; font-size: 12px; width: .action{$d}%; background-color: rgba(45,164,78,.action{$e}); display: inline-block;height: inherit;vertical-align: top;"></span>
    </span>
    </div>
    

    但主要问题在于模板代码不通用,每个数据库都要单独写,所以只能给你汇总一下我收集的跟模板相关的资料:

    Sprig 模板函数 | 思源开发者文档

    数据库模板列简单使用指南

    周计划模板分享

    思源笔记美化 | blockquote 块添加背景色 - Achuan-2 的回帖

    模板列代码分享【新】

    思源 2.11.1 版本后,模板支持对星期的解析了

    分享数据库模板列的一些有趣实现

  • 另外你可能会需要关注这个 issue :数据库主键支持隐藏、编辑名称 #10882

    1 回复
  • 如果按照你的图片,大概按下面的代码改改就能用了:

    image.png

    .action{$total:= 4} .action{/* 填列数 */}
    .action{$count:= 0}
    
    .action{/* 有多少列就填多少组 */}
    .action{$state1:= index . "早起"}
    .action{$state2:= index . "运动"}
    .action{$state3:= index . "阅读"}
    .action{$state4:= index . "日报"}
    
    .action{if eq $state1 "√"}
    .action{$count = add1 $count}
    .action{end}
    
    .action{if eq $state2 "√"}
    .action{$count = add1 $count}
    .action{end}
    
    .action{if eq $state3 "√"}
    .action{$count = add1 $count}
    .action{end}
    
    .action{if eq $state4 "√"}
    .action{$count = add1 $count}
    .action{end}
    
    
    .action{$width:= round (mulf (divf $count $total) 100) 0}
    .action{$transparency:= addf (mulf (divf $count $total) 0.8) 0.2}
    
    <div style="display: flex; justify-content: flex-end; height: 100%;">
    <span style="font-size: 100%; margin-right: 4px;">.action{$width}%</span>
    <span style="background-color: rgba(175,184,193,0.2); width: 100%; display: inline-block;height: 12px;border-radius: 6px;align-self: center;overflow: hidden;">
        <span style="text-align: right; font-size: 12px; width: .action{$width}%; background-color: rgba(45,164,78,.action{$transparency}); display: inline-block;height: inherit;vertical-align: top;"></span>
    </span>
    </div>
    
    1 回复
  • 查看全部回帖

推荐标签 标签

  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 232 回帖
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖 • 2 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 704 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 51 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 3 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 644 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 24 关注
  • danl
    89 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 4 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    6890 引用 • 31071 回帖 • 229 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 248 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 685 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    207 引用 • 358 回帖
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    175 引用 • 992 回帖
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 399 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 31 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    124 引用 • 580 回帖
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    16 引用 • 7 回帖 • 1 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 611 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 522 关注
  • 安装

    你若安好,便是晴天。

    131 引用 • 1184 回帖
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    25 引用 • 83 回帖
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    51 引用 • 190 回帖 • 2 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 2 关注