教程对应bilibili视频：https://www.bilibili.com/video/BV115d7BwEy8

本教程的逻辑如下：

  1. 结果导向：章节开头我会直接展示最终效果，如果你不需要或者已经会了，可以跳过该章节
  2. 逐层递进：从原生设置开始，进阶到插件微调，最后是 CSS 定制
  3. 随时离场：如果你觉得当前展示的界面已经足够美观，可以随时退出视频，去记录你的笔记（外观不是最重要的，内容才是！）`

最终效果

未经任何设置的原装 Obsidian（深色系）

学完这个教程可以达到的效果展示
浅色系 + border 布局 + 栏不隐藏

card 布局 + 简约文件列表 + 隐藏大部分工具（我正在使用）
适合喜欢用快捷键 / 命令面板又追求简约的

更多搭配按喜好来即可

  1. 左侧列表 文件排序 功能本教程 不会 介绍，有需要我可以再出一期专门讲讲
  2. 日历 插件在视频末尾的 杂谈 里会讲

页面布局

效果展示

页面比例

默认的图标和字体都特别小，通过设置调整。

外观，调整 字体大小（我用12px）和 缩放比例（我直接拉到最大）

分窗口

现在主页面分成了三块。我需要更多怎么办？

按住你要添加的页面的图标，拖动到你想放的位置（要距离原来够远），再松手，就自动创建了一个小窗口。

想分成多少个小窗就可以分

分成小窗后，也可以迁移工具的位置

右侧上方的工具太多会显示不全，需要拖动。可以把右上方的工具拖动到右下框框上面，这样能展示的工具就多了。

堆叠标签栏

堆叠后竖向显示，不会遮挡文件名

原生外观

效果展示

打开设置 →外观 进行设置

主题色

可以基础颜色和主题色，主题色决定了 引用链接 等元素的颜色 [[创建链接]]

界面设置

如果开启 显示功能区，则可进行管理（是否要隐藏）

字体

默认的就行，想改也可以改

Style Settings 插件 + AnuPpuccin

效果展示

插件下载

设置 → 第三方插件 →（关闭安全模式）→ 浏览 → 搜索 Style Settings

点击 安装 → 同一位置点击 启用

在设置 → 外观 里点击 管理

搜索 AnuPpuccin 并下载

主题颜色

现在主题自动发生了变化。且在设置的 style settings 插件中多了 AnuPpuccin

但是这里的都不是很好看，继续往下滑，打开链接

来到一个 github 仓库，点击下载

下载好之后，打开设置，在 css代码片段 这里，点击文件夹

这会打开一个资源管理器的目录，把刚刚在 github 下载的 css 文件拖进去

拖进去之后，外观 里会显示这个文件，开启它

再打开 style settings 的设置，多了一项
点开之后，调成自己喜欢的主题色就行

最好把这个 force custom accents 关上（默认是打开的）

关上之后，这些图标和链接元素的颜色由外观 → 主题色 里设置的决定

工作区布局

AnuPpucin → Workspace → Workspace Layout

border 效果：

card 效果

隐藏

隐藏状态栏更好的选择在 workspace 里，调成 floating
平时隐藏，鼠标移动过去自动弹出来

标题色和装饰色

在 Typography 中打开

可以给 加粗 和 斜体 带上自己的颜色

彩色文件夹

workspace 里的 rainbow style

full

simple

一些更细的参数

这几个都是 workspace 里面的

commander 插件 工具定制

适用于喜欢左侧工具栏，不经常用命令面板的，对于想把左侧工具栏隐藏的就 没有必要了

插件的主要优势是可以定制工具图标

插件市场搜索并下载插件

选择命令 → 选择图标 → 保存
图标会显示在左侧工具栏

这里能选择所有在命令面板的命令，包括原生 + 插件

hider 插件 隐藏仓库名

这是一个专门隐藏组件的插件，其中有两项比较特别（其他的 AnuPpucin 大部分都有了）

隐藏了仓库名栏的话，就没有设置图标了，想要打开设置可以通过快捷键 ctrl+,

css 定制

ctrl+shift+I 打开 DevTools
这个 elements 里面全是前端代码

组件名称什么的全都在代码里写出来了，如果学过前端可以直接写css去改样式

没学过也没关系，我们找到组件名称后让ai帮忙写代码

点一下这个图标，然后把光标放在你想改样式的组件上

这个图标就自动对应上了

然后就是截图问ai

对症下药后，需要把 ai 生成的 css 代码放到合适的位置

还是外观里面这个文件夹的图标，点击之后把css文件加进来，再开启，应该已经生效了