要在你的开发中创建这样的进度条，你需要在每日笔记中插入 YAML：

然后在“2025 年 5 月”笔记中插入以下代码：

```dataviewjs
const pages = dv.pages('"2. Areas/Мой дневник/1-3 Daily notes"')
  .where(p => p.date && p.date.toString().includes("-05-2025"))

const totalDays = 31
const count = (key) => pages.filter(p => p[key] === true).length

const habits = [
  { name: "Warm-up", key: "разминка" },
  { name: "Sports nutrition", key: "спортпитание" },
  { name: "Reading", key: "Чтениекниг" }
]

function getColor(percent) {
  if (percent >= 80) return "#4CAF50"  // green
  if (percent >= 50) return "#FFC107"  // yellow
  return "#F44336"                     // red
}

if (pages.length === 0) {
  dv.paragraph("❌ No data for May.");
} else {
  const container = this.container

  habits.forEach(habit => {
    const current = count(habit.key)
    const percent = Math.round((current / totalDays) * 100)
    const color = getColor(percent)

    const block = document.createElement("div")
    block.style.marginBottom = "16px"

    const label = document.createElement("div")
    label.textContent = `${habit.name}: ${percent}%`
    label.style.fontWeight = "bold"
    label.style.marginBottom = "4px"

    const barContainer = document.createElement("div")
    barContainer.style.background = "#eee"
    barContainer.style.borderRadius = "6px"
    barContainer.style.height = "16px"
    barContainer.style.width = "100%"
    barContainer.style.overflow = "hidden"

    const bar = document.createElement("div")
    bar.style.background = color
    bar.style.height = "100%"
    bar.style.width = `${percent}%`
    bar.style.transition = "width 0.3s"

    barContainer.appendChild(bar)
    block.appendChild(label)
    block.appendChild(barContainer)
    container.appendChild(block)
  })
}```

→ const pages = dv.pages('"2. Areas/Мой дневник/1-3 Daily notes"') — 请替换为你自己存放带有 YAML 的笔记的路径 → 把最后三个反引号移到新的一行

🧠 写给想更深入理解这段代码的朋友的说明：

📁 1. 你需要在每日笔记中添加什么

💻 2. “2025 年 5 月”笔记中的代码长什么样

在月度笔记（例如 May 2025）中，插入以下代码：

```dataviewjs
const pages = dv.pages('"2. Areas/Мой дневник/1-3 Daily notes"')
  .where(p => p.date && p.date.toString().includes("-05-2025"))

🛠 Explanation:

pages — we take all the diaries from the folder.
We filter only for May 2025 (includes("-05-2025")).
Don’t forget to replace the path with your own!

const totalDays = 31
const count = (key) => pages.filter(p => p[key] === true).length

totalDays —— 这个月的总天数。
count() —— 这个习惯完成了多少天。

const habits = [
  { name: "Warm-up", key: "разминка" },
  { name: "Sports nutrition", key: "спортпитание" },
  { name: "Reading", key: "Чтениекниг" }
]

🔑 在这里设置你要追踪的习惯列表。

name —— 它在屏幕上显示的名称。
key —— 该字段在 YAML 中的写法。

function getColor(percent) {
  if (percent >= 80) return "#4CAF50"  // green
  if (percent >= 50) return "#FFC107"  // yellow
  return "#F44336"                     // red
}

🟩 绿色 = 你做得很棒 🟨 黄色 = 你在努力 🟥 红色 = 你需要自律

📊 可视化

在 habits.forEach(...) 循环内部，会生成以下内容：

显示习惯完成百分比的文字；
带有灰色条的容器；
根据百分比填充的彩色进度条。

✅ 最终效果

你会得到一个月度习惯面板：

美观。
激励人心。
直接在你的笔记里——无需任何外部追踪工具。

Elton Labs