魔改了下Kanban的样式：四象限模式、康奈尔笔记模式等等

[熊猫别熬夜 (噗~)]

突发奇想改了下Kanban的布局样式，默认是无差异的，依赖CssClasses的特性给不同看板定义不同的布局：

样式可提供的布局

• 四象限模式：定义当前 Kanban 文件的 cssclasses 属性值为：kanban-four-quadrants。

  • 

• 康奈尔笔记模式：定义当前 Kanban 文件的 cssclasses 属性值为：kanban-cornell-note。

  • 

  • 这种模式比较定制化，只适用于 3 个卡片的布局，当然也可以手动修改布局，采用的是网格布局，可以自行修改为其他布局类型 (需要点 CSS 基础)。

  • 编辑效果体验：除了保存有点不习惯，其他的在Kanban中编辑与正常编辑基本无差别，Kanban编辑中可以使用自定义快捷键和嵌入图片文档之类的。

CSS Snippets

【Plugin-Kanban】Kanban插件魔改.css

Reference

• [[24.06.12_Obsidian样式-Kanban插件的堆叠模式 by Huajin]]

[yaozhuwa]

有想法，效果也很不错

[Arminio]

也许可以尝试改成瀑布流

[熊猫别熬夜 (噗~)]

续：

四象限模式2，cssclasses: kanban-four-quadrants2

/* !Kanban： 四象限任务板模式2 */
.kanban-four-quadrants2.kanban-plugin {
  background-color: var(--background-primary);

  .kanban-plugin__board>div {
    display: grid;
    width: 100%;

    grid-template-columns: 1fr 2fr 2fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "area0 area1 area2"
      "area0 area3 area4";
    gap: 20px;
  }

  .kanban-plugin__lane-wrapper:not(.collapse-horizontal) {
    min-width: 100%;
    min-height: 100%;
    overflow: auto;

    &:nth-child(1) {
      grid-area: area0;
    }

    &:nth-child(2) {
      grid-area: area1;
    }

    &:nth-child(3) {
      grid-area: area2;
    }

    &:nth-child(4) {
      grid-area: area3;
    }

    &:nth-child(5) {
      grid-area: area4;
    }
  }

  /* 隐藏按钮 */
  .kanban-plugin__lane-collapse,
  /* 隐藏占位符 */
  .kanban-plugin__lane-placeholder.kanban-plugin__placeholder {
    display: none;
  }
}

康奈尔笔记模式2：cssclasses: kanban-cornell-note2

/* !Kanban： 四象限任务板模式2 */
.kanban-four-quadrants2.kanban-plugin {
  background-color: var(--background-primary);

  .kanban-plugin__board>div {
    display: grid;
    width: 100%;

    grid-template-columns: 1fr 2fr 2fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "area0 area1 area2"
      "area0 area3 area4";
    gap: 20px;
  }

  .kanban-plugin__lane-wrapper:not(.collapse-horizontal) {
    min-width: 100%;
    min-height: 100%;
    overflow: auto;

    &:nth-child(1) {
      grid-area: area0;
    }

    &:nth-child(2) {
      grid-area: area1;
    }

    &:nth-child(3) {
      grid-area: area2;
    }

    &:nth-child(4) {
      grid-area: area3;
    }

    &:nth-child(5) {
      grid-area: area4;
    }
  }

  /* 隐藏按钮 */
  .kanban-plugin__lane-collapse,
  /* 隐藏占位符 */
  .kanban-plugin__lane-placeholder.kanban-plugin__placeholder {
    display: none;
  }
}

[熊猫别熬夜 (噗~)]

设置Kanban子项目折叠的style setting css

/* https://github.com/mgmeyers/obsidian-style-settings */
/* @settings

name: Kanban Styles
id: kanban-styles
settings:
  - id: kanban-fold
    title: 折叠Kanban子项目
    type: class-toggle
    addCommand: true
*/

/* !折叠模式 */
.kanban-fold .kanban-plugin__lane-wrapper .kanban-plugin__item-title-wrapper:not(:hover) {
  .kanban-plugin__markdown-preview-view>:not(:first-child) {
    display: none;
  }
}

[熊猫别熬夜 (噗~)]

续：每周任务周报：cssclasses: kanban-weekly-report
配合tasks查询语法搭建的，参考的taskCalendar的界面：

每周任务周报的css样式：

/* !Kanban： 每周任务周报 */
.kanban-weekly-report.kanban-plugin {
  background-color: var(--background-primary);

  .kanban-plugin__board>div {
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 2fr 1fr;
    gap: 10px;
  }

  .kanban-plugin__lane-wrapper:not(.collapse-horizontal) {
    min-width: 100%;
    min-height: 100%;
    grid-column: span 2;

    &:nth-child(6) {
      grid-column: span 5;
    }

    &:nth-child(7) {
      grid-column: span 5;
    }
  }


  /* 隐藏占位符 */
  .kanban-plugin__lane-placeholder.kanban-plugin__placeholder {
    display: none;
  }

  .kanban-plugin__item-prefix-button-wrapper {
    visibility: hidden;
    width: 0.8rem;
  }
}

【Kanban】每周任务周报.md

---

kanban-plugin: board
cssclasses:
  - kanban-weekly-report
modified: 2024-12-19
uid: "20241126153958400"
created: 2024-11-26

---

## 星期一

- [ ] ```tasks
    {(done on this Monday) AND (done on this week)} OR {(happens on this Monday) AND (happens on this week)}
    show tree
    group by status.name reverse
    group by filename reverse
    short mode
    ```


## 星期二

- [ ] ```tasks
    {(done on this Tuesday) AND (done on this week)} OR {(happens on this Tuesday) AND (happens on this week)}
    show tree
    group by status.name reverse
    group by filename reverse
    short mode
    ```


## 星期三

- [ ] ```tasks
    {(done on this Wednesday) AND (done on this week)} OR {(happens on this Wednesday) AND (happens on this week)}
    show tree
    group by status.name reverse
    group by filename reverse
    short mode
    ```


## 星期四

- [ ] ```tasks
    {(done on this Thursday) AND (done on this week)} OR {(happens on this Thursday) AND (happens on this week)}
    show tree
    group by status.name reverse
    group by filename reverse
    short mode
    ```


## 星期五

- [ ] ```tasks
    {(done on this Friday) AND (done on this week)} OR {(happens on this Friday) AND (happens on this week)}
    show tree
    group by status.name reverse
    group by filename reverse
    short mode
    ```


## 星期六

- [ ] ```tasks
    {(done on this Saturday) AND (done on this week)} OR {(happens on this Saturday) AND (happens on this week)}
    show tree
    group by status.name reverse
    group by filename reverse
    short mode
    ```


## 星期天

- [ ] ```tasks
    {(done on this Sunday) AND (done on this week)} OR {(happens on this Sunday) AND (happens on this week)}
    show tree
    group by status.name reverse
    group by filename reverse
    short mode
    ```




%% kanban:settings
```
{"kanban-plugin":"board","list-collapse":[false,false,false,false,false,false,false],"new-card-insertion-method":"prepend-compact"}
```
%%

[熊猫别熬夜 (噗~)]

续：用于卡片化展示子项目，比如任务的卡片化减少占位。

Kanban卡片子项目模式：cssclasses: kanban-card-items

Kanban：卡片子项目模式

/* ! Kanban：卡片子项目模式 */
.kanban-card-items .kanban-plugin,
.kanban-card-items.kanban-plugin {
  background-color: var(--background-primary);

  /* 只当标题有标签是才启用子项目卡片模式 */
  /* .kanban-plugin__lane:has(.kanban-plugin__lane-title-text a.tag) */
  .kanban-plugin__lane-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
    height: calc(100% - 40px);
    overflow-y: auto;
    overflow-x: hidden;

    align-content: flex-start;
    justify-items: stretch;
    align-items: stretch;

    .kanban-plugin__item-wrapper {

      /* border: 2px solid #ee0000; */

      .kanban-plugin__item {
        height: 100%;
        display: grid;

        .kanban-plugin__item-title-wrapper {
          /* justify-self: stretch;
          align-self: stretch; */
          /* min-height: 150px; */
          overflow: auto;
          display: flex;
          justify-content: center;
          align-items: start;
        }
      }

    }
  }
}

/* !补丁 */
.kanban-plugin__lane {
  padding-bottom: 10px;

}

Kanban子项目分栏模式：cssclasses: kanban-col-items

Kanban子项目分栏模式

/* ! Kanban：子项目分栏模式 */
.kanban-col-items.kanban-plugin {
  background-color: var(--background-primary);
  .kanban-plugin__lane-items {
    display: block;
    column-width: 280px;
    column-gap: 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;

    .kanban-plugin__item-wrapper {
      max-width: 100%;
      .kanban-plugin__item {
        display: grid;
        .kanban-plugin__item-title-wrapper {
          overflow: auto;
          display: flex;
          justify-content: center;
          align-items: start;
        }
      }

    }
  }
}

/* !补丁 */
.kanban-plugin__lane {
  padding-bottom: 10px;

}

---

这2种模式在四象限模式以及自带的List模式下有奇效。
四象限模式推荐用kanban-col-items
自带的List模式推荐用kanban-card-items

[wrongcn]

感谢楼主对我的指点。一个小白知道如何使用CSS！

[熊猫别熬夜 (噗~)]

续：添加了一个默认堆叠模式，不用设置cssclasses，如果影响正常使用，请自行设置cssclasses

中图分类简表

原文：【Kanban】中国图书分类法简表.md · GitHub
参考： 中国图书馆分类法简表-清华大学图书馆 (tsinghua.edu.cn)

可以结合FolderNotes+它的查询语法管理自己的领域分类::

[熊猫别熬夜 (噗~)]

配合Modal Opener插件(论坛内micmoc大佬制作)的自定义命令可以实现随时随地打开Kanban界面。

---

[熊猫别熬夜 (噗~)]

添加一个简单的右边栏模式，对应cssclasses: kanban-side-note

css片段

/* !Kanban： 右侧备注笔记 */
.kanban-side-note.kanban-plugin {
  background-color: var(--background-primary);
  .kanban-plugin__board>div {
    display: grid;
    width: 100%;
    grid-template-columns: 8fr 2fr;
    grid-template-areas:
      "note side";
    gap: 5px;
  }

  .kanban-plugin__lane-wrapper:not(.collapse-horizontal) {
    min-width: 100%;
    min-height: 100%;
    &:nth-child(1) {
      grid-area: note;
    }

    &:nth-child(2) {
      grid-area: side;
    }
  }

  /* 隐藏按钮 */
  .kanban-plugin__lane-collapse,
  .kanban-plugin__item-prefix-button-wrapper,
  /* 隐藏占位符 */
  .kanban-plugin__lane-placeholder.kanban-plugin__placeholder {
    display: none;
  }

  /* 字体大小设置 */
  .kanban-plugin__item-content-wrapper {
    .markdown-preview-view>*, .cm-content>* {
      font-size: 22px !important;
    }
  }
}

[熊猫别熬夜 (噗~)]

1. 安装kanban插件
   
2. 安装css snippets片段(如果这个不知道，请自行了解)
   
   
3. 生成一个kanban文件
4. 添加cssclasses属性，具体设置什么属性名 文档里面也说了。
   

---

如果你配置好Kanban插件和CSS，可以直接使用下面md案例文档。
粘贴文本后可以打开为看板，或者重新打开笔记。

[moonlit-03-canine]

@熊猫别熬夜

kanban-weekly-report

在手机上显示会有问题，短清单行数多于 4-5 行，就会排挤到下方清单的空间，造成重叠显示，此外无法和默认的样式并存，也是一样会在手机上显示异常。希望能优化下，谢谢。

[熊猫别熬夜 (噗~)]

这肯定的，手机上看这个复杂界面的话，我只能加个限制，让手机上kanban样式正常显示或者单例堆叠显示。