thymeleafでテンプレート内に他のテンプレートをインクルードさせたい
thymeleafを使ってテンプレート内に他のテンプレートをインクルードさせたい場合はどうすればいいのだろうか？
例えば、テンプレートのHTMLがある。
(仮に今回、hoge.htmlとする。)
<!-- hoge.html --> <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no,address=no,email=no"> </head> <body> <div>Hello World</div> </body> </html>
他のhtmlを作る際にも、metaタグは、同じ内容で、かつ、毎回、各テンプレートにコピペをしてしまうと弊害が発生してしまう。
どんな弊害かと言えば、metaタグの一部を変更したいとなった場合、コピペしたファイルを全部修正することになり、時間と手間がかかってしまう。
そもそも、コピペもめんどくさいという問題もある。
そこで、テンプレートの一部分をパーツ(別のテンプレート)として分けて、テンプレートの中に、他のテンプレートをインクルードさせれば、めんどくさいことから開放される。
調べてみると、th:replaceを使えば実現できることがわかった。
今回の場合だと、まず、metaタグ関連を別のhtmlファイルに保存させる。
(仮にmeta.htmlとする)
<!-- meta.html --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no,address=no,email=no">
作成したパーツ(別のテンプレートであり、今回の場合は、meta.html)をインクルードしたいので、もとのhtml(今回の場合は、hoge.html)で、th:replaceを使ってインクルードを行う。
<!-- hoge.html --> <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta th:replace="meta" /> </head> <body> <div>Hello World</div> </body> </html>
th:replaceを設定しているタグは、別のタグのdivやspanでも問題ないのだが、それだとなんとなく気持ち悪いし、あとから、ソースコードを見直した時に、どうして、他のタグにしたのか理由が思い出せなくなってしまうので、もともとのタグ(今回の場合は、metaタグ)を書いた。
共通処理をひとまとめにできるので、ものすごく便利。
