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;
    }
  }
}
3 个赞

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

2 个赞