wixon_blog/templates/index.html

        {% extends 'base.html' %}

        {% block content %}
            <div class="container">
                <div class="content">
                    {% if not posts %}
                        <h4 style="margin-top: 100px">작성된 포스트가 없습니다.</h4>
                    {% else %}
                        <div class="content__inner">
                            <ul class="post__lists post__lists0">
                            </ul>
                            <ul class="post__lists post__lists1">
                            </ul>
                            <div class="new__div">
                                <ul class="post__lists post__lists2">
                                </ul>
                                <div class="new__post__div">
                                    <h2>최근 포스트</h2>
                                    <ul class="new__posts">
                                        {% for post in posts %}
                                            <li>
                                                <a href="{{ url_for('post', post_id=post.id) }}">
                                                    <div class="new__desc">
                                                        <p class="new__category">{{ post.category }}</p>
                                                        <h3 class="new__title">{{ post.title }}</h3>
                                                        <p class="new__date">
                                                            <b>{{ (post.add_date).strftime("%b %d") }}</b> / {{ (post.add_date).strftime("%Y") }}
                                                        </p>
                                                    </div>
                                                </a>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <ul class="fake__lists">
                            {% for r_post in posts %}
                                <li>
                                    <a href="{{ url_for('post', post_id=r_post.id) }}">
                                        <div class="lists__img">
                                            <img src="{{ r_post.thumbnail_img | default('https://via.placeholder.com/300x200', true) }}" alt="{{ r_post.title }}" onerror="this.onerror=null; this.src='https://via.placeholder.com/300x200';" />
                                        </div>
                                        <div class="lists__desc">
                                            <p class="lists__category">{{ r_post.category }}</p>
                                            <h3 class="lists__title">{{ r_post.title }}</h3>
                                            <p class="lists__content">
                                                {{ r_post.contents | safe }}
                                            </p>
                                            {# <p class="lists__content">{{ r_post.contents | safe }}</p> #}
                                            <p class="lists__date">
                                                <b>{{ (r_post.add_date).strftime("%b %d") }}</b> / {{ (r_post.add_date).strftime("%Y") }}
                                            </p>
                                        </div>
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </div>
            </div>
            <footer>
                <div class="footer__inner">
                    <div class="footer__info">
                        <p class="footer__tel">
                            TEL 02-3141-1305  / 1306    E-mail  cser@wixon.co.kr  /  기업부설연구소 제 2021154317호
                        </p>
                        <address>
                            서울시 마포구 동교로 215-1 한사 스튜디오 406 (주)윅슨어소시에이츠 / #406 , HANSA Studio, 215-1, Donggyo-ro, Mapo-gu, Seoul,  Korea
                        </address>
                        <p class="copywriter">
                            &copy; wixon associates Inc. 2022
                        </p>
                        <p class="slogan">
                            wixon. Who Invariable eXistence On the New era " wixon associates Inc. "
                        </p>
                        <ul>
                            <li><a href="/"><img src="/static/images/opusclam.png" alt="WIXON" /></a></li>
                            <li><a href="/"><img src="/static/images/lpstock.png" alt="WIXON" /></a></li>
                        </ul>
                    </div>
                    <h2 class="footer__logo">
                        <a href="/"><img src="/static/images/logo.png" alt="WIXON" /></a>
                    </h2>
                </div>
            </footer>
            <script>
            moment.locale('en');
            console.log(moment().format('ll'));

            $(document).ready(function() {
                function Mobile() {
                    return $(window).width() <= 1023;
                }


                if(Mobile()){
                    // 모바일용 메뉴 동작

                }else{
                    // PC용 메뉴 동작
                    const count__lists = $(".fake__lists li").length;
                    if (count__lists < 4) {
                        for (let i = 0; i < count__lists; i++) {
                            let n_1 = i % 3;
                            switch (n_1) {
                                case 1.:
                                    $(".post__lists0").append($(".fake__lists li:first-child"));
                                    break;
                                case 2:
                                    $(".post__lists1").append($(".fake__lists li:first-child"));
                                    break;
                                case 0:
                                    $(".post__lists2").append($(".fake__lists li:first-child"));
                                    break;
                            }
                        }
                    }else if(count__lists>3 && count__lists<7){
                        $(".post__lists2").append($(".fake__lists li:first-child"));
                        for (let i = 0; i < count__lists-1; i++) {
                            let n_1 = i % 2;
                            switch (n_1) {
                                case 0:
                                    $(".post__lists0").append($(".fake__lists li:first-child"));
                                    break;
                                case 1:
                                    $(".post__lists1").append($(".fake__lists li:first-child"));
                                    break;
                            }
                        }
                    }else{
                        for(let i=0;i<6;i++){
                            let n_1 = i % 2;
                            switch(n_1){
                                case 0:$(".post__lists0").append($(".fake__lists li:first-child"));
                                    break;
                                case 1:$(".post__lists1").append($(".fake__lists li:first-child"));
                                    break;
                            }
                        }
                        $(".post__lists2").append($(".fake__lists li:first-child"));
                    }
                    $(".fake__lists").html("");
                }
            })
        </script>
        {% endblock %}
        </div>
</body>
</html>