MapleStory Finger Point

๐ŸŸค JAVA/๐ŸŸค Spring

[SpringBoot] thymeleaf ํƒ€์ž„๋ฆฌํ”„ include ๋ฌธ๋ฒ•

HYEJU01 2024. 8. 26. 22:24

โ—ˆ ํƒ€์ž„๋ฆฌํ”„ include ๋ฌธ๋ฒ•

 

 

 

layout01.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div th:fragment="part1">
        ํŒŒํŠธ1 ๋ถ€๋ถ„
    </div>

    <div th:fragment="part2">
        ํŒŒํŠธ2 ๋ถ€๋ถ„
    </div>



</body>
</html>

 

layout02.html

<footer>
    <p>
        ์—ฌ๊ธฐ๋Š” ํ‘ธํ„ฐ ์˜์—ญ ์ž…๋‹ˆ๋‹ค..
    </p>
</footer>

 

 

 

 

๊ฒฐ๊ณผ .html

 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <h3>์ธํด๋ฃจ๋“œ ํ™•์ธํ•˜๊ธฐ1</h3>

    <th:block th:replace="~{/include/layout01 :: part1 }">
    </th:block>

    <th:block th:replace="~{/include/layout01 :: part2 }">
    </th:block>

    <!--ํŒŒ์ผ์„ ํ†ต์งธ๋กœ ์ธํด๋ฃจ๋“œ-->
    <th:block th:replace="~{/include/layout02 }">
    </th:block>



</body>
</html>

 

 


 

layout03.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<th:block th:fragment="ํ•จ์ˆ˜( a )">
<head>
    <meta charset="UTF-8">
    <title>๊ณตํ†ต ํ…œํ”Œ๋ฆฟ</title>

</head>
<body>

    <header>
        ํ—ค๋”์ž…๋‹ˆ๋‹ค.
    </header>

    <section>
        <th:block th:replace="${a}"></th:block>
    </section>

    <footer>
        footer์ž…๋‹ˆ๋‹ค
    </footer>


</body>
</th:block>

</html>

 

๊ฒฐ๊ณผ .html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

    <!--~{๊ฒฝ๋กœ :: ํ•จ์ˆ˜( ~{ ๋‚ดํŒŒ์ผ:: ์„ ํƒ์ž} ) }-->
    <th:block th:replace="~{./include/layout03 :: ํ•จ์ˆ˜( ~{ :: .wrap } ) }">

        <div id="wrap">
            ์—ฌ๊ธฐ๋Š” ๋ชธ์ฒด ์ž…๋‹ˆ๋‹ค. ์•„์ด๋”” ์„ ํƒ์ž #
        </div>

        <div class="wrap">
            ์—ฌ๊ธฐ๋Š” ๋ชธ์ฒด2 ์ž…๋‹ˆ๋‹ค. ํด๋ž˜์Šค ์„ ํƒ์ž .
        </div>

    </th:block>



    <!--์ด ํŒŒ์ผ์—์„œ๋งŒ ์ ์šฉํ•  jsํŒŒ์ผ์€ ๋ฐ˜๋“œ์‹œ block์˜์—ญ ๋ฐ–์— ์„ ์–ธ -->
    <script>
        alert(1);
    </script>



</html>