流动式 PARA v2.0 导航栏，显示上级目录和卡片中项目

经验分享
1

这是我对第一版流动式 PARA的思考和改进，既然 PARA 是一个以行动为导向的方法，那么其核心就是项目，也就是我们要产出的内容，而领域用于聚合项目和其他相关卡片。因此流动式 PARA 将项目视作创作卡片，领域视作内容地图，用双链网络链接项目和所属领域。

为了能方便查看 PARA 卡片的上级和项目而，我创作了流动式 PARA 导航栏，可以方便我快速定位当前卡片的上级领域（目录）和卡片中的项目，主要模板和代码见下。

示例库

领域和项目

领域模板

领域和项目的模板，由两部分组成：

  • 1、属性：表明自身为领域或项目的 PARA 属性
  • 2、导航栏：显示卡片的上级领域、当前项目
---
PARA: Area
---
```dataviewjs
await dv.view("流动式PARA导航栏")
```

项目模板

---
PARA: Project
status: 计划中
---
```dataviewjs
await dv.view("流动式PARA导航栏")
```

status 为项目状态，支持三种类型：计划中、正在进行、已完成

流动式 PARA 导航栏

这是 v2.0 的核心文件，其作用上文已叙述这里不再重复。

使用方法：仓库根目录创建 “流动式PARA导航栏.js” 文件，将下列代码复制到该文件即可。也可以放在其他目录，但记得修改 dv.view() 中的文件路径

已知 BUG：在编辑文件时，DataviewJS 刷新会闪烁整个页面，建议将刷新间隔改为 5000。或是等待 Dataviewjs Disable Refresh 特性

// 标明领域、项目的属性对
const areaKV = ["PARA", "Area"]
const projectKV = ["PARA", "Project"]


// 上级目录
let upAreas = []

upAreas = (dv.current()?.file?.inlinks).filter(link => {
    if(dv.pages(`"${ link.path }"`)[0]?.[areaKV[0]] == areaKV[1])
        return true
    return false
})

if(upAreas.length) {
    dv.span("上级目录：")
    dv.span(upAreas.join(" 丨 "))
}


// 下属项目
let downProjects = []

if(dv.current()?.[areaKV[0]] == areaKV[1]) {
    downProjects = (dv.current()?.file?.outlinks).filter(link => {
        if(dv.pages(`"${ link.path }"`)[0]?.[projectKV[0]] == projectKV[1])
            return true
        return false
    })
}

if(downProjects.length) {
    let result = await dv.query(`
        LIST rows.file.link
        WHERE contains("${ downProjects.path }", file.path)
        GROUP BY file.frontmatter.status as status
        SORT choice(status = "计划中", "1",
        choice(status = "正在进行", "2",
        choice(status = "已完成", "3", "others")))
    `)

    dv.list(result.value.values)
}


// CSS 设置
// 如果使用了 Blue Topaz 主题，可以给项目列表添加看板样式
dv.container.classList.add("kanban")
2 个赞
2

非常有趣且实用的想法，尝试了一下，感觉很棒！感谢分享！

3

这个 css 里有点隐患， .popover 不能直接隐藏的，否则核心插件的 Note Preview （以及 Hover Editor 插件）都会看不到

我猜你想要的效果可能是：


/* 隐藏浮动窗口、引用页面下导航栏 */
.popover span[src="流动式PARA导航栏"],
.markdown-embed span[src="流动式PARA导航栏"] {
    display: none !important;
}
1 个赞
4

感谢支持和帮忙修改 BUG
我更新了代码并优化了查询方法。现在不用块引用导航栏的方式了，用 dv.view() 展示导航栏，也不用添加样式了。新的方法已经在一楼和 GitHub 更新。

1 个赞
5

Nice！改成 dv.view() 确实是更好的方案

另外，我不确定你那边是否能成功运行，我这边需要把：

// 标明领域、项目的属性对
areaKV = ["PARA", "Area"]
projectKV = ["PARA", "Project"]

改成：

// 标明领域、项目的属性对
const areaKV = ["PARA", "Area"]
const projectKV = ["PARA", "Project"]

（用 let 也行）

1 个赞
6

顺便分享一个之前鼓捣的时候学到的技巧：

单独给某个元素（paragraph、span）指定样式或者class：

// attr 本身也是个 object，可以包含 style 等不同元素
 dv.paragraph("content", { attr: {style: "margin: 5px 0;"} });
1 个赞
7

感谢修正，我居然犯了这么基本的错误

1 个赞