|
? 來源：Kuzens 如果你在Obsidian中記錄筆記時,想給筆記添加一些注釋,然而這往往在筆記類軟件是很難實現(xiàn)的功能,如果記錄在筆記中,解釋過長,影響閱讀筆記體驗,如果將注釋放在筆記末尾,往往看一個注釋會非常麻煩,然而小編發(fā)現(xiàn)一很有有趣的一款插件,通過css可以實現(xiàn)筆記的旁注功能.
1. 安裝插件:Admonition給筆記添加標(biāo)注和提示框插件在obsidian第三方插件庫中搜索:Admonition即可安裝 通過斜杠Admonitionm即可調(diào)用插件,插件可以創(chuàng)建倆種callout和admonition(區(qū)別不大,這里以callout來介紹這款插件) 
點擊Admonition: Insert Callout首選需要先選擇圖標(biāo)
選擇需不需要折疊后點擊Insert生成標(biāo)注框 
標(biāo)注框分倆個部分:標(biāo)題和內(nèi)容
標(biāo)注框內(nèi)可以添加圖片和文字
也可以進(jìn)行標(biāo)注框的嵌套
來到插件設(shè)置你可以進(jìn)行css的導(dǎo)入來設(shè)置標(biāo)注框的樣式(往往每個主題都會有標(biāo)注框的預(yù)設(shè)樣式) 
然后對標(biāo)注框的一些
復(fù)制下面的代碼存放在obsidian的css倉庫中(不懂伙伴可以看這篇文章精細(xì)管理Obsidian的CSS文件，讓您的樣式文件更智能更易用) /* @settings
name: SideNote Callout
id: sidenote-callout
settings:
-
id: top-sidenote-callout-title
title: Sidenote Callout Title to Top
title.zh: 邊注標(biāo)題置于頂部
type: class-toggle
default: false
-
id: top-left-sidenote-callout-title-position
title: Top Left Sidenote Callout Title Position
title.zh: 標(biāo)注在頂部時，左邊注的標(biāo)題位置
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: 標(biāo)注在頂部時，右邊注的標(biāo)題位置
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: 邊注與正文的間距(默認(rèn)為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: 隱藏折疊圖標(biāo)
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進(jìn)行打開(css片段的作者為:Huajin) 
通過以下代碼創(chuàng)建筆記的左右標(biāo)注框(其實就是在本來的標(biāo)注框后面添加aside-l/r表示左右)
這樣寫可以生成一個在左側(cè)的注釋
> [!NOTE|aside-l] 左側(cè)注釋
> 注釋內(nèi)容
這樣寫可以生成一個在右側(cè)的注釋
> [!NOTE|aside-r] 右側(cè)注釋
> 注釋內(nèi)容
如果想要注釋可以折疊，你可以用 callout 的折疊語法
> [!NOTE|aside-l]+ 默認(rèn)展開的注釋
> 注釋內(nèi)容
> [!NOTE|aside-r]- 默認(rèn)折疊的注釋
> 注釋內(nèi)容
如果你想試試其他樣式的邊注 callout，可以這樣寫
> [!ERROR|aside-l] 紅色樣式
> 還可以用別的callout，例如important, cite 等
效果如下
你可以在插件:Style Settings進(jìn)行風(fēng)格的(改變不懂得伙伴可以看看Obsidian美化指南：必知技巧和建議，打造個性化筆記界面)
|
