131 lines
6.8 KiB
HTML
131 lines
6.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html
|
||
|
|
xmlns:th="http://www.thymeleaf.org"
|
||
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
||
|
|
layout:decorate="~{layout/default_layout}"
|
||
|
|
>
|
||
|
|
<th:block layout:fragment="head">
|
||
|
|
<script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
|
||
|
|
<link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
|
||
|
|
<script type="text/javascript" th:src="@{/js/blog.js}"></script>
|
||
|
|
<link th:href="@{/css/blog.css}" rel="stylesheet" />
|
||
|
|
<script th:inline="javascript">
|
||
|
|
let editor
|
||
|
|
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>
|
||
|
|
</th:block>
|
||
|
|
<th:block layout:fragment="content" id="content">
|
||
|
|
<section class="wrapper style1">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row gtr-200">
|
||
|
|
<div class="col-3 col-12-narrower">
|
||
|
|
<div id="sidebar1">
|
||
|
|
<section>
|
||
|
|
<h3>Just a Subheading</h3>
|
||
|
|
<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 et nisi etiam.</p>
|
||
|
|
<footer>
|
||
|
|
<a href="#" class="button">Continue Reading</a>
|
||
|
|
</footer>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h3>Another Subheading</h3>
|
||
|
|
<ul class="links">
|
||
|
|
<li><a href="#">Amet turpis, feugiat sit amet</a></li>
|
||
|
|
<li><a href="#">Ornare in hendrerit lectus</a></li>
|
||
|
|
<li><a href="#">Semper mod quis eget dolore</a></li>
|
||
|
|
<li><a href="#">Consequat lorem phasellus</a></li>
|
||
|
|
<li><a href="#">Amet turpis feugiat amet</a></li>
|
||
|
|
<li><a href="#">Semper mod quisturpis nisi</a></li>
|
||
|
|
</ul>
|
||
|
|
<footer>
|
||
|
|
<a href="#" class="button">More Random Links</a>
|
||
|
|
</footer>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<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>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-3 col-12-narrower">
|
||
|
|
<div id="sidebar2">
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h3>Another Subheading</h3>
|
||
|
|
<ul class="links">
|
||
|
|
<li><a href="#">Amet turpis, feugiat sit amet</a></li>
|
||
|
|
<li><a href="#">Ornare in hendrerit lectus</a></li>
|
||
|
|
<li><a href="#">Semper mod quis eget dolore</a></li>
|
||
|
|
<li><a href="#">Consequat lorem phasellus</a></li>
|
||
|
|
<li><a href="#">Amet turpis feugiat amet</a></li>
|
||
|
|
<li><a href="#">Semper mod quisturpis nisi</a></li>
|
||
|
|
</ul>
|
||
|
|
<footer>
|
||
|
|
<a href="#" class="button">More Random Links</a>
|
||
|
|
</footer>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h3>Just a Subheading</h3>
|
||
|
|
<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 et nisi etiam.</p>
|
||
|
|
<footer>
|
||
|
|
<a href="#" class="button">Continue Reading</a>
|
||
|
|
</footer>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</th:block>
|
||
|
|
</html>
|