Colorful Sticky Notes

Colorful Sticky Notes

Obsidian多彩便笺功能库

CSSAny theme
# Obsidian 多彩便笺库

![2024-05-23_打造个性化便笺:Obsidian 轻松实现微软便笺功能_IMG-1.png](https://raw.githubusercontent.com/PandaNocturne/ImageAssets/main/Obsidian/202405260022926.png)

## 起源

![2024-05-23_打造个性化便笺:Obsidian 轻松实现微软便笺功能_IMG-2.png](https://raw.githubusercontent.com/PandaNocturne/ImageAssets/main/Obsidian/202405260022036.png)

许多人应该都用过微软自带的便笺,只需在 win10 中按下 `Win + Q/S`,然后搜索 `Sticky note` 或者 `便笺` 即可。在我开始使用 Obsidian 之前,我常常利用**便笺**记录一些临时信息和每天的计划。但是,接触到 Markdown 等笔记工具后,我发现**便笺**的简单功能已经无法满足我的需求了,特别是限制每次仅能保存一张图片。习惯了 Markdown 语法以及 Obsidian 提供的自定义快捷键和本地数据存储后,我突发奇想决定利用 Obsidian 打造自己的便笺库。

随后实现了 [多彩背景设定](https://pkmer.cn/show/20240417152147),建立相邻窗口进行笔记记录并添加悬浮按钮等功能,并开始将其整合成这个 [Obsidian多彩便笺功能库](https://github.com/PandaNocturne/Obsidian-colorful-sticky-notes)。经过约一个月的个人使用体验,效果还不错,因此我想分享一下这个库的使用方法。

除了实现微软便签功能(不包括同步),该库还支持诸如更换背景、在新窗口中创建笔记、以列表视图查看便签等功能……当然也支持 Obsidian 的 Markdown 语法,如插入图片、创建表格、创建 Callout 和添加别名或标签。同时配置了 Solve 插件,你可以随时新建一个临时计算草稿作为备忘录。

![2024-05-23_打造个性化便笺:Obsidian 轻松实现微软便笺功能_IMG-3.gif](https://raw.githubusercontent.com/PandaNocturne/ImageAssets/main/Obsidian/202405260022543.gif)

> 当然,在此基础上你还可以根据需要不断扩展和延伸 Obsidian 的灵活性。欢迎大家一起来尝试使用这个功能库。

## 基本介绍

基于 Obsidian 简单实现微软的便笺功能 (不包含同步),可以实现便笺的背景切换、新窗口建立笔记、便笺列表视图......  

![2024-05-23_打造个性化便笺:Obsidian 轻松实现微软便笺功能_IMG-1.png](https://raw.githubusercontent.com/PandaNocturne/ImageAssets/main/Obsidian/202405260022609.png)

- **便笺背景切换**:根据自己的喜好和需要,切换不同的便笺背景,创建独特的便笺风格。
- **新窗口建立笔记**:通过快捷键或按钮,轻松在新窗口中创建新的便笺,方便多任务处理。
- **便笺列表视图**:按不同的排序方式查看便笺列表,快速定位到需要的笔记。

## 界面介绍

![2024-05-23_打造个性化便笺:Obsidian 轻松实现微软便笺功能_IMG-4.png](https://raw.githubusercontent.com/PandaNocturne/ImageAssets/main/Obsidian/202405260022835.png)

首先跟原始的Obsidian界面相比,这个便笺库改了很多界面元素,主要用Hider插件隐藏了**tab标签页**和**左侧的侧边栏**,而且,你也找不到**左右侧侧边栏**,也没有**最小最大化按钮**,可以说界面元素改了很多,所以这里会给大家介绍一下。

- 没有tab标签页,如何移动界面?
	- 鼠标工具栏上左键长按即可移动,跟tab标签页一样。
- 如何实现最小化?
	- 直接在工具栏鼠标**右键**才会调出来:
	  ![2024-05-23_打造个性化便笺:Obsidian 轻松实现微软便笺功能_IMG-5.png](https://raw.githubusercontent.com/PandaNocturne/ImageAssets/main/Obsidian/202405260022260.png)
- 如何打开左右侧侧边栏?
	- 我可以很抱歉的告诉你,没法打开。设计这个便笺库的初始,我就不想打开侧边栏界面,尽量以时间戳的形式快速建立笔记,而不是要花心思放在文件列表管理上,而且便笺的主要用来临时记录,也不适合存长篇笔记,所以也不需要什么大纲视图。
	- 好吧,实际上我也有所保留的,在主界面(新窗口打开的不是主界面),通过鼠标右键按住,左滑右滑可以打开对应的侧边栏。
- 其他主要界面包括:编辑区、工具栏、悬浮按钮
	- **编辑区**:在这里您可以编辑便笺的内容,添加标题、文本和其他格式化的元素。
	- **悬浮按钮**:悬浮一些常用的按钮,方便调用,注意,悬浮的按钮的命令都是通过QuickAdd定制的脚本,最好不要修改QuickAdd现有的命令。
	- **工具栏**:工具栏提供了一些常用的操作按钮和快捷键,方便您快速切换模式、添加新笔记等
### 工具栏

![2024-05-23_打造个性化便笺:Obsidian 轻松实现微软便笺功能_IMG-6.png](https://raw.githubusercontent.com/PandaNocturne/ImageAssets/main/Obsidian/202405260022897.png)

工具栏的主要按钮如图所示,工具栏的空白部分可以用鼠标按住拖动,也可以配合 AltSnap 工具进行窗口移动,详见 [AltSnap-便捷的拖动和管理窗口工具](https://pkmer.cn/show/20231014160307%20)

### 悬浮按钮

悬浮按钮是参考 Things 主题的悬浮按钮样式实现的,除了 `切换阅读/编辑模式` 的按钮外,还通过 QuickAdd 和 Commander 定制了其他几项按钮。具体功能请见下图。

![2024-05-23_打造个性化便笺:Obsidian 轻松实现微软便笺功能_IMG-7.png](https://raw.githubusercontent.com/PandaNocturne/ImageAssets/main/Obsidian/202405260022999.png)

效果演示:

![2024-05-23_打造个性化便笺:Obsidian 轻松实现微软便笺功能_IMG-3.gif](https://raw.githubusercontent.com/PandaNocturne/ImageAssets/main/Obsidian/202405260022289.gif)

- **便笺列表**:通过便笺列表视图,您可以方便地浏览和切换不同的便笺。
## 快捷键指南

`Ctrl + Shift + Tab` 显示/隐藏便笺,鼠标左滑右滑是打开左右侧边栏,鼠标右键双击是折叠或打开两侧侧边栏,另外请善用 `Ctrl + P` 命令面板。

### 常用命令

| 操作        | 快捷键                                                                               |
| --------- | --------------------------------------------------------------------------------- |
| 笔记重命名     | `F2`,拓展:[PKMer_QuickAdd 脚本 -F2 弹窗式重命名三合一]( https://pkmer.cn/show/20240401221223 ) |
| 切换笔记      | `Ctrl + O`                                                                        |
| 新窗口建立笔记   | `Ctrl + N`                                                                        |
| H1~H6 标题  | `Ctrl + 1~6`,`Ctrl + 0` 去除标题                                                      |
| 引用框       | `Ctrl + R`                                                                        |
| 切换阅读或编辑模式 | `Ctrl + E`                                                                        |

### 无/有序列表、代办命令

| 操作      | 快捷键                |
| ------- | ------------------ |
| 切换为无序列表 | `Ctrl + Shift +]` |
| 切换为有序列表 | `Ctrl + Shift + [` |
| 切换为代办事项 | `Ctrl + Shift + O` |

### 窗口管理快捷键

| 操作               | 快捷键                              |
| ---------------- | -------------------------------- |
| 关闭窗口             | `Ctrl+w`                         |
| 在当前窗口打开          | 直接点击或 `Alt + Enter`              |
| 以一个新标签页打开并聚焦到新窗口 | Ctrl + 点击 或 `Ctrl + Enter` 或鼠标中键 |

### 窗口布局

| 操作   | 快捷键                | 备注    |
| ---- | ------------------ | ----- |
| 左右拆分 | `ctrl + \`         | 看起来好记 |
| 上下拆分 | `ctrl + shift + \` |       |

## 插件基本说明

本库目前总计使用了 21 个插件,其中依赖的核心插件有 9 个,增强编辑的插件 10 个,不必要的插件有 2 个。

### 核心插件

| 名称                     | 版本     | 备注                                                                                                   |
| ---------------------- | ------ | ---------------------------------------------------------------------------------------------------- |
| Tray                   | 0.3.5  | 从系统托盘运行 Obsidian,关闭后最小化在后台,用于常驻便笺库。                                                                  |
| QuickAdd               | 1.8.1  | 快速添加新页面或内容到你的笔记库中以及各种脚本的运行。用来配置新窗口打开的脚本以及其他的一些快捷键设置。                                                 |
| Commander              | 0.5.1  | 通过添加命令来自定义你的工作区,配置 CSS 悬浮了定制的命令按钮。                                                                   |
| Note Gallery           | 0.0.59 | 以卡片形式展示你的笔记,充当 Inbox 卡片盒。                                                                              |
| Another Quick Switcher | 11.4.0 | 配置了 Ctrl + O 快速切换文档,可通过文件名,标签,别名来进行搜索,以及参与了 QuickAdd 的一些命令。                                              |
| Style Settings         | 1.0.8  | 提供控制主题、插件和样式的选项。多彩便笺库中笔记背景颜色切换,界面元素调整以及悬浮按钮等样式都在 CSS 设置里面。                                           |
| Hider                  | 1.3.1  | 隐藏工具提示、状态栏和其他 UI 元素。可以通过命令来隐藏和显示。                                                                    |
| Linter                 | 1.23.2 | 用 `Ctrl + S` 快捷键格式化笔记。它可以用来检查语法或错误。配置了一些 QuickAdd 脚本,用来自动更新 Banner 以及 uid 和 date 等笔记元素。*如果感觉不需要可以删除。* |
| Projects               | 1.17.3 | 项目管理,拥有表格,卡片,日期,看板等视图。在本库中充当数据库作用,用于全局查看笔记和编辑笔记的属性。*如果感觉不需要可以删除。*                                    |

### 增强编辑的插件

以下的插件是本人用于优化 Obsidian 的编辑体验所需的插件,删除后并不影响本库的使用。

#### 附件/图片的插件

| 名称                         | 版本    | 备注                            |
| -------------------------- | ----- | ----------------------------- |
| Image Toolkit              | 1.4.1 | 提供一些图片查看的工具。                  |
| Image Context Menus        | 1.7.1 | 复制、在默认应用程序中打开、在系统资源管理器中显示图片等。 |
| Attachment Name Formatting | 2.1.8 | 用于格式化附件名称的 Obsidian 插件。       |
| Fast Image Cleaner         | 0.8.3 | 这个插件允许你快速删除图片。                |

#### 实用的插件

| 名称                   | 版本     | 备注                                 |
| -------------------- | ------ | ---------------------------------- |
| Solve                | 1.0.1  | 实时计算功能,可以用来当临时草稿                   |
| Outliner             | 4.8.1  | 让你的列表更像 Workflowy 或 Dynalist 那样工作。 |
| Slash Commander      | 0.2.16 | 自定义斜杠命令列表,为每个命令分配快捷键。              |
| Floating Search      | 3.5.1  | 将搜索视图作为模态窗口、侧边栏或弹出窗口出现。            |
| Easy toggle sidebars | 2.0.1  | 双击中键切换侧边栏状态。                       |
| File Explorer++      | 1.1.4  | 隐藏和固定文件和文件夹在文件资源管理器中。              |

### 不必要的插件

| 名称          | 版本     | 功能                     |
| ----------- | ------ | ---------------------- |
| Tasks       | 7.1.0  | 用于管理任务的 Obsidian 插件。   |
| Modal forms | 1.42.1 | 定义表单以填写数据,表单将以对话框形式出现。 |

这是本人用于一些简单的任务管理和统计的便笺中未完成的事项的,不过任务管理整体比较复杂,目前体系还不完善,故这类插件不必要,如果想简单了解一下的可以看看这个 [PKMer_基于 QuickAdd+Modal Form 的任务 (Task) 编辑器]( https://pkmer.cn/show/20240506171641 )。


## Support

如果您觉得这个功能库对您有所帮助并考虑给予一些鼓励和支持,可以通过以下方式进行:[微信 or 支付宝](./asset/熊猫别熬夜的收款码.png)。任何金额的支持都将受到我最诚挚的感谢!感谢您的支持!

## ChangeLog

- 2024-04-30
	- ! 添加常驻文档属性的 CSS 设定
		- ![](https://cdn.pkmer.cn/images/202405150549229.gif!pkmer)
	- 移除了一些不必要的插件,不过又加了一点别的插件,总体还是有 32 个插件😥
	- 不再以日记为导向,而是以 QuickNote 为导向,快速记录,文件名最好以时间戳编号,别名 (Aliases) 和标签 (tags) 为主要命名手段。
	- ! 添加 Solve 插件,用来简单草稿计算很方便!
	- 修改脚本、CSS、插件等设置......
	- 文档说明暂未更新,等之后有兴致了再说吧
- 2024-05-06
	- 删除了一些不必要的插件
	- 结合 Note Gallery 来当新标签页
	- [x] 17:05 笔记新窗口打开方式有待拓展 ➕ 2024-05-06 ✅ 2024-05-12
- 2024-05-23
	- 缩减插件到21个,对我来说已经不能再少了...
	- 添加 Readme 说明,请原谅我文笔不行,将就着看吧。

Related

How to Install

  1. Download the CSS file below
  2. Move it to your vault's .obsidian/snippets/ folder
  3. Open Obsidian → Settings → Appearance → CSS Snippets → Enable it
Download snippet.css

Stats

Stars

34

Forks

1

Last updated 13mo ago

Categories