はい、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は二重読み込みにならないかを先に確認しておきましょう。

では('ω')ノ

コメント

コメントフォーム
評価する
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット