Obsidian 使用分享（附插件分享&分栏样式）

经验分享
, ,
1

关于 Obsidian，已经有许多详实细致的教程：

  1. 首先当然是钉在论坛主页的 Ob 新手入门必读（纲领性地讲解如何使用 Ob），以及 LillianWho 老师的 Obsidian入门：从第一个文件开始和二丫讲梵老师的我的Obsidian入门之旅。
  2. 如果想要看到 Ob 全方位的功能实现，则是 Rainbell 老师的 Homepage示例库。:warning:示例库所用的 Ob 版本较老，部分插件可能不再适用。

那么我的这篇分享主要在分享什么？

  • 我希望它能帮助你快速创建轻量化，且具备基础功能的库；
  • 我希望它能提供一种使用 Obsidian 的思路。

前言

在阅读分享时，我希望你：

  1. 已经会基本的 markdown 语法（比如二级标题 ## title、加粗 **text**）
  2. 具备耐心（任何事情都不是一蹴而就的）

补充说明：

  • 为避免内容混乱，图片所展示的个性化部分（比如时钟样式、分割线等）不作分享，如有需要可以评论区滴滴我

正文

首先当然是展示环节（笑

Homepage
Homepage2522×1488 139 KB

加入 Obsidian 论坛时我读的第一篇帖子是临安分享的工作区。给了我很大的触动，我的工作区规划思路受 临安 和 Rainbell（的示例库） 的影响比较大。

文件管理

要求：

  • 打开数据库（Bases）原生核心插件
  • 打开属性查看（Properties View）原生核心插件

我个人不习惯只用标签（写法为 #tag）来 分类 和 关联 ，所以目前的层级划分是（以兴趣爱好为例）：

  • 兴趣爱好（这是一个文件夹）
    • 导览｜兴趣爱好.base（使用筛选器 filter 筛选出 兴趣爱好 文件夹内的文件，并 排除 拓展名 file.extension 为 base 的文件；使用分类 sort 并设置基于属性 group by property 分组）
    • 兴趣爱好1（添加属性 property，属性类型自定）
    • 兴趣爱好2

筛选器
筛选器1260×584 37.2 KB

分类
分类694×584 25.7 KB

展示
展示1920×1133 85.3 KB

插件

要求：

  • 关闭安全模式

插件怎么下 ？

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

  1. 资源网站下载
    我使用的是 PKMer，网站创办者之一 Whyl 同时也是主题 BlueTopaz 的作者，团队也开发了许多功能丰富的插件。
  2. GitHub
    在上面找相关插件的 repo，不过比较麻烦。所以个人更推荐第一种。

插件分享

  • 美化类
    1. Widgets（时钟、格言等。非必需。）
    2. Homepage (将某个文档作为主页，打开 Ob 默认打开该文档)
    3. Mininal & Mininal Theme Settings（主题）
  • 辅助类
    1. floating toc（浮动目录，在阅读长文本时很有用）
    2. Easy Typing（打字更省力。可配置性强）
    3. Open In New Tab（如其名。不用再 ctrl/cmd + 左键单击 ）

配置建议

  1. 快捷键

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

  2. 核心插件

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

snippets

  • 双栏样式（最大程度利用空间）
    注：主要由 AI 完成。
/* 分栏布局 */
/* 使用方式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);
}
1 个赞