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

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

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

CleanShot20240405at00.19.082x.png

  • 思源笔记

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

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

    28498 引用 • 120010 回帖
  • Q&A

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

    11182 引用 • 50770 回帖 • 48 关注

相关帖子

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

    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>
    

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 举个例子,我的模板列长这样:

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

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

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

    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 回复
  • ethanyang 1 评论

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

    1 回复
    模板列的需求多种多样,没有开发精力一一去做,只能让用户自己写代码了
    JeffreyChen
  • SenorPink

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

  • 查看全部回帖

推荐标签 标签

  • Follow
    4 引用 • 13 回帖 • 21 关注
  • React

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

    192 引用 • 291 回帖 • 347 关注
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    85 引用 • 414 回帖 • 1 关注
  • MongoDB

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

    91 引用 • 59 回帖
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 737 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 10 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    35 引用 • 468 回帖 • 769 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    20 引用 • 37 回帖 • 577 关注
  • sts
    2 引用 • 2 回帖 • 262 关注
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    240 引用 • 224 回帖 • 1 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    561 引用 • 677 回帖 • 1 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 91 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1062 引用 • 3456 回帖 • 122 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 848 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 430 关注
  • WebClipper

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

    3 引用 • 9 回帖 • 2 关注
  • Log4j

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

    20 引用 • 18 回帖 • 61 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    213 引用 • 2044 回帖
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    106 引用 • 908 回帖
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    12 引用 • 5 回帖 • 661 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 191 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 58 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    232 引用 • 484 回帖 • 1 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    127 引用 • 169 回帖 • 1 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4602 回帖 • 731 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    348 引用 • 765 回帖
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖