Color mode

Search notes

Filter with tag:, lang:, or path:.

記事レイアウト(Article Layout)

記事レイアウトのプリセット(article、sidebar、full-width)は、テーマルートのdata-article-layout属性を通じて記事領域の表示を決めます。ルートやコンポーネントツリーを変えずに、幅とサイドバーの構成を制御します。

プリセット

  • article:サイドエリア付きの標準的な記事レイアウト
  • sidebar:サイドバーを重視するレイアウト
  • full-width:サイドバーのない全幅の記事

プリセットはテーマルートのdata-article-layout属性で設定され、テーマ名でスコープしたCSSルールに反映されます。

記事レイアウトのCSSルール

各レイアウトプリセットは、テーマルートのdata-article-layout属性を使ったCSSルールに反映されます。:is(:root, .rb-theme-root)[data-article-layout="sidebar"]はサイドバーの幅とレイアウト構成を制御します。articleプリセットはサイドエリア付きの標準的な記事を提供し、full-widthはサイドバーを取り除いて最大幅にします。

css
:is(:root, .rb-theme-root)[data-article-layout="sidebar"] {
  --rb-layout-sidebar: 300px;
  --rb-layout-article-max: calc(100% - 300px);
}

境界

テーマはレイアウトプリセットの表示を定義しますが、ルートやコンポーネントツリーを置き換えるものではありません。コンポーネントの構造はアプリケーションが提供し、テーマはデータ属性とCSSを通じて表示を提供します。

関連用語

さらに詳しく

Local Graph

Nearby Notes

Open in Explorer →
記事レイアウト(Article Layout)テーマ(Theme)タイポグラフィ(Typography)カラーモード(Color Mode)表示層(Presentation Layer)
CurrentOutgoingBacklink