인덱스 페이지에 새 글 표시하기

만약 인덱스 페이지를 글 목록이 아닌 다른 것으로 꾸민다면, 아마도 블로그에 새 글이 올라왔을 때 글 목록으로 가지 않는다면 확인할 수 없다는 건 아쉬운 점일 수 있다고 생각합니다.

티스토리에서 제공하는 간단한 스크립트를 응용해서 새 글이 표시되도록 해봤습니다.

두 가지 경우를 설명해보고자 합니다.

1. 새로운 글이 올라오면 글 목록을 표시하기

2. 새로운 글이 올라오면 인덱스 페이지에서 카테고리 목록으로 넘어가기

첫 번째 방법은 인덱스 페이지를 최대한 활용할 수 있고, 두 번째 방법은 간단합니다.

새로운 글이 올라오면 글 목록 표시하기

<div class="recentPost">
    <h3>최근에 올라온 글 </h3>
    <ul>
        <s_rctps_rep>
            <li>
                <a href=""> .</a>
                <span class="cnt"></span>
            </li>
        </s_rctps_rep>
    </ul>
</div>

티스토리에서 제공하는 최근 글 치환자입니다.

만약 이미 이 치환자를 사용하셨다면, css로 인덱스 페이지로 가져와야 하고, 사용하지 않았다면 인덱스 페이지에 추가하시면 됩니다.

#tt-body-index .recent.post {
    display: none;
    position: fixed;
    width: 250px;
    height: 0;
    max-height: 340px !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    background: rgba(0, 0, 0, .5);
    border-radius: 15px;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%)
}

제가 사용한 css입니다.

display:none

overflow:hidden

max-height: 높이 값;

이 세 가지가 중요합니다.

$(function () {
    var p = $(".link_item img").length;
    p && $("#tt-body-index .recent.post").css({
        display: "block",
        height: 60 * p + 40,
        padding: 10
    })
})
 

혹시 body에 id가 추가되어 있지 않다면 body에 id="tt-body-page" 이렇게 id를 부여해주셔야 제대로 작동합니다.

.recent.post를 본인이 부여한 최근 글 목록의 class 명으로 변경하시고

height: 60 * p + 40에서

60은 글 목록 하나의 높이

40은 타이틀의 높이와 padding 값을 합한 값입니다.

글 목록에 padding-bottom 값이 있으면 다음 글 목록이 표시되니, 글 목록에 margin-bottom을 추가하시고 최근 글 목록의 padding-bottom은 0으로 해두시는 걸 추천합니다.

이해를 돕기 위해 제가 사용 중인 방식을 첨부합니다.

파란색은 요소의 크기이고, 초록색은 padding, 주황색은 margin입니다.

새로운 글이 올라오면 카테고리 목록으로 페이지 이동하기

$(function () {
    var a = $(".link_item img").length;
    "/" == document.location.pathname && 1 <= a && (location.href = "/category")
});
 

정말 훨씬 간단합니다.

인덱스 페이지를 특정 페이지로 이용 중이시라면 "/"에 해당 주소를 넣으시고, 카테고리 목록으로 이동하는 게 아닌 다른 주소로 이동하고 싶으시면 "/category"를 수정하시면 됩니다.