ドキュメントの手順

インストール手順

使用箇所： インストールのガイド.

使い方とインターフェース

見出しとコードを伴うセットアップ手順には StepSection を使います。リストは各 Step の見出しの隣に、装飾のない等幅数字の 01、02、03 と細い接続線で番号を示します。番号を円やバッジで囲まないでください。見出しに操作、本文に期待する結果を書き、読み順は文書内に保ちます。

import Code from '@master/internal-site/components/Code'import StepSection, { Step, StepL, StepR } from '@master/internal-site/components/StepSection'<StepSection>  <Step $row>    <StepL>      <h3>Connect the stylesheet</h3>      <p>Import the entry in your app.</p>    </StepL>    <StepR>      <Code lang="css">{"@import '@master/css';"}</Code>    </StepR>  </Step></StepSection>

コンポーネントはサーバーで描画します。適切なレベルのネイティブ見出しを渡し、安定した ID を保ってください。番号は装飾であり、見出しや進捗表示の代わりではありません。番号のレールと任意の列は Guide と同じ表現を使います。46rem のコンテナーしきい値で任意の2列配置を切り替え、狭い場合は読み順に積み重ね、コードは自身の横スクロールを保ちます。結果を示すプレビューは対応する手順と一緒に置き、プレビューとソースの間隔はトレイで管理します。

インストール全体で同じ手順パターンを使います。

• クイックスタート、Vite、CLI、VS Code は各操作と結果を組み合わせます。
• Webpack、Rspack、Rsbuild は完全な設定ファイルを読める状態に保ちます。
• Astro と SvelteKit はレイアウトとサーバーフックを接続します。
• Express、PHP、Rails は個別にビルドしたアセットを完全なサーバーテンプレートへ接続します。
• Laravel、WordPress、Shopify はホストのアセットヘルパーとレイアウトフックを保ちます。
• ASP.NET Core と Blazor はアセットのビルド、ホストのビルド、公開の順序を明確にします。

完全なテンプレートとその見た目のプレビューを、1つのトレイにまとめます。DemoConfiguredExample はリテラルのソースを使い、表示する class と実際の描画を一致させます。プレビューはホストフレームワークを実行しないため、セットアップの制約は本文に残してください。

#インストールのナビゲーション

インストールは Integrations、CDN、CLI を1つの記事内のセクションとして示します。通常のリンクで各セクションのアンカーに移動します。フレームワークの Guide は独自のページ内目次を持つ別ページのままとし、レンダリングモードは各フレームワーク Guide 内のセクションに置きます。