您链接的示例对我来说是开箱即用的.让我们看看它们是如何操作的.

Web progress bar

这个进度条是从一个名为https://progress-bar.dev/的网站嵌入的，它会生成进度条的点播图片.DataviewJS看起来像这样:

const Tasks = dv.page("Test").file.tasks
    
let CompletedTasks = Tasks
    .where(t => t.completed)
    
dv.span(
    "![progress](https://progress-bar.dev/"
    + parseInt((CompletedTasks.length / Tasks.length) * 100)
    + "/)"
)

1. 从名为"Test"的页面中提取tasks(复选框)，并将结果存储为Tasks.
2. 将completed个任务复制到另一个变量CompletedTasks中.
3. 构造一个形状为https://progress-bar.dev/80/的URL，计算百分比为(Tasks / CompletedTasks) * 100，小数点数为parseInt().
4. Embeds the picture in normal Markdown:

HTML progress bar

这是一个原生HTML进度条，所以它的工作原理是offline，如果你想的话，可以用CSS定制.这个例子使用了一个inline DataviewJS query，我将在这里将其分成几行:

const value = Math.round((
  (dv.current().file.tasks.where(t => t.completed).length) / (dv.current().file.tasks).length || 0
) * 100);

"<progress value='" + value + "' max='100'></progress>" + " " + value + "%"

1. 将百分比计算为tasks.where(t => t.completed).length除以file.tasks.length，并将数字取为Math.round()(如果任务不加载，则使用0作为后备).
2. 将百分比存储为value.
3. 通过将字符串连接在一起来创建HTML进度条，该进度条输出:<progress value='80' max='100'></progress> 80%

Using this code yourself

您可以通过调用dv.current()或dv.page("My note") Select 不同的注释来 Select 进度条使用的注释.对于您需要做的任何其他事情，请通读Dataview documentation并了解其JavaScript API.

https://progress-bar.dev/实际上也有一些额外的命令来定制栏，比如title和scale，你可以在他们的GitHub上看到一些示例.

祝你好运设计一个有趣的黑曜石仪表板！