Obsidian 使用分享（从心得到资源教程）

经验分享
, ,
1

使用 Obsidian 已经两个月啦。
以下是一些个人的使用心得和资源/教程分享。
三编｜更新说明：1. 增加一个新的插件（PDF++）

使用心得

1. 为什么选择 Obsidian？

在 Obsidian （以下简称 Ob）之前我已经尝试过许多笔记软件，比如印象笔记、语雀、Effie 等等。但都有或多或少的问题，功能丰富的我嫌它占内存，简单的我却又觉得过于简洁。
最重要的是：我无法接受云端存储。
而 Ob 基本完美契合我的需求，免费、本地存储、高度可定制化。

2. 关于Obsidian 的学习成本

如果你没有额外的需求，那么只要学会基本的 Markdown（甚至这个也不是必须的）语法就可以开箱即用。
如果你有额外需求，活跃的社区插件生态让 Ob 可以具备极其丰富的功能。同时论坛、B站、知乎里也有许多教程和资源教你如何配置自己的仓库（Vault）。

3. 我的工作区

加入 Obsidian 论坛时我读的第一篇帖子是临安分享的工作区。
简约、清晰、方便。
我当时的第一个反应是：哇！好酷！
所以（自以为已经熟悉 Ob 的）我也把工作区分享一下吧！（相关 snippets 见文末）

关键词：轻量化、简约、便捷

工作区
工作区2522×1488 139 KB

目前在用的插件

  • 美化类
    1. Widgets（最上方时钟与周数显示，我把 main.js 和 styles.css 做了一定的改动）
    2. Homepage (将某个文档作为主页，打开 Ob 默认打开该文档)
    3. Mininal & Mininal Theme Settings（主题，上图用的是 Flexoki-Default）
  • 辅助类
    1. floating toc（浮动目录，在阅读长文本时很有用）
    2. Easy Typing（很适合中英文混合文档，可配置性强）
      3. Open In New Tab（如其名。不用再ctrl + 左键单击打开新文档啦）
  • 功能拓展类
    1. Excalidraw（功能同 同名绘图软件，很适合天马行空地想象）
    2. Periodic Notes（存放日记、周记等阶段性回顾笔记）
    3. Local RSS（RSS 阅读器，有 RSS 阅读需求的可以考虑）
    4. PDF++（功能非常强大的一款pdf拓展插件，后续可能专开一篇分享）

一些配置建议

  1. 快捷键

    我重新分配了所有日常使用频率高的快捷键（如快速切换/切换视图/左右分屏 等，其他一律用命令面板控制）

  2. 核心插件

    最开始可以全部打开，之后根据自己的使用频率增删。

  3. 文件导览

    如图，因为我一个库存放所有文档，所以就要考虑不同文档的归属。参考的做法是Rainbell 的示例库，不过使用的是 Ob 的原生核心插件——数据库（Bases）。
    方法：
    首先，为不同类别的文档建立文件夹，在每个文件夹中新建一个 base 文件，再在 base 文件中进行文件筛选，一个 base 文件只列出其所属文件夹中的文件；之后使用 html 语法通过内部链接定位到每个 base 文件。

总之，我个人的配置主旨是根据自己的功能使用频率和需求不断做“减法”。

关于snippets

  1. 基本样式

    如一级标题样式、加粗样式、分割线样式等。

  2. 分栏样式

    只做了两栏样式，一是为了好看和省空间，二是为了图文混排。

资源/教程分享

插件怎么下？

考虑到魔法是一件有点麻烦的事情，所以推荐两种途径。

资源网站下载

我使用的是 PKMer，网站创办者之一 Whyl 同时也是主题 BlueTopaz 的作者，团队也开发了许多功能丰富的插件。

GitHub

在上面找相关插件的 repo，不过比较麻烦。所以个人更推荐第一种。

关于教程

首先当然是钉在论坛主页的 Ob 新手入门必读（纲领性地讲解如何使用 Ob），以及 LillianWho 老师的 Obsidian入门：从第一个文件开始和二丫讲梵老师的我的Obsidian入门之旅。
如果想要看到 Ob 全方位的功能实现，我推荐 Rainbell 老师的 Homepage示例库。
其它教程我个人是根据自己的使用需要来针对性地搜索。

我的 snippets

  • 分栏样式
/* 分栏布局 */
/* 使用方式1(默认两栏各占50%)
<div class="col">
  <div class="col text">左侧文本……</div>
  <div class="col text">右侧文本……</div>
</div>*/
/* 使用方式2（等高图片列）
<div class="col equal-height"> /* equal height 可以不写 */
  <div class="col img"><img src="/路径/图1.png" alt=""></div>
  <div class="col img"><img src="/路径/图2.png" alt=""></div>
</div>*/
/* 使用方式3（图片40%文本60%）
<div class="col img-40"> /* img-40 可以不写*/
  <div class="col img"><img src="/路径/图.png" alt=""></div>
  <div class="col text">右侧文本内容……</div>
</div>*/

/* 兼容：纯文本 / 纯图片 / 图文混排 的两栏布局（增强版） */

.markdown-rendered .col {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
  box-sizing: border-box;
}

/* 默认两栏各占 50%（避免换行时略作收缩） */
.markdown-rendered .col > .col {
  flex: 1 1 calc(50% - 0.5rem);
  min-width: 140px;
  padding: 10px;
  box-sizing: border-box;
}

/* 文本列：保持内联内容自然流式排列 */
.markdown-rendered .col > .col.text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 改为 center 可垂直居中 */
}

/* 图片列：图片默认填满列宽，列宽上限设为 50% */
.markdown-rendered .col > .col.img {
  flex: 1 1 calc(50% - 0.5rem);
  max-width: 50%;
}

/* 支持 Markdown 渲染出的 <figure> 包裹结构 和 直接 <img> */
.markdown-rendered .col .col img,
.markdown-rendered .col .col figure,
.markdown-rendered .col .col figure img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  margin: 0;
  box-sizing: border-box;
  border-radius: 6px;
}

/* 当两侧都是图片并希望等高展示，可让图片容器成为相同高度的 flex 项 */
.markdown-rendered .col.equal-height {
  align-items: stretch;
}
.markdown-rendered .col.equal-height > .col {
  display: flex;
}
.markdown-rendered .col.equal-height .col img,
.markdown-rendered .col.equal-height .col figure {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 响应式：窄屏下自动堆叠为单列 */
@media (max-width: 700px) {
  .markdown-rendered .col,
  .markdown-rendered .col > .col {
    flex-basis: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* 如果需要一侧固定为窄列（例如图片 40% / 文本 60%），可在 HTML 加类 .img-40 */
.markdown-rendered .col.img-40 > .col.img {
  flex: 0 0 40%;
  max-width: 40%;
}
.markdown-rendered .col.img-40 > .col.text {
  flex: 1 1 calc(60% - 0.5rem);
}

/* 这个是内部链接样式，可根据自己的审美需求更改～
   效果参考上方工作区右侧文本样式～  */
.markdown-rendered .col .internal-link { 
  font-size: 27px;  /* 字体大小 */ 
  font-family: 'FZFangSong-Z02S', serif; /* 字体样式 */ 
  color: #445144; /* 字体颜色 */ 
  line-height: 1.6; /* 行高 */ 
}
1 个赞