[!info] related notes

• Progressive Disclosure

Progress-Bar 插件详细指南

目标

在 Obsidian 笔记中嵌入进度条，用于可视化任务完成度、学习进度、项目状态等。

前置条件

• Obsidian 已安装
• 安装 Progress Bar 插件（社区插件市场搜索 “Progress Bar”）

插件安装

1. 打开 Obsidian → 设置 → 第三方插件
2. 关闭安全模式（首次需确认）
3. 点击 浏览 → 搜索 Progress Bar
4. 点击 安装 → 启用

语法格式

使用内联代码块语法，格式为 progress(value, max)：

`progress(75, 100)`    → 显示 75% 的进度条
`progress(3, 10)`      → 显示 30% 的进度条
`progress(1, 1)`       → 显示 100% 完成

也可以使用简写形式：

`progress(75%)`        → 显示 75% 的进度条
`progress(3/10)`       → 显示 30% 的进度条

在代码块中使用

```progress
75/100
```

或使用 YAML 风格：

```progress
value: 75
max: 100
label: "学习进度"
```

配置选项

在插件设置中可自定义：

选项	说明	默认值
Bar color	进度条填充颜色	绿色
Background color	进度条背景色	灰色
Height	进度条高度	8px
Show percentage	是否显示百分比文字	是
Border radius	圆角大小	4px

常见用法场景

任务清单进度

## 本周任务
- [x] 完成报告
- [x] 代码审查
- [ ] 部署上线
- [ ] 写文档

任务进度: `progress(2, 4)`

学习进度追踪

## Rust 学习路线
- [x] 基础语法 `progress(100%)`
- [x] 所有权系统 `progress(100%)`
- [ ] 生命周期 `progress(60%)`
- [ ] 并发编程 `progress(20%)`

项目里程碑

## 项目 v2.0
需求分析 `progress(1/1)`
设计阶段 `progress(1/1)`
开发阶段 `progress(3/5)`
测试阶段 `progress(1/4)`

验证

• 插件在设置 → 第三方插件中显示为已启用
• 在笔记中输入 progress(50, 100) 能渲染为进度条
• 修改进度值后实时更新显示
• 在阅读模式和编辑模式下都能正常显示

常见问题

Q: 进度条不显示，只看到原始代码？ A: 确认插件已启用。检查语法是否正确，确保使用的是反引号（`）而非单引号。在编辑模式下可能需要切换到阅读模式预览。

Q: 能否使用动态计算的值？ A: Progress Bar 插件本身不支持动态计算。如需根据 checkbox 自动计算进度，可配合 Dataview 插件使用 DataviewJS 脚本来实现。

Q: 能否自定义样式？ A: 可以通过 CSS 代码片段自定义。在 .obsidian/snippets/ 目录下创建 CSS 文件，使用 .progress-bar 类名选择器修改样式。