1. 概述
定制 Obsidian 视觉效果有两种方法,一种是使用主题 (Theme),另一种是使用 CSS 代码片段 (CSS snippets)。
Obsidian 主题用于定义整体视觉效果,包括字体、配色、布局等。CSS 代码片段用于对当前使用的主题进行局部修改。
比如下图是两个主题视觉效果的对比。
你可以使用 Obsidian 自带的主题,也可以使用第三方制作的主题,也可以用自己做主题。GitHub 上有大量的 Obsidian 主题可供下载,感兴趣的朋友可以访问 https://github.com/topics/obsidian-theme 挑选你喜欢的主题。
不要小看 Obsidian 的 CSS 代码片段,它可是大有用处。本文我们将介绍四种视觉效果:
- 鼠标移动到图片上图片自动放大
- 更好看的检查框
- 定制特定文件夹的图标
- 更好看的标签
在其姊妹篇 使用 CSS 代码片段增强 Obsidian 视觉效果(二) 中我们介绍了另外三种视觉效果:
- Obsidian 墙纸
- 几个特殊标签
- 文件浏览器和大纲窗格显示关系连线
下面我们介绍 CSS 代码片段文件的创建方法,并给出四种视觉效果的 CSS 代码片段。
2. 创建 CSS 代码片段文件
CSS 代码片段是一个 .css
文件,放在 vault/.obsidian/snippets/
目录下。vault
是你的 Obsidian 仓库路径,比如H:\my-world-base\Obsidian-技术\
。
用 Obsidian 新建一个仓库的时候,vault/.obsidian/
目录下是没有 snippets
目录的,您可以手动创建这个目录,也可以让 Obsidian 自动为您创建这个目录。
让 Obsidian 自动创建 snippets
目录步骤:
- 启动 Obsidian;
- 打开您的仓库;
- 点击左边侧边栏的
设置
按钮(齿轮图标); - 在弹出的对话框中选择
外观
; - 点击
CSS 代码片段
右侧的打开代码段文件夹
按钮(文件夹图标); - Obsidian 将自动在仓库的
.obsidian
目录下创建snippets
目录。
有了 snippets
目录后,您就可以在该目录下创建 CSS 文件了。CSS 文件名没有特殊要求,Obsidian 会自动发现该目录下的CSS文件。您要注意的是打开应用当前代码段
开关,如下图红框处所示。
3. 几个有用的 CSS 代码片段
3.1 鼠标移动到图片上图片自动放大
效果展示:
CSS代码:
/* 作者: https://forum.obsidian.md/u/den/summary */
/* 来源: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/29 */
.markdown-preview-view img {
display: block;
margin-top: 20pt;
margin-bottom: 20pt;
margin-left: auto;
margin-right: auto;
width: 50%; /* experiment with values */
transition: transform 0.25s ease;
}
.markdown-preview-view img:hover {
-webkit-transform: scale(1.8); /* experiment with values */
transform: scale(2);
}
3.2 更好看的检查框
Obsidian默认的检查框是方形的,可以通过 CSS 将检查框改变成圆形的。
效果展示:
CSS代码:
/* 作者: https://forum.obsidian.md/u/kepano/summary, https://forum.obsidian.md/u/rsdimitrov */
/* 来源: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/34 */
/* Round checkbxes in preview and editor */
input[type="checkbox"],
.cm-formatting-task {
-webkit-appearance: none;
appearance: none;
border-radius: 50%;
border: 1px solid var(--text-faint);
padding: 0;
vertical-align: middle;
}
.cm-s-obsidian span.cm-formatting-task {
color: transparent;
width: 1.25em !important;
height: 1.25em;
display: inline-block;
}
input[type="checkbox"]:focus {
outline: 0;
}
input[type="checkbox"]:checked,
.cm-formatting-task.cm-property {
background-color: var(--text-accent-hover);
border: 1px solid var(--text-accent-hover);
background-position: center;
background-size: 70%;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
}
3.3 定制特定文件夹的图标
在 Obsidian 中,文件夹是没有图标的。您可以使用 CSS 代码片段,让特定的文件夹显示特定的图标,从而方便您的工作。
效果展示:
CSS 代码:
div[data-path="Attachments"] .nav-folder-title-content::before
{
content: "\1f600";
}
div[data-path="Resources"] .nav-folder-title-content::before
{
content: "\1f33a";
}
div[data-path="Notes"] .nav-folder-title-content::before
{
content: "\1f4cb";
}
div[data-path="Daily"] .nav-folder-title-content::before
{
content: "\1f5d3";
}
上面代码中的字符编码与图片对应关系参见 http://www.unicode.org/emoji/charts/full-emoji-list.html。
3.4 更好看的标签
效果展示:
CSS 代码:
.tag:not(.token) {
background-color: var(--text-accent);
border: none;
color: white;
font-size: 11px;
padding: 1px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 0px 0px;
cursor: pointer;
border-radius: 14px;
}
.tag:not(.token):hover {
color: white;
background-color: var(--text-accent-hover);
}
4. 总结
本文介绍了 Obsidian CSS 代码片段的作用和创建过程,并通过4个示例演示了 CSS 代码片段的迷人效果,希望对您有所帮助。后期我们会收集、创作更多好用的 CSS 代码片段分享给您,敬请关注。
💯本站文章同步发表在官方公众号 ReadingHere,关注公众号您将在第一时间了解本站最新文章和资讯。
❤️欢迎您关注本站官方公众号 ReadingHere。
本文由 ReadingHere 原创,未经 ReadingHere 授权不得转载、摘编。已经授权使用的,应在授权范围内使用,并注明来源: www.readinghere.com。违反上述声明者,ReadingHere 将追究其相关法律责任。