Home

複数ページを作成する準備

構造を決める

複数ページ作成用のサンプルなので、トップページの他に2ページ分を作成する。
解説は、トップページに埋め込む
・トップページは、サイドバーの無いタイプ
※ナビゲーションメニューでのページ移動ができるようにする

jsonファイルの設定を前回のものから修正する
前回のphpのパーツ化で作成したjsonファイルの構成を見直す。これは、ページ内のナビゲーションをサイドに固定したくないため。後でのカスタマイズがやりやすくなるように考える

_site_structure.jsonを新設

site_name：サイトの名前（これは必要ないかもしれない）

page_nav_position：今までサイドに固定していたページ内のindexの表示場所を選択できるようにする
①side_left ②side_right ③below_header
　※subの情報が無い場合は、自動的に「無し」とする

IntersectionObserver：①section　②title

ナビゲーション部分の表示

サイドバー部分の表示(page1 page2の両方とも)

フォルダ構造はこんな感じ

jsonファイル

jsonファイルを作成する

jsonファイルの書き方（全体の構成は右上の図を参照）
参考サイト： JSONの基本的な書き方
キーはダブルクォーテーションでくくる必要があり、シングルクォーテーションは使えない。
値は文字列の場合ダブルクォーテーションでくくる必要があるが、それ以外の場合はくくる必要はない。
複数記述する場合はコンマで区切る。
※書き方を間違えると、エラーになる。
※コメントは書けない。VSCodeの設定ファイルもjson形式だが、実際にはjsoncという形式になっているので、コメントが書ける。

トップページのデータ

pege1のデータ

pege2のデータ

ページを区別するのは、最初の "top" "page1" "page2" の部分。
その後ろに続く :{} の中にデータを書く。後ろにデータが続く場合は :{}, のようにカンマを付ける。

中の要素は、自由に名前を付けて作成することが可能。ただし、同じ名前の情報をそれぞれのページに準備することが必要。

このサイトでの設定
"folder": フォルダ名（日本語不可）
"folderpath": フォルダの中に置く場合は、"/" とする
"rootpath": 中のファイルから、ルートフォルダへのパス。サイト直下なら "./" または ""。フォルダの中なら "../"
"url": ファイル名（日本語不可）
"title": ページのタイトル（日本語可）。ナビゲーションとタブに表示

ページ内部の構造（例：page1）