- カスタマイズ
新しいページの作り方

このサイトにおける新しいページの作り方を紹介します。
HTMLファイルを複製する
このプロジェクトではテンプレートファイルを用意しています。
テンプレートページ
テンプレートファイルは/template/index.html
になっており、これを複製してフォルダ名を変えることで新しいページになります。
例えば、/about/
というページを作りたい場合、templateフォルダごと複製してtemplateをaboutに変更します。
/templateのコピー/index.html
↓
/about/index.html
CSSファイルを作成する
CSSの設計上、使用するパーツを都度headに指定する方法をとっています。
そのため新しくページを作成する場合には、対応するCSSファイルも新しく作成すると良いです。
例えばaboutページのCSSファイルを追加する場合、/assets/css/pages/about.css
を作りheadに挿入します。
<head>
<!-- CSS -->
<!-- pagesはここに挿入 -->
<link rel="stylesheet" href="../assets/css/pages/about.css">
<!-- / CSS -->
</head>
また、ボタンやカード型などの既製パーツも使用できます。
パーツ一覧から使用したいパーツがあれば記事を参考に追加してみてください。
JSファイルを作成する
ページ固有のJavaScriptを書きたい場合は新しくファイルを作成する必要があります。
/assets/js/
にxxx-index.js
というファイルを作成します。
例えばaboutページならabout-index.jsになります。
$(function () {
// ----------------------------------------------
// aboutページ
// ----------------------------------------------
// ここに処理を追加
});
作成したJSファイルはheadタグのcommon.jsファイルの後に挿入してください。
<head>
<!-- js -->
<script type="module" src="./assets/js/common.js" defer></script>
<script type="module" src="./assets/js/about-index.js" defer></script>
<!-- / js -->
</head>
また、全ページ共通のJSは/assets/js/common.js
に追記します。
コンテンツを作成する
ページのベースができたのであとはどんどん作成していってください。
titleの変更やヘッダーフッター周りの変更なども忘れずに。
グッドラック!
share
この記事がよかったらシェアお願いします!