obsidian外观
Obsidian 样式 -FrontMatter 读书笔记
插件ID:obsidian%E6%A0%B7%E5%BC%8F-frontmatter%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0
obsidian%E6%A0%B7%E5%BC%8F-frontmatter%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0
obsidian%E6%A0%B7%E5%BC%8F frontmatter%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0:
Obsidian 样式 -FrontMatter 读书笔记
样式效果展示
缘由
Obsidian 1.4.0 更新了全新的 metadata,使得 metadata 不仅可以像原本一样在源码模式下编辑,在实时编辑与阅读模式下也可以进行编辑。
同时,metadata 框的外观也与之前的版本有所不同,现在 metadata 框的外观更加美观,可以以类似表格的形式展示,更加符合 Obsidian 的整体风格。
而在之前的很多读书笔记模板中需要使用特定 CSS 与 Callout 才能达到的效果(如下图),现在可以直接通过使用 CSS 修改 metadata 实现。
使用方法
- 将以下 CSS 代码制成 CSS 文件,放入 Obsidian 的
snippets
文件夹中并启用该片段 - 在记录页面的 FrontMatter 中添加
cssclass
字段,并在字段中填入book
代码
/* FrontMatter 读书笔记样式 */
/* 来自 Discord 社区用户 @reaty 的样式分享 */
.book .cm-scroller {
padding-left: 10% !important;
padding-right: 10% !important;
}
.book .cm-sizer,
.book .markdown-preview-sizer {
margin-left: 0px !important;
margin-right: 0px !important;
}
.book .inline-title {
display: none;
}
.book img[alt="cover"] {
display: inline !important;
width: 300px;
height: 500px;
object-fit: cover;
}
.book.is-live-preview .metadata-container,
.book.markdown-preview-view .metadata-container {
position: absolute;
display: block;
width: calc(80% - 330px);
left: calc(10% + 330px);
max-height: 500px;
overflow-y: scroll
}
讨论
若阁下有独到的见解或新颖的想法,诚邀您在文章下方留言,与大家共同探讨。
反馈交流
其他渠道
版权声明
版权声明:所有 PKMer 文章如果需要转载,请附上原文出处链接。