#16 board : article detail page impl
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user