要创建这样的表格，你需要安装 Dataview 插件，并在笔记中启用 YAML

一个从 YAML 中提取信息的简单表格长这样：

```dataviewjs
const container = this.container;

const allPages = dv.pages('"2. Areas/Сериалы и фильмы/7. Сериалы"')
    .where(p => p.Жанр && p.Рейтинг)
    .sort(p => -Number(p.Рейтинг));

// --- UI block: Filter + Search ---
const controls = document.createElement("div");
controls.style.display = "flex";
controls.style.gap = "1rem";
controls.style.marginBottom = "1rem";

// Filter by genres
const genres = [...new Set(allPages.flatMap(p => Array.isArray(p.Жанр) ? p.Жанр : [p.Жанр]))];
const genreSelect = document.createElement("select");

const allOption = document.createElement("option");
allOption.value = "all";
allOption.textContent = "All genres";
genreSelect.appendChild(allOption);

for (let genre of genres.sort()) {
  const option = document.createElement("option");
  option.value = genre;
  option.textContent = genre;
  genreSelect.appendChild(option);
}
controls.appendChild(genreSelect);

// Search field
const searchInput = document.createElement("input");
searchInput.type = "text";
searchInput.placeholder = "🔍 Search by title...";
searchInput.style.flex = "1";
controls.appendChild(searchInput);

container.appendChild(controls);

// --- Table ---
const table = document.createElement("table");
table.className = "dataview table-view-table";

const header = table.insertRow();
["🎬 Cover", "🎞 Title", "🎭 Genre", "⭐ Rating", "🧠 Insight"].forEach(text => {
  const th = document.createElement("th");
  th.textContent = text;
  header.appendChild(th);
});

function renderTable(filterGenre = "all", searchTerm = "") {
  table.querySelectorAll("tr:not(:first-child)").forEach(row => row.remove());

  const filteredPages = allPages.filter(p => {
    const genreMatch = filterGenre === "all" || (Array.isArray(p.Жанр) ? p.Жанр.includes(filterGenre) : p.Жанр === filterGenre);
    const searchMatch = !searchTerm || p.file.name.toLowerCase().includes(searchTerm.toLowerCase());
    return genreMatch && searchMatch;
  });

  for (let p of filteredPages) {
    const row = table.insertRow();

    const cellCover = row.insertCell();
    cellCover.innerHTML = p.Постер
      ? `<img src="${p.Постер}" width="100" style="border-radius: 8px;">`
      : "—";

    const cellTitle = row.insertCell();
    const link = document.createElement("a");
    link.href = p.file.path;
    link.textContent = p.file.name;
    link.className = "internal-link";
    cellTitle.appendChild(link);

    const cellGenre = row.insertCell();
    cellGenre.textContent = Array.isArray(p.Жанр) ? p.Жанр.join(", ") : p.Жанр;

    const cellRating = row.insertCell();
    cellRating.textContent = p.Рейтинг + "/10";

    const cellInsight = row.insertCell();
    cellInsight.textContent = p.Инсайт || "–";
  }
}

// --- Listeners ---
genreSelect.onchange = () => renderTable(genreSelect.value, searchInput.value);
searchInput.oninput = () => renderTable(genreSelect.value, searchInput.value);

// First render
renderTable();
container.appendChild(table);```

→ const allPages = dv.pages(‘“2. Areas/Сериалы и фильмы/7. Сериалы”’) — 请替换成你自己存放带 YAML 笔记的路径 → 把最后三个撇号字符移到新的一行

---

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

📁 1. 从正确的文件夹加载笔记

const allPages = dv.pages('"2. Areas/Сериалы и фильмы/7. Сериалы"')
    .where(p => p.Жанр && p.Рейтинг)
    .sort(p => -Number(p.Рейтинг));

• 这里会加载 “Shows”（剧集）文件夹中的所有笔记。

• 只筛选出同时包含 Жанр（类型）和 Рейтинг（评分）的笔记。

• 按评分从高到低排序——评分最高的排在最上面。

📌 如果你的目录结构不同，请把路径替换成你自己的文件夹。

---

🎛️ 2. 界面：按类型筛选 + 搜索

const genres = [...new Set(allPages.flatMap(...))];

• 会收集所有不重复的类型（例如：剧情、喜剧、动漫）。

• 生成一个下拉列表——你可以只筛选”科幻”或只筛选”动漫”。

searchInput.placeholder = "🔍 Search by title...";

• 搜索框按笔记名称进行筛选（通常就是剧集的标题）。

• 实时生效，非常方便！

---

📋 3. 表格：每一行长什么样

["🎬 Cover", "🎞 Title", "🎭 Genre", "⭐ Rating", "🧠 Insight"]

每一行对应一部剧集，显示的内容如下：

列	显示内容
🎬 封面	来自 Постер（海报）字段的图片（如果有的话）
🎞 标题	剧集的标题，带有指向该笔记的链接
🎭 类型	一个或多个类型
⭐ 评分	10 分制的分数（Рейтинг）
🧠 感想	你的想法、收获，或剧中的一句台词

---

🧠 4. 筛选与渲染

function renderTable(filterGenre = "all", searchTerm = "") { ... }

• 删除旧的表格行，只重新绘制符合所选类型或输入文字的行。

• 这让表格变得灵动：它会对用户的操作做出反应。

---

🔁 5. 事件监听器

genreSelect.onchange = () => renderTable(...)
searchInput.oninput = () => renderTable(...)

• 当你切换类型或在搜索框中输入内容时，表格就会更新。

• 这一切都是实时发生的，无需刷新。

---

✅ YAML 中需要哪些内容

为了让这段代码正常运行，请确保你的剧集笔记中填写了这些字段：

Постер: https://link-to-image.jpg
Жанр: [Sci-Fi, Drama]
Рейтинг: 8.7
Инсайт: An inspiring look at the technology of the future.

---

🔥 最终效果

你会得到一个很酷的片单：

• 样式整齐美观；

• 可以按心情（类型）筛选；

• 能快速找到想重看的剧；

• 还可以分享给朋友或订阅者。

---