#16 board : article detail page impl

This commit is contained in:
haerong22
2022-08-15 04:05:00 +09:00
parent a304ef30cc
commit fa2895f08a
2 changed files with 35 additions and 12 deletions

View File

@@ -12,25 +12,28 @@
<body>
<header id="header"></header>
<header id="header">
헤더
<hr>
</header>
<main class="container">
<header class="py-5 text-center">
<main id="article-main" class="container">
<header id="article-header" class="py-5 text-center">
<h1>첫번째 글</h1>
</header>
<div class="row g-5">
<section class="col-md-5 col-lg-4 order-md-last">
<aside>
<p><span class="nick-name">Bobby</span></p>
<p><a class="u-url" rel="me" href="mailto:haerong22@gmail.com">bobby@mail.com</a></p>
<p><time datetime="2022-01-01T00:00:00">2022-08-12</time></p>
<p>#java</p>
<p><span id="nickname" class="nick-name">Bobby</span></p>
<p><a id="email" class="u-url" rel="me" href="mailto:haerong22@gmail.com">bobby@mail.com</a></p>
<p><time id="created-at" datetime="2022-01-01T00:00:00">2022-08-12</time></p>
<p><span id="hashtag">#java</span></p>
</aside>
</section>
<article class="col-md-7 col-lg-8">
<p>본문<br><br></p>
<article id="article-content" class="col-md-7 col-lg-8">
<pre>본문<br><br></pre>
</article>
</div>
@@ -47,11 +50,11 @@
</div>
</form>
<ul>
<ul id="article-comments" class="row col-7">
<li>
<div>
<time><small>2022-08-12</small></time>
<strong>Bobby</strong>
<small><time>2022-08-12</time></small>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Lorem ipsum dolor sit amet
@@ -92,7 +95,10 @@
</main>
<footer id="footer"></footer>
<footer id="footer">
<hr>
푸터
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>

View File

@@ -2,4 +2,21 @@
<thlogic>
<attr sel="#header" th:replace="header :: header" />
<attr sel="#footer" th:replace="footer :: footer" />
<attr sel="#article-main" th:object="${article}">
<attr sel="#article-header/h1" th:text="*{title}" />
<attr sel="#nickname" th:text="*{nickname}" />
<attr sel="#email" th:text="*{email}" />
<attr sel="#created-at" th:datetime="*{createdAt}" th:text="*{#temporals.format(createdAt, 'yyyy-MM-dd HH:mm:ss')}" />
<attr sel="#hashtag" th:text="*{hashtag}" />
<attr sel="#article-content/pre" th:text="*{content}" />
</attr>
<attr sel="#article-comments" th:remove="all-but-first">
<attr sel="li[0]" th:each="articleComment : ${articleComments}">
<attr sel="div/strong" th:text="${articleComment.nickname}" />
<attr sel="div/small/time" th:datetime="${article.createdAt}" th:text="${#temporals.format(article.createdAt, 'yyyy-MM-dd HH:mm:ss')}" />
<attr sel="div/p" th:text="${articleComment.content}" />
</attr>
</attr>
</thlogic>