記事レイアウト(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はサイドバーを取り除いて最大幅にします。
:is(:root, .rb-theme-root)[data-article-layout="sidebar"] {
--rb-layout-sidebar: 300px;
--rb-layout-article-max: calc(100% - 300px);
}
境界
テーマはレイアウトプリセットの表示を定義しますが、ルートやコンポーネントツリーを置き換えるものではありません。コンポーネントの構造はアプリケーションが提供し、テーマはデータ属性とCSSを通じて表示を提供します。