✿    来源：Kuzens

如果你在Obsidian中记录笔记时,想给笔记添加一些注释,然而这往往在笔记类软件是很难实现的功能,如果记录在笔记中,解释过长,影响阅读笔记体验,如果将注释放在笔记末尾,往往看一个注释会非常麻烦,然而小编发现一很有有趣的一款插件,通过css可以实现笔记的旁注功能.

1. 安装插件:Admonition给笔记添加标注和提示框

插件在obsidian第三方插件库中搜索:Admonition即可安装

图片

2.插件的基本使用:文章内添加注释框 

通过斜杠Admonitionm即可调用插件,插件可以创建俩种callout和admonition(区别不大,这里以callout来介绍这款插件)

图片

点击Admonition: Insert Callout首选需要先选择图标

图片

选择需不需要折叠后点击Insert生成标注框

图片

标注框分俩个部分:标题和内容

图片

标注框内可以添加图片和文字

图片

也可以进行标注框的嵌套

图片

来到插件设置你可以进行css的导入来设置标注框的样式(往往每个主题都会有标注框的预设样式)

图片

然后对标注框的一些

图片

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美化指南：必知技巧和建议，打造个性化笔记界面)

图片

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。