DAFUの備忘録 DAFUさんのぶろぐだよ

           

【初心者向け】jQueryを利用したテンプレート化

  • 2018.01.16
  • Web
【初心者向け】jQueryを利用したテンプレート化

はい、DAFUです。
今回はmonaform.starfree.jpでページをテンプレート化したので方法を書いておきます。

そもそもなんでテンプレート化しようかと思ったのかというと、年末におみくじを作りました時に、ヘッダーやフッターを書くのがめんどくさかったのです。
しかも将来このヘッダーに変更があったら…
100個ものHTMLファイルを変更する気力はありません。・。・

 

ということで今回jQueryを用いてHPをテンプレートで管理します。
この方法の良いところは、テンプレートを変更すればそのテンプレートを読み込むページが一括で変更されるというところです。

 

とりあえず制御用のJSファイルのコードを見てみましょう。
【ソースコード】
$(function(){
    $("#head").load("/temp/header.html");
    $("#footer").load("/temp/footer.html");
    $("#cent").load("/temp/cent.html")
});

これがソースコードです。
なんか雰囲気で分かりそうな気もしますが、解説します。
$(“#id・クラス名”).load(“読み込むファイル名”)
このような構造になっています。
こうすることで、<div>タグを置くだけでテンプレート用のファイルが読み込まれるようになり、一つ一つのページの構造もスマートになります。
HTMLのソースもみてみましょう。
【ソースコード】

<!DOCTYPE html>
<html>
<head>
　　<lang="ja">
　　<meta charset="UTF-8">
　　<title>テンプレートテスト</title>
　　<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="/js/temp.js" type="text/javascript"></script>
</head>
<body>
<h3>ヘッダー</h3>
<div id="head"></div>
　　<h3>なんか中間(広告の都合上分けた)</h3>
<div id="cent"></div>
　　<h3>フッター</h3>
<div id="footer"></div>
</body>
</html>

このような感じにすると、<h3>タグの下にそれぞれの要素が表示されるはずです。
大事なのは<head>内でjQueryとテンプレートを定義するJSファイルを読み込むことですが、jQueryは二重読み込みにならないかを先に確認しておきましょう。

では(‘ω’)ノ