73 lines
4.8 KiB
HTML
73 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html
|
|
xmlns:th="http://www.thymeleaf.org"
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
|
|
layout:decorate="~{layout/default_layout}"
|
|
>
|
|
<head>
|
|
<th:block layout:fragment="head">
|
|
</th:block>
|
|
</head>
|
|
<th:block layout:fragment="content" id="content">
|
|
<section class="wrapper style1">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-8 col-12-narrower">
|
|
<div id="content_inner">
|
|
<article>
|
|
<section th:each="post : ${postsPage.content}">
|
|
<div class="box post" th:id="${post.id}">
|
|
<a href="javascript:void(0);" th:onclick="'goToViewer(this.parentNode)'" class="image left">
|
|
<img th:src="${post.thumb != null and not #strings.isEmpty(post.thumb)} ? @{${post.thumb}} : @{/images/pic01.jpg}" alt="Post Thumbnail" />
|
|
</a>
|
|
<div class="inner">
|
|
<h3 style="display: flex; justify-content: space-between; align-items: center;">
|
|
<span th:text="${post.title != null and not #strings.isEmpty(post.title)} ? ${post.title} : 'untitled[' + ${#temporals.format(T(java.time.Instant).ofEpochMilli(post.writeTime).atZone(T(java.time.ZoneId).systemDefault()).toLocalDateTime(), 'yyyy-MM-dd HH:mm')} + ']'"></span>
|
|
<span style="font-size: 0.75em; color: #888; font-weight: normal; white-space: nowrap; margin-left: 1em;">
|
|
(읽음: <span th:text="${post.readCount}">0</span>)
|
|
</span>
|
|
</h3>
|
|
<p style="font-size: 0.9em; color: #555; margin-bottom: 0.5em;" th:text="${'by ' + post.writer}"></p>
|
|
|
|
<p th:text="${#strings.abbreviate(post.html, 80)}" class="ellipsis"></p>
|
|
|
|
</div>
|
|
|
|
<footer sec:authorize="isAuthenticated()" style="text-align: right; margin-top: 1em;">
|
|
<a th:href="@{/blog/edit/{postId}(postId=${post.id})}" class="button small alt">수정</a>
|
|
</footer>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
|
|
<nav aria-label="Page navigation" th:if="${postsPage.totalPages > 1}" style="text-align: center; margin-top: 2.5em; font-size: 0.9em;">
|
|
<ul class="pagination" style="display: inline-block; padding-left: 0; list-style: none; border-radius: 5px; border: 1px solid #e0e0e0; overflow: hidden;">
|
|
<li th:styleappend="${postsPage.isFirst()} ? 'opacity: 0.5; pointer-events: none;' : ''" style="display: inline; float: left;">
|
|
<a th:href="${postsPage.isFirst()} ? '#' : @{/blog/posts(page=${postsPage.number - 1})}"
|
|
class="button alt small" style="border-radius:0; margin:0; border-right: 1px solid #e0e0e0;">
|
|
« Prev
|
|
</a>
|
|
</li>
|
|
<li th:each="pageNum : ${#numbers.sequence(0, postsPage.totalPages - 1)}"
|
|
style="display: inline; float: left; border-right: 1px solid #e0e0e0;">
|
|
<a th:href="@{/blog/posts(page=${pageNum})}"
|
|
th:text="${pageNum + 1}"
|
|
th:class="${pageNum == postsPage.number} ? 'button small' : 'button alt small'"
|
|
style="border-radius:0; margin:0;">
|
|
</a>
|
|
</li>
|
|
<li th:styleappend="${postsPage.isLast()} ? 'opacity: 0.5; pointer-events: none;'" style="display: inline; float: left;">
|
|
<a th:href="${postsPage.isLast()} ? '#' : @{/blog/posts(page=${postsPage.number + 1})}"
|
|
class="button alt small" style="border-radius:0; margin:0;">
|
|
Next »
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div> </div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</th:block>
|
|
</html> |