在 Obsidian 中自动隐藏 _assets 文件夹（直到需要时）

Source: Dev.to

请提供您希望翻译的具体文本内容，我将为您翻译成简体中文。

Source: …

概览

这是在 Obsidian 中使用 Custom Attachment Location 插件前后的对比，随后展示一个仅使用 CSS 的小技巧，能够自动隐藏（并在需要时显示）文件资源管理器中的 _assets 文件夹。

1️⃣ 之前的样子

Articles/
  Some Guide/
    _Some Guide.md
    Another take.png
    Final result.png
    How to do that.png
    How to do this.png
    …
  Another Article/
    _Another Article.md
    Screenshot 1.png
    Screenshot 2.png
    …

2️⃣ 使用 Custom Attachment Location 后的样子

Articles/
  > Article A_assets/
  v Article B_assets/
      file-1.png
      file-2.png
      …
  > Article C_assets/
    Article A.md
    Article B.md
    Article C.md

插件可以让附件保持整洁，但使用一段时间后，文件资源管理器仍然显得有点杂乱。

3️⃣ “啊哈！”的时刻

Obsidian 论坛上（例如 2021 年的一个帖子）常见的需求，激发了一个 纯 CSS 的解决方案。
最初用于隐藏名称以 __ 开头并以 __ 结尾的文件夹的代码片段如下：

/* hide paths with __before and ending with __ */
.nav-folder-title[data-path^="__"][data-path$="__"] {
  display: none;
}

这让我想到：为什么不隐藏所有名称以 _assets 结尾的文件夹呢？

仅 CSS 的 “hide‑assets‑folders” 代码片段

它的功能

• 将所有名称以 _assets 结尾的文件夹（可配置）缩小。
• 仅为当前活动笔记（或其资产）展开 _assets 文件夹。
• 可选地在展开的资产文件夹内部添加可滚动区域。
• 可选地高亮已展开但在视觉上被折叠的文件夹（“警告”状态）。

注意 – 在下面的 GIF 中，两个可见的折叠资产文件夹显示为一条细灰线（可自定义）。

📦 推荐的设置步骤

1. 安装 CSS Editor 插件（或使用您喜欢的任何方法）。

2. 新建一个代码片段文件，例如 hide-assets-folders.css。

3. 将 CSS 代码（见下方）粘贴到该文件中。

4. 启用代码片段：

   • 使用 CSS Editor – 代码片段会自动启用；您可以通过编辑器按钮确认。
   • 不使用编辑器 – 将文件放置在 VaultRoot/.obsidian/snippets/，然后前往 设置 → 外观 → CSS 代码片段 并打开开关。

5. （可选）使用 自定义附件位置 来保持附件有序：

   # Settings → Files & Links → Location for new attachments
   ./${noteFileName}_assets

📄 CSS 代码片段

/* Hide assets folders – https://forum.obsidian.md/t/automatically-hide-assets-folder-when-not-focused/111617 */

/* Base style for every assets folder (visible / hidden). */
.nav-folder:has(>[data-path$='_assets']) {
  background: color-mix(in srgb, currentColor 5%, transparent); /* Highlight all assets folders. */
  max-height: 4px;               /* Height of the hidden assets folder. */
  overflow: hidden;              /* Hide everything beyond the max-height. */
  transition: max-height 500ms ease-in-out; /* Smooth expand/shrink animation. */

  /* -------------------------------------------------
     Style overrides for active folders (has an .is-active child)
     ------------------------------------------------- */
  .nav-folder-children:has(>*>.is-active) > &,
  .nav-folder-children > &:has(.is-active) {   /* When the assets folder itself has an active asset. */
    background: color-mix(in srgb, currentColor 3%, transparent); /* Highlight for active expanded assets folders. */
    max-height: 150px;          /* Large enough for smooth animation; at least 25px larger than the scrollable area. */

    /* Optional: enable scroll within assets folders. */
    .tree-item-children {
      max-height: 125px;       /* Height of the scrollable area. */
      overflow-y: auto;
    }
  }
}

/* -------------------------------------------------
   Optional: highlight “forgotten” (expanded but hidden) assets folders.
   This helps avoid rendering glitches when the folder’s height is still counted
   by the explorer even though it’s visually collapsed.
   ------------------------------------------------- */
.nav-folder-children:not(:has(>*>.is-active))
  > .nav-folder:not(.is-collapsed):has(>[data-path$='_assets']):not(:has(.is-active)) {
  background: color-mix(in srgb, red 30%, transparent);
  max-height: 10px;               /* Slightly larger so it can be clicked to hide comfortably. */
  * { color: transparent; }
}

工作原理

限制与可能的改进

• 纯 CSS 无法 实现“仅显示属于活动笔记的 _assets 文件夹”。它只能响应 任意 活动后代。

• 如果一个文件夹包含 多个 _assets 子文件夹，则当任意子项处于活动状态时，它们都会展开。

• 一个小的 JavaScript 代码片段（例如通过 JavaScript Init 或一个最小的插件）可以在 正确的 assets 文件夹上切换自定义类，从而解决上述边缘情况。

为什么此警告规则重要

即使 assets 文件夹在视觉上被折叠，Obsidian 的虚拟化文件资源管理器仍会计算其高度。这可能导致：

• 项目比预期更早被取消渲染。
• 活动笔记被推出渲染范围。
• _assets 文件夹再次消失，因为其 DOM 节点不再存在。

红色高亮规则会标记任何已 展开（即未 .is-collapsed）但仍被 CSS 隐藏的文件夹，提示您手动将其折叠，以获得更流畅的行为。

TL;DR

1. 添加 CSS 代码片段（上方）到你的 vault。
2. 通过 设置 → 外观 → CSS 代码片段（或 CSS Editor 插件）启用它。
3. （可选）使用 自定义附件位置 将附件保存在笔记旁边的 _assets 文件夹中。
4. 享受更简洁、噪音更少的文件资源管理器，只显示你当前正在编辑的资产文件夹！

Folder_assets/

目标

• 默认 折叠 _assets 文件夹。
• 仅在进入该笔记所在的文件夹时才展开该文件夹。

虚拟化错误的变通办法

• 手动折叠 _assets 文件夹，或
• 切换到 基于 JS 的方法，真正删除/隐藏节点，而不是仅在视觉上缩小它们。

可能的未来改进

如果有需求（或如果它变得太烦人），可以添加一个小型 JavaScript 辅助工具/插件，实现以下功能：

1. 识别当前活动笔记。
2. 推导对应的 _assets 文件夹名称。
3. 在该文件夹上切换一个类。
4. 可选地自动折叠其他 _assets 文件夹，以防止虚拟化问题。

此想法基于并受到本帖最初提出的论坛 CSS 方法的启发。