Layouts
ページは header、main content、footer の 3 つの部分から構成されております。
<body>
<div class="body-wrap">
<header class="site-header">
<!-- header -->
</header>
<main class="site-content">
<!-- main content, or sections -->
</main>
<footer class="site-footer">
<!-- footer -->
</footer>
</div>
</body><main> タグでコンテンツ又は、section を囲みます。
<main>タグを<div>タグに変えても機能に支障ありません。<main>はページの構造の DOM の概念に影響を与えません。これは情報を与えるだけです。
React と Vue では、コンポーネントの形式で 3 つの異なるページレイアウトが提供されており、それらは /src/layouts/ フォルダーにあります。
src/
└── layouts/
├── LayoutAlternative.js
├── LayoutDefault.js
└── LayoutSignin.js- Default layout
- Alternative layout – 異なるフッター バージョンが含まれています
- Signin layout – ナビゲーションとフッターのないヘッダー バージョンが含まれています
レイアウトは必要なだけ作成できます。
ReactまたはVueでページを作成するときは、必ず目的のレイアウトをインポートしてください。