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

本贴最后更新于 430 天前,其中的信息可能已经水流花落

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

CleanShot20240405at00.19.082x.png

  • 思源笔记

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

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

    25874 引用 • 107167 回帖
  • Q&A

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

    9932 引用 • 45102 回帖 • 78 关注

相关帖子

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

    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{$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 回复
  • 举个例子,我的模板列长这样:

    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 版本后,模板支持对星期的解析了

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

  • SenorPink via macOS

    真是太棒了!我昨天写的时候总是想把每个 ✓ 转成 1,原来可以这么简单就实现!😭

  • 查看全部回帖

推荐标签 标签

  • 导航

    各种网址链接、内容导航。

    45 引用 • 177 回帖 • 2 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 726 关注
  • 宕机

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

    13 引用 • 82 回帖 • 75 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    177 引用 • 1254 回帖
  • 音乐

    你听到信仰的声音了么?

    62 引用 • 512 回帖 • 1 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 640 关注
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    171 引用 • 1537 回帖 • 2 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 4 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    298 引用 • 763 回帖
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    326 引用 • 1395 回帖
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 311 关注
  • DNSPod

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

    6 引用 • 26 回帖 • 538 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 490 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 4 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    118 引用 • 54 回帖
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    22 引用 • 148 回帖 • 8 关注
  • Bootstrap

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

    18 引用 • 33 回帖 • 648 关注
  • 反馈

    Communication channel for makers and users.

    120 引用 • 906 回帖 • 279 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 34 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 2 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    91 引用 • 59 回帖 • 4 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    42 引用 • 130 回帖 • 250 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    89 引用 • 150 回帖 • 2 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 371 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 35 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖