コーディングする際にヘッダーなどの共通部分を
インクルードすることはよくあります。
PHPやSSI、javascriptなど方法は色々あると思うのですが、
今回は、こんな方向けのインクルード方法です。
・静的なページのコーディング（あるいはプロトなど簡易なもの）
・HTMLテンプレートエンジン使いたくないです。
・webpackなどのバンドラーも使いたくないです。
・PHPインクルードしたくないです。
・とりあえず、簡単なコーディングなのでささっとインクルードしたいです。
・だけど、ページ固有値（ページタイトルなど）は渡せると良いなぁ。
上記に当てはまる案件があるのかどうか怪しいところですが、
jQueryのみで実装してみます。
[前提]
・<header>タグの中身をインクルード
・jQuery使用
・ページ固有値として「ページタイトル」、「パンくずリストの情報」を渡したい
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- インクルードしたい位置にidを指定しておきましょう。 -->
<header id="header"></header>
<main>
<p>サンプルHTMLです。</p>
</main>
<footer></footer>
<!-- jQuery読み込む -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- js読み込む -->
<script src="./main.js"></script>
<!-- ページ固有の情報を渡してあげる -->
<script>
$(function(){
// パンくずリストの情報を設定します。
const breadcrumbArray = [
{
name: 'パンくず１',
href: 'index.html'
},
{
name: 'パンくず２',
href: 'hogehoge.html'
},
{
name: 'パンくず３',
href: 'fugafuga.html'
}
];
// functionを呼び出す時に、ページタイトルと上で設定したパンくず情報を渡します
headerInclude('タイトル', breadcrumbArray);
})
</script>
</body>
</html>header.html
インクルードしたい部分は別ファイルとして切り出しておきます。
<div>
<p>ヘッダーです。</p>
<!-- タイトルを入れる場所に{$title}を記述 -->
<h1>{$title}</h1>
<div>
<!-- パンくずリストを入れる場所に{$breadcrumb}を記述 -->
<ul>{$breadcrumb}</ul>
</div>
</div>main.js
// 共通ヘッダーの呼び出し
function headerInclude(title, breadcrumbArray){
// ajaxでheader.htmlの取得
$.ajax({
type: 'get',
// urlで指定したいファイルのパスを指定
url: 'header.html',
dataType: 'html',
success: function(data) {
// タイトルの置き換え
data = data.replace(/\{\$title\}/g, title);
// パンくずリストの置き換え
const breadcrumbList = [];
$(breadcrumbArray).each(function(index, item){
// テキストとhrefの値をセット
const breadcrumbItem = '<li><a href="' + item.href + '">' + item.name + '</a></li>';
// 配列に格納
breadcrumbList.push(breadcrumbItem);
});
// 配列に格納されたbreadcrumbItemたちを文字列として連結
const insertEle = breadcrumbList.join('');
console.log(insertEle);
//下記が出力されます
// <li><a href="index.html">パンくず１</a></li><li><a href="hogehoge.html">パンくず２</a></li><li><a href="fugafuga.html">パンくず３</a></li>
data = data.replace(/\{\$breadcrumb\}/g, insertEle);
// header要素にappendする
$('#header').append(data);
}
});
}
※※const動かない環境はvarに書き換えていただけますよう。。。?♂️
表示結果
グレーの部分がインクルードされたheaderです。
基本的にはheader.htmlのなかで、個別に値を変更したい箇所だけ
{$hogehoge}でマーキングしておき、
jQueryでreplaceしていくだけなので、必要があれば他にも渡してあげてください。
Ajaxと聞くと、APIでのデータ取得というイメージが強かったのですが、
色々使えるのだな、と学びました。（ツールを使いこなす柔軟な頭がほしい）
あくまで簡易的なものですが、何かの参考になれば嬉しいです。
