...

src/main/resources/templates/content/blog/posts.html

@@ -14,17 +14,6 @@
         let onChange = () => {console.log(editor.getMarkdown())}
         document.addEventListener("DOMContentLoaded", onLoaded);
         function onLoaded() {
-            // 1. 모든 'current' 클래스를 가진 요소를 선택하고 제거
-            const currentElements = document.querySelectorAll('.current');
-            currentElements.forEach(element => {
-                element.classList.remove('current');
-            });
-
-            // 2. 특정 조건에 맞는 요소에 'current' 클래스 추가 (예: ID가 'targetElement'인 요소)
-            const targetElement = document.getElementById('menu_posts');
-            if (targetElement) {
-                targetElement.classList.add('current');
-            }
 
         }
     </script>
@@ -65,30 +54,16 @@
                 <div class="col-6 col-12-narrower imp-narrower">
                     <div id="content">
                         <article>
-                            <header>
-                                <h2>Two Sidebar</h2>
-                                <p>Yup. Two sidebars at the same time.</p>
-                            </header>
-
-                            <span class="image featured"><img src="images/banner.jpg" alt="" /></span>
-
-                            <p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.
-                                Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.
-                                Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis nisi
-                                consequat etiam lorem ipsum dolor sit amet nullam.</p>
-
-                            <h3>And Yet Another Subheading</h3>
-                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac quam risus, at tempus
-                                justo. Sed dictum rutrum massa eu volutpat. Quisque vitae hendrerit sem. Pellentesque lorem felis,
-                                ultricies a bibendum id, bibendum sit amet nisl. Mauris et lorem quam. Maecenas rutrum imperdiet
-                                rhoncus dui quis euismod. Maecenas lorem tellus, congue et condimentum ac, ullamcorper non sapien.
-                                Donec sagittis massa et leo semper a scelerisque metus faucibus. Morbi congue mattis mi.
-                                Phasellus sed nisl vitae risus tristique volutpat. Cras rutrum commodo luctus.</p>
-
-                            <p>Phasellus odio risus, faucibus et viverra vitae, eleifend ac purus. Praesent mattis, enim
-                                quis hendrerit porttitor, sapien tortor viverra magna, sit amet rhoncus nisl lacus nec arcu.
-                                Maecenas tortor mauris, consectetur pellentesque dapibus eget, tincidunt vitae arcu.
-                                Vestibulum purus augue, tincidunt sit amet iaculis id, porta eu purus.</p>
+                            <section class="col-6 col-12-narrower imp-narrower" th:each="post : ${Posts}">
+                                <!--                    <span th:text="${cell}"></span>-->
+                                <div class="box post" onclick="goToViewer(this)" th:data="${post.id}">
+                                    <a href="#" class="image left"><img th:src="${#strings.length(post.image) > 0} ? ${post.image} : 'images/pic01.jpg'" alt="" /></a>
+                                    <div class="inner">
+                                        <h3 th:text="${#strings.length(post.title) > 0} ? ${post.title} : ('untitled[' + ${#temporals.format(T(java.time.Instant).ofEpochMilli(post.writeTime).atZone(T(java.time.ZoneId).systemDefault()).toLocalDateTime(), 'yyyy-MM-dd HH:mm:ss')} + ']')"></h3>
+                                        <p th:text="${#strings.abbreviate(post.html, 80)}" class="ellipsis"></p>
+                                    </div>
+                                </div>
+                            </section>
                         </article>
 
                     </div>