【handlebars】HTMLの共通部分をパーシャル化して管理する方法
はじめに
株式会社TOKOSのタクヤです！
今回はヘッダーやフッターなどの共通部分をパーシャル化する方法を解説します！
handlebarsというライブラリを用いた簡単な方法ですのでぜひ試してみてください！
対象読者
- HTMLコーダー
- ヘッダーやフッターのHTMLを効率よく管理したい方
前提
ViteとTypeScriptの環境を使用しています。
バージョンは以下のとおりです。
| Node | 20.11.1 |
|---|---|
| Vite | 5.2.0 |
| TypeScript | 5.2.2 |
| vite-plugin-handlebars | 2.0.0 |
導入
プラグインの導入
ライブラリの導入を行います。
今回使うライブラリはvite-plugin-handlebarsです。
以下コマンドでインストールしてください。
$ yarn add -D vite-plugin-handlebarsディレクトリ構造
ここでプロジェクト全体のファイル構成を確認します。
├── node_modules
├── public
├── src
│ ├── company
│ │ └── index.html
│ ├── css
│ ├── js
│ │ ├── data.ts
│ │ └── main.ts
│ ├── partials
│ │ ├── footer.hbs
│ │ └── header.hbs
│ └── index.html
├── package.json
└── vite.config.jssrc/partialsの中にヘッダーやフッターなどの共通パーツを入れます。
拡張子は.hbsです。
src/jsの中にプロジェクト全体で使用するサイト名やページ単位で使用するタイトルを記載したdata.tsと、JavaScriptのエントリーポイントとなるmain.tsがあります。
src直下にあるindex.htmlはトップページ、src/companyの直下にあるindex.htmlは会社概要ページのファイルです。
各ファイルの設定
ライブラリの導入が完了したら、各ファイルの設定を行っていきます。
vite.config.jsの設定
vite-plugin-handlebarsを使うためにvite.config.jsの設定をしていきます。
import { resolve } from "path"
import { defineConfig } from "vite"
import handlebars from "vite-plugin-handlebars"
import { pageData, siteData } from "./src/js/data"
export default defineConfig({
// 省略
plugins: [
handlebars({
partialDirectory: resolve(__dirname, "src/partials"),
context: (pagePath) => {
return {
siteTitle: siteData.title,
page: pageData[pagePath],
}
},
}),
],
})partialDirectoryの値に共通パーツが入っているsrc/partialsを指定します。
contextの値には各ページで使用するための情報を返す関数を設定しています。
関数内のsiteTitleとpageは.htmlや.hbsで使用できます。
data.tsの設定
export const siteData = {
title: "株式会社TOKOS",
}
export const pageData = {
"/index.html": {
title: siteData.title,
},
"/company/index.html": {
title: `会社概要 | ${siteData.title}`,
},
}サイト、トップページ、会社概要ページのタイトルを定義しています。
共通パーツの作成
共通パーツの作成をしていきます。
header.hbsとfooter.hbsを作成していきます。
header.hbsの作成
全ページ共通のheadタグとbodyタグの開始、およびヘッダーナビゲーションを共通化しています。
</body>と</html>の閉じタグはfooter.hbsで記述するため、ここでは含めません。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{page.title}}</title>
</head>
<body>
<header>
<ul class="global-menu">
<li>
<a href="/">トップ</a>
</li>
<li>
<a href="/company/">会社概要</a>
</li>
<li>
<a href="/service/">サービス</a>
</li>
<li>
<a href="/contact/">お問い合わせ</a>
</li>
</ul>
</header>titleタグには{{ page.title }}でページにおけるタイトルを表示しています。
footer.hbsの作成
<footer>
<ul class="global-menu">
<li>
<a href="/">トップ</a>
</li>
<li>
<a href="/company/">会社概要</a>
</li>
<li>
<a href="/service/">サービス</a>
</li>
<li>
<a href="/contact/">お問い合わせ</a>
</li>
</ul>
</footer>
<script type="module" src="/js/main.ts"></script>
</body>
</html>フッターとJavaScriptの読み込み、および</body>と</html>の閉じタグを記述しています。
共通化パーツの表示
最後に共通化したパーツを表示していきます。
HTMLファイル
{{> header }}
<h1>{{page.title}}のトップページ</h1>
{{> footer}}{{> header}}と{{> footer}}で共通化してあるヘッダーとフッターを読み込んでいます。
共通化したパーツの表示は{{> [ファイル名]}}のような形になります。
これで共通化したパーツの表示ができました。
終わりに
今回はHTMLの共通部分をパーツ化する方法を説明しました。
ぜひhandlebarsを使って共通化パーツを作り、HTMLの管理を効率化してみてください。
この記事を書いた人
