Obsidian--ITS-Theme Kanban看板教程：从基础设置到Notion风格美化

Obsidian--ITS-Theme Kanban看板教程：从基础设置到Notion风格美化

【免费下载链接】Obsidian--ITS-ThemeTheme designed with readability and customizability in mind. Change it easily to your liking with the Style Settings plugin installed.项目地址: https://gitcode.com/gh_mirrors/ob/Obsidian--ITS-Theme

Obsidian--ITS-Theme是一款注重可读性和自定义性的Obsidian主题，通过Style Settings插件可以轻松调整看板样式。本教程将带你掌握从基础设置到Notion风格美化的完整流程，让你的任务管理更高效美观。

一、快速启用Kanban看板功能

在Obsidian中使用ITS Theme的Kanban功能非常简单，只需两步即可完成基础设置：

1. 添加CSS类：在笔记的Frontmatter中添加cssclass: kanban配置

   --- cssclass: kanban ---

2. 创建列表结构：使用普通Markdown列表语法创建看板列和任务卡片，预览模式下会自动转换为看板视图

完成设置后，你的列表将立即变为并排显示的看板布局，支持任务卡片拖拽、列表折叠等基础功能。

Obsidian--ITS-Theme Kanban看板展示了多列布局、任务卡片和丰富的内容支持

二、两种看板模式：基础版与插件版

ITS Theme提供了两种看板实现方式，满足不同用户需求：

2.1 基础列表看板（无需插件）

通过cssclass: kanban启用的基础看板模式具有以下特点：

• 纯CSS实现，无需安装额外插件
• 支持列表、图片和嵌入内容并排显示
• 响应式设计，在移动设备上自动调整布局

核心实现代码位于SCSS/ITS Theme/Custom CSS/_CCSS-SlRvb - Kanban.scss，定义了看板的基本布局和样式。

2.2 Kanban插件增强版

对于需要更完整功能的用户，推荐配合Kanban插件使用：

• 支持列拖拽排序和卡片优先级设置
• 提供任务完成状态跟踪和元数据展示
• 通过kbn类名启用增强样式：cssclass: kbn

Kanban插件版提供更丰富的交互功能和样式选项

插件样式定义在SCSS/ITS Theme/Plugin Third Party/_P-TP - Kanban.scss文件中，包含了从列头到任务卡片的完整样式定义。

三、Notion风格看板美化指南

ITS Theme提供了专门的Notion风格看板样式，让你的Obsidian看板拥有简洁现代的外观：

3.1 启用Notion风格

通过Style Settings插件启用Notion风格（需要安装Style Settings插件）：

1. 打开Obsidian设置 → 外观 → 样式设置
2. 找到"Kanban"部分，勾选"Style the kanban plugin like a Notion Kanban Board"

或者直接在Frontmatter中添加：

cssclass: notion-kbn

3.2 自定义看板外观

Notion风格看板提供了多种自定义选项：

• 卡片样式：调整卡片背景色、边框和阴影效果
• 列宽设置：通过CSS变量--kanban-lane-width自定义列宽度
• 标签样式：修改标签颜色和形状，使其更接近Notion风格
• 标题格式：调整卡片标题的字体大小和粗细

相关样式变量定义在SCSS/Theme Rewrite/plugins-third-party/_plugin-kanban.scss文件中，你可以通过Style Settings插件或自定义CSS覆盖这些变量。

3.3 实用CSS类切换

ITS Theme提供了多个CSS类切换，用于快速调整看板样式：

这些类可以组合使用，例如cssclass: kbn kanban-boxed kanban-title-center。

四、高级技巧与最佳实践

4.1 卡片内容丰富化

在Kanban卡片中可以添加多种内容元素：

• 任务列表：使用- [ ]语法添加可勾选的子任务
• 标签：使用#标签语法添加分类标签
• 元数据：通过Frontmatter添加优先级、截止日期等信息
• 嵌入内容：嵌入其他笔记或图片作为参考资料

4.2 响应式设计适配

ITS Theme的Kanban看板在移动设备上会自动调整布局：

• 列会垂直堆叠而非水平排列
• 卡片间距和字体大小会优化以适应小屏幕
• 触摸操作区域增大，提升移动端使用体验

相关响应式代码位于SCSS/ITS Theme/_Mobile.scss文件中。

4.3 性能优化建议

对于包含大量卡片的看板，建议：

• 避免在单个看板中放置过多列和卡片
• 使用折叠功能隐藏暂时不需要的列
• 减少卡片中的复杂嵌入内容
• 定期归档已完成的任务

五、常见问题解决

5.1 看板样式不生效

如果看板样式未正确显示，请检查：

1. 确认ITS Theme已启用
2. Frontmatter中的cssclass拼写是否正确
3. 是否安装了必要的插件（如使用插件版看板）
4. 尝试重新加载主题（设置 → 外观 → 重新加载主题）

5.2 自定义CSS不生效

自定义CSS时建议：

• 使用更具体的选择器，如.kanban-plugin__item.my-custom-class
• 清除浏览器缓存或使用Ctrl+Shift+R强制刷新
• 检查CSS语法错误
• 通过开发者工具（Ctrl+Shift+I）调试样式

六、总结

Obsidian--ITS-Theme的Kanban看板功能为任务管理提供了灵活而强大的解决方案。从简单的列表看板到Notion风格的高级美化，通过本教程的指导，你可以打造出既美观又实用的个性化看板系统。

无论是个人任务管理、项目规划还是学习笔记整理，ITS Theme的Kanban功能都能帮助你更高效地组织信息和管理任务。通过结合Style Settings插件和自定义CSS，你可以将看板完全定制为符合自己工作流的理想工具。

更多高级用法和最新功能，请参考官方文档Guide/Kanban.md。

【免费下载链接】Obsidian--ITS-ThemeTheme designed with readability and customizability in mind. Change it easily to your liking with the Style Settings plugin installed.项目地址: https://gitcode.com/gh_mirrors/ob/Obsidian--ITS-Theme