Obsidian样式-分栏布局的主页面

分栏分列布局 (Column-Page)

这是一个用于 Obsidian 中的分列布局样式,将笔记内容分栏显示,适用于包含大量内容或是需要目录索引的页面。

视图类型

横向分布

高度不变,宽度随内容变化,元素不能跨列分区
PixPin_2024-06-29_23-25-39

纵向分布


纵向模式,宽度不变,元素可以跨列分区
PixPin_2024-06-29_01-06-21

使用方法

在当前笔记的属性(Properties)面板的cssclasses属性中添加column-page属性值:
Pasted image 20240629011021

调整视图类型

  • 从Style Setting设置中调整默认视图类型:
    • 默认column-page视图为纵向视图,可以切换:
      Pasted image 20240629233210
  • 直接修改视图属性:
    • 设置column-page-v属性,即直接设置纵向视图
      • column-pagecolumn-page-v
    • 设置column-page-h属性,即直接设置横向视图
      • column-pagecolumn-page-h

常驻分列视图(不推荐)

可以设置默认所有界面在阅读模式下为分列布局的样式,需要在Style Setting插件设置面板中设置:

Pasted image 20240629072721

CSS样式

/* @settings
name: 【分栏】分栏布局(Column-Page)
id: ColumnPage
settings:
  - id: column-page
    title: 分列布局(Column-Page)
    type: class-toggle
    addCommand: true
  - id: column-page-width
    title: 分栏宽度
    description: 分栏最小宽度,单位为px
    type: variable-number
    default: 550
    format: px
  - id: column-page-type
    title: 默认分布模式
    type: class-select
    allowEmpty: false
    options:
      - value: column-h
        label: 横向模式,高度不变,不能跨列
      - value: column-v
        label: 纵向模式,宽度不变,可以跨列
    default: column-h
*/
/*! 分栏布局页面  by 熊猫 */
body {
  --column-page-width: 550px;
}
.column-v.column-page,
.column-v .column-page,
.column-page-v{
  & .markdown-preview-section {
    --file-line-width: 100% !important;

    & .snw-header-count-wrapper {
      right: unset;
    }

    column-gap: 2rem;
    column-width: var(--column-page-width) !important;
    column-rule: 2px dashed var(--background-modifier-border);
    column-fill: balance;
    /* 缩减底部空白 不然可能加载成空白页 */
    padding-bottom: 0px !important;
    min-height: unset !important;

    /* 字体大小和行内高度改变,你可以不改变,并删掉 */
    font-size: 18px !important;
    line-height: 160%;

    /* 标题更紧凑一点 */
    & h2, h3, h4, h5, h6 {
      margin-top: 10px;
      margin-bottom: 5px;
    }

    /* 选择不分列的元素,默认为h1,hr */
    & h1, hr {
      column-span: all;
    }

    /* 多列布局后,部分列表圆点会错位,这样可以避免 */
    & .list-bullet {
      position: absolute;
    }
  }

  &.column-h2 h2 {
    column-span: all;
  }
}
.column-h.column-page,
.column-h .column-page,
.column-page-h{
  & .markdown-preview-section {
    --file-line-width: 100% !important;

    & .snw-header-count-wrapper {
      right: unset;
    }

    column-gap: 2rem;
    column-width: var(--column-page-width) !important;
    column-rule: 2px dashed var(--background-modifier-border);
    column-fill: auto;
    height: 100%;
    /* 缩减底部空白 不然可能加载成空白页 */
    padding-bottom: 0px !important;
    min-height: unset !important;

    /* 字体大小和行内高度改变,你可以不改变,并删掉 */
    font-size: 18px !important;
    line-height: 160%;

    /* 标题更紧凑一点 */
    & h2, h3, h4, h5, h6 {
      margin-top: 10px;
      margin-bottom: 5px;
    }

    /* 多列布局后,部分列表圆点会错位,这样可以避免 */
    & .list-bullet {
      position: absolute;
    }
  }
}
6 个赞

注意:横向布局存在标题无法定位显示的问题

2 个赞

可以设置全局布局的切换命令,临时需要双页视图阅读的时候方便调用。
image

这个效果看起来真不错

已完成横向纵向调节,想问问图中 纵向分两栏是怎么操作的

把分栏宽度设置宽点就行

标题的样式好好看,能分享下吗?

PKMer_Obsidian 样式 - 实时编辑下大纲等级符号居右以及 Border 标题 CSS

好的,非常感谢!

请问添加snippet并声明cssclass后,写笔记时是有什么格式才能实现分栏吗?抱歉问题很小白

只在阅读模式下生效,设置完cssclass后,直接启动阅读模式就可以了。

把侧边栏都关掉后看到分栏了,不过纵向模式似乎是内容均分,不能自定义局部内容分栏是吗?

我这是个自定义局部分栏的css代码

/*
Cornell Notes
By: Jose Moruno Cadima aka @sniferl4bs 
https://youtube.com/sniferl4bs
v0.2 - Optimized
https://github.com/Snifer/CornellNotes/blob/main/.obsidian/snippets/cornell.css
*/

:root {
    --sticky-note-color: transparent;
}

/* Cornell Notes Styles */
.cornell .footnotes {
    font-size: 16px;
}

.cornell .footnotes > hr {
    background-color: red !important;
    height: 2.5rem;
    visibility: hidden;
}

.cornell .footnotes > hr:after {
    content: 'http://www.w3.org/2000/svg';
    color: skyblue;
    border-bottom: 2px dashed orangered;
    visibility: visible;
    font-size: 22px;
    padding: 0.1rem 0.1rem;
    margin-top: 0.2rem;
}

.cornell .footnotes > hr:before,
.cornell-clean .markdown-embed-title,
.cornell .list-bullet {
    display: none;
}

/* Clean Embeds */
.cornell .clean-embeds {
    --embed-background: inherit;
    --embed-border-left: 0px solid var(--interactive-accent);
    --embed-border-right: none;
    --embed-border-top: none;
    --embed-border-bottom: none;
    --embed-padding: 0;
    --embed-font-style: inherit;
}

.cornell .clean-embeds .markdown-rendered .markdown-embed {
    max-width: 100%;
}

.cornell .clean-embeds .markdown-rendered .markdown-embed .markdown-rendered {
    padding-left: 0;
}

.cornell .clean-embeds .markdown-embed-link {
    visibility: hidden;
}

/* Cornell Note Lists */
.cornell ul:not(ul ul) {
    display: grid;
    grid-template-columns: 1fr 0.15rem 1fr;
    column-gap: 0.9rem;
    margin: 0.2rem 0;
}

.cornell ul:not(ul ul) > li {
    font-size: 1.2rem;
    line-height: 2;
    padding: 0;
    margin: 0 0 2rem 0;
    position: relative;
}

.cornell ul:not(ul ul) > li:nth-child(2n+1) {
    grid-column: 1;
    text-align: left;
}

.cornell ul:not(ul ul) > li:nth-child(2n+2) {
    grid-column: 3;
}

.cornell ul:not(ul ul) > li:not(:first-child)::before,
.cornell ul:not(ul ul) > li:nth-child(2n+1)::before {
    content: '';
    position: absolute;
    border-bottom: 0.1rem dashed var(--text-normal);
    opacity: 0.2;
    width: 100%;
    bottom: -2.25rem;
    transform: translateY(50%);
}

.cornell ul:not(ul ul)::after {
    content: '';
    height: 100%;
    width: 0.15rem;
    grid-column: 2 / 3;
    grid-row: 1 / span 1000;
    background-image: linear-gradient(var(--text-normal) 60%, rgba(255, 255, 255, 0) 0%);
    background-position: right;
    background-size: 0.15rem 1.5rem;
    background-repeat: repeat-y;
    opacity: 0.1;
}

/* Image Styles */
img {
    margin-top: 4px;
    border-radius: 4px;
    overflow: hidden;
}

img[alt~='img-right'] { float: right; margin-left: 1rem; }
img[alt~='img-left'] { float: left; margin-right: 1rem; }
img[alt~='img-center'] { display: block; margin: auto; }
img[alt~='round'] { width: 30%; height: 30%; border-radius: 50%; }
img[alt~='avatar'] { width: 100px; height: 100px; object-fit: cover; display: block; }
img[alt~='portrait'] { width: 240px; height: 400px; object-fit: cover; }

img[alt="banner"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110px;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(180deg, white, white, white, transparent);
    mask-image: none;
    object-position: 50% var(--banner-v-align);
    border-radius: 0 !important;
    pointer-events: none;
}

.markdown-preview-view img:is([alt="banner"], [alt="banner-b"]) .frontmatter-container {
    display: none;
}

/* Banner positioning classes */
.bc-10 img[alt="banner"] { object-position: 50% 10%; }
.bc-20 img[alt="banner"] { object-position: 50% 20%; }
.bc-30 img[alt="banner"] { object-position: 50% 30%; }
.bc-40 img[alt="banner"] { object-position: 50% 40%; }
.bc-50 img[alt="banner"] { object-position: 50% 50%; }
.bc-60 img[alt="banner"] { object-position: 50% 60%; }

/* Image captions */
.image-embed[src*="#cap"]::after {
    content: attr(alt);
    color: var(--text-normal);
    display: flex;
    font-size: smaller;
    max-width: fit-content;
    padding: 2px 8px;
    margin-top: -6px;
    text-align: center;
}

/* Callout styles */
.callout {
    height: 100%;
    overflow: auto;
    font-size: 1.2rem;
    line-height: auto;
    width: auto;
}

/* Print Styles */
@media print {
    @page {
        margin: 1cm 0cm !important;
    }

    a:link, a:visited, a {
        text-decoration: none !important;
    }

    body {
        tab-size: 4 !important;
        --code-background: white !important;
        --code-normal: black !important;
    }

    p, h1, h2, h3, h4, h5, h6, del, code, table, ul, ol, dl {
        font-family: "Times New Roman", "楷体" !important;
    }

    p {
        font-size: 12pt !important;
        text-align: justify !important;
        line-height: 1.5 !important;
        margin-top: 5px !important;
    }

    h1, h2, h3, h4, h5, h6 {
        color: black !important;
        page-break-after: avoid;
        page-break-inside: avoid;
        font-size: 12pt !important;
        font-weight: bold !important;
        line-height: 1.3 !important;
        margin: 20px 0 0 0 !important;
        padding: 0 !important;
    }

    h1 {
        text-align: center !important;
        font-size: 18pt !important;
        margin-top: 0px !important;
        counter-reset: H2;
    }

    h6 {
        text-align: center !important;
        font-size: 10pt !important;
        margin-top: 6px !important;
    }

    h2:before { counter-increment: H2; content: counter(H2) ". \0000a0"; }
    h2 { counter-reset: H3; }
    h3:before { counter-increment: H3; content: counter(H2) "." counter(H3) ". \0000a0"; }
    h3 { counter-reset: H4; }
    h4:before { counter-increment: H4; content: counter(H2) "." counter(H3) "." counter(H4) ". \0000a0"; }

    del {
        display: block !important;
        text-align: center !important;
        font-size: 10pt !important;
        text-decoration: none;
        margin-top: 8px !important;
        padding-bottom: 10px !important;
    }

    pre {
        background-color: #fff !important;
        border: 1px dashed darkgray !important;
        border-width: 1px 0px !important;
        border-radius: 0px !important;
        line-height: 1 !important;
    }

    code {
        font-family: "Latin Modern Mono" !important;
        font-size: 10pt !important;
        color: #292929 !important;
    }

    mjx-math { font-size: 90% !important; }
    math-block { page-break-before: avoid !important; }

    svg, img {
        display: block !important;
        page-break-inside: avoid !important;
        page-break-after: avoid !important;
        margin: 10px auto 5px !important;
    }

    figcaption {
        font-family: "Latin Modern Roman" !important;
        text-align: center !important;
        margin-bottom: 16px !important;
        font-size: 8pt !important;
    }

    table, pre { page-break-inside: avoid !important; }

    table {
        font-size: 10pt !important;
        text-align: center !important;
        margin: 10px auto 5px !important;
        border-top: 1px solid #292929 !important;
        border-bottom: 1px solid #292929 !important;
    }

    th {
        color: black !important;
        font-weight: normal !important;
        border: none !important;
        border-bottom: 1px solid darkgray !important;
        padding: 2px 5px !important;
    }

    td {
        border: none !important;
        padding: 2px 5px !important;
    }

    ul, ol, dl {
        page-break-before: avoid !important;
        font-weight: normal !important;
        font-size: 11pt !important;
        line-height: 1.1 !important;
        margin-top: 0px !important;
        padding-top: 0px !important;
    }

    ul li {
        list-style-type: none !important;
        position: relative !important;
    }

    ul li::before {
        content: none !important;
    }

    hr {
        border: none !important;
        border-top: 0px solid lightgray !important;
    }

    blockquote {
        display: block !important;
        text-align: center !important;
        font-size: 10pt !important;
        color: black !important;
        border: none !important;
        padding: 0px !important;
        margin: 5px auto !important;
    }

    .mermaid {
        color: black !important;
    }
}


三种模式对照

可以写个Callout样式设置分栏,也可以使用Anyblock插件用列表实现。

谢谢!我再探索看看

看起来还挺实用!

主要是简单,从康奈尔笔记模版改过来的

楼主用的什么字体呀,挺喜欢的

霞鹜文楷 GBScreenR