✿ 起原：Kuzens
如若你在Obsidian中记载条记时，念念给条记添加一些厚爱，干系词这经常在条记类软件是很难已矣的功能，如若记载在条记中，诠释过长，影响阅读条记体验，如若将注开释在条记末尾，经常看一个厚爱会颠倒可贵，干系词小编发现一很特意旨的一款插件，通过css不错已矣条记的旁注功能.
1. 装置插件:Admonition给条记添加标注和提醒框插件在obsidian第三方插件库中搜索:Admonition即可装置
图片
2.插件的基本使用:著作内添加厚爱框通过斜杠Admonitionm即可调用插件，插件不错创建俩种callout和admonition(辞别不大，这里以callout来先容这款插件)
图片
点击Admonition: Insert Callout首选需要先遴荐图标
图片
遴荐需不需要折叠后点击Insert生成标注框
图片
标注框分俩个部分:标题和执行
图片
标注框内不错添加图片和翰墨
图片
也不错进行标注框的嵌套
图片
来到插件建树你不错进行css的导入来建树标注框的花式(经常每个主题王人会有标注框的预设花式)
图片
然后对标注框的一些
图片
twitter 自慰3.插件的进阶使用:在著作外添加旁注复制底下的代码存放在obsidian的css仓库中(不懂伙伴不错看这篇著作淡雅管制Obsidian的CSS文献，让您的花式文献更智能更易用)
/* @settingsname: SideNote Calloutid: sidenote-calloutsettings: - id: top-sidenote-callout-title title: Sidenote Callout Title to Top title.zh: 边注标题置于顶部 type: class-toggle default: false - id: top-left-sidenote-callout-title-position title: Top Left Sidenote Callout Title Position title.zh: 标注在顶部时，左边注的标题位置 type: class-select default: l-center-callout-title options: - label: left value: l-left-callout-title - label: center value: l-center-callout-title - label: right value: l-right-callout-title - id: top-right-sidenote-callout-title-position title: Top Right Sidenote Callout Title Position title.zh: 标注在顶部时，右边注的标题位置 type: class-select default: r-center-callout-title options: - label: left value: r-left-callout-title - label: center value: r-center-callout-title - label: right value: r-right-callout-title - id: sidenote-backgound title: Callout Background title.zh: Callout配景 description: enable background color description.zh: 开启背自得 type: class-toggle default: false - id: aside-width title: sidenote width title.zh: 边注宽度 description: The width of the sidenote description.zh: 边注的宽度 type: variable-number-slider default: 200 min: 150 max: 300 step: 10 format: px - id: aside-offset title: sidenote offset title.zh: 边注与正文的间距 description: The offset between the sidenote and the text(default is 16px) description.zh: 边注与正文的间距(默许为16px) type: variable-number-slider default: 16 min: 0 max: 50 step: 1 format: px - id: hide-sidenote-callout-fold-icon title: Hide Fold Icon title.zh: 荫藏折叠图标 type: class-toggle default: false*/body { --aside-width: 200px; --aside-offset: var(--size-4-4); --line-width: var(--file-line-width， --line-width);}.markdown-source-view.mod-cm6 .cm-content > .cm-callout:has(.callout[data-callout-metadata*='aside'])[contenteditable=false] { contain: none !important; overflow: visible;}.markdown-source-view.mod-cm6 .cm-content > .cm-callout:has(.callout[data-callout-metadata*='aside'])[contenteditable=false]>.markdown-rendered { overflow: visible;}.cm-callout:has(.callout[data-callout-metadata*='aside'])[contenteditable=false]>.edit-block-button { display: none;}:is(.markdown-source-view .cm-callout， div:not([class])):has(> .callout[data-callout-metadata*='aside']) { position: relative; overflow: visible;}.callout[data-callout-metadata*='aside'] { /* --aside-offset: var(--size-4-4); */ position: absolute;}.callout[data-callout-metadata*='aside-l'] { left: calc(-1 * (var(--aside-width) + var(--aside-offset))); right: calc(100% + var(--aside-offset));}.callout[data-callout-metadata*='aside-r'] { left: calc(var(--file-line-width) + var(--aside-offset)); right: calc(-1 * var(--aside-width));}/* .markdown-reading-view .callout[data-callout-metadata*='aside-l'] { left: calc(50vw - var(--file-line-width)/2 - var(--aside-width) - 2 * var(--aside-offset)); right: calc(50vw + var(--file-line-width)/2);}.markdown-reading-view .callout[data-callout-metadata*='aside-r'] { left: calc(var(--file-line-width) + 2 * var(--aside-width)); right: calc(50vw - var(--file-line-width)/2 - var(--aside-width) - 2 *var(--aside-offset));} */@media (hover: hover) { .markdown-source-view.mod-cm6 .cm-embed-block:has(> div > [data-callout-metadata*='aside']):hover { overflow: visible; } .markdown-source-view.mod-cm6 .cm-embed-block:not(.cm-table-widget):hover { box-shadow: unset; }}/* ------------ */.callout[data-callout-metadata*='aside'] { --block-spacing: 0.75rem; --speaker-block-width: 20%; margin: 0px; padding: 0px; display: grid; background-color: var(--background-primary) !important; border: none;}.sidenote-backgound .callout[data-callout-metadata*='aside'] { background-color: rgba(var(--callout-color)， 0.1) !important; padding-bottom: 10px;}.callout[data-callout-metadata*='aside'] { grid-template-columns: var(--speaker-block-width) calc(100% - var(--speaker-block-width));}.top-sidenote-callout-title .callout[data-callout-metadata*='aside'] { grid-template-columns: unset;}.callout[data-callout-metadata*='aside'] .callout-title { height: calc(100% - var(--block-spacing)); text-align: right; word-wrap: break-word; border-right: 3px solid; border-bottom: unset; flex: 1 0 auto; color: rgb(var(--callout-color)) !important; background-color: unset !important; /* padding-right: var(--block-spacing); */ padding: 0;}.callout[data-callout-metadata*='aside'] .callout-title { display: inline-block;}body:not(.top-sidenote-callout-title) .setting-item[data-id='top-left-sidenote-callout-title-position']，body:not(.top-sidenote-callout-title) .setting-item[data-id='top-right-sidenote-callout-title-position'] { display: none;}.top-sidenote-callout-title .callout[data-callout-metadata*='aside'] .callout-title { display: flex; flex-direction: row-reverse;}.callout[data-callout-metadata*='aside'] .callout-title-inner { font-weight: var(--bold-weight) !important; color: rgb(var(--callout-color)) !important; width: 1ch; margin: 0 auto; text-align: left;}.top-sidenote-callout-title .callout[data-callout-metadata*='aside'] .callout-title-inner { margin: 0 auto; width: unset;}.callout[data-callout-metadata*='aside'] .callout-title-inner { margin: 0 auto;}.l-left-callout-title .callout[data-callout-metadata*='aside-l'] .callout-title-inner { margin-left: var(--block-spacing);}.l-right-callout-title .callout[data-callout-metadata*='aside-l'] .callout-title-inner { margin: 0 var(--block-spacing);}.r-left-callout-title .callout[data-callout-metadata*='aside-r'] .callout-title-inner { margin-left: var(--block-spacing);}.r-right-callout-title .callout[data-callout-metadata*='aside-r'] .callout-title-inner { margin: 0 var(--block-spacing);}.callout[data-callout-metadata*='aside']>* { margin-top: var(--block-spacing);}.callout[data-callout-metadata*='aside']>.callout-title>.callout-icon { display: none;}.hide-sidenote-callout-fold-icon .callout[data-callout-metadata*='aside'] .callout-fold { display: none;}.callout[data-callout-metadata*='aside']>.callout-title>.callout-fold，.callout[data-callout-metadata*='aside']>.callout-title>.callout-fold.is-collapsed { padding: 0; justify-content: center;}.callout[data-callout-metadata*='aside']>.callout-content { padding: 0px var(--block-spacing); border-top: unset; max-height: 200px; overflow-y: auto;}.callout[data-callout-metadata*='aside']>.callout-content>p:first-child { margin-top: 0px;}.callout[data-callout-metadata*='aside']>.callout-content>p:last-child { margin-bottom: 0px;}.callout[data-callout-metadata*='aside']>.callout-content::-webkit-scrollbar-thumb { width: 11px; height: 11px; background-color: transparent !important;}.callout[data-callout-metadata*='aside']>.callout-content:hover::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-bg) !important;}/* ------- */@media print { .callout[data-callout-metadata*='aside-l'] { left: 0; right: calc(100% - var(--aside-width)); } .callout[data-callout-metadata*='aside-r'] { left: calc(100% - var(--aside-width)); right: 0; } div:not(.callout-content)>p { width: calc(100% - 2 * var(--aside-width)); margin: 0 auto; }}然后通过插件:MySnippet进行盛开(css片断的作家为:Huajin)
图片
通过以下代码创建条记的傍边标注框(其实等于在本来的标注框后头添加aside-l/r暗意傍边)
这么写不错生成一个在左侧的厚爱> [!NOTE|aside-l] 左侧厚爱> 厚爱执行这么写不错生成一个在右侧的厚爱> [!NOTE|aside-r] 右侧厚爱> 厚爱执行如若念念要厚爱不错折叠，你不错用 callout 的折叠语法> [!NOTE|aside-l]+ 默许伸开的厚爱> 厚爱执行> [!NOTE|aside-r]- 默许折叠的厚爱> 厚爱执行如若你念念试试其他花式的边注 callout，不错这么写> [!ERROR|aside-l] 红色花式> 还不错用别的callout，举例important， cite 等
成果如下
图片
你不错在插件:Style Settings进行格调的(改造不懂得伙伴不错望望Obsidian好意思化指南：必知技艺和提倡，打造个性化条记界面)
图片
本站仅提供存储劳动，通盘执行均由用户发布，如发现存害或侵权执行，请点击举报。