반응형


    댓글 더 보기 플러그인은 이미 몇달 전 이 블로그에 적용하고 소개해 드렸었는데요.

    티스토리 댓글 길어질 때 '댓글 더보기' 플러그인


    기능상 부족한 점을 보완하고, 애니메이션까지 추가해서 업그레이드 해보았습니다.

    물론 성능 부담은 최소한으로 줄이려 노력했습니다.



    댓글 더 보기 플러그인을 사용하면 뭐가 좋나요?

    제 경우는 댓글 목록 아래에 댓글 입력창이 있는 경우를 선호합니다.

    그래야 댓글에 있는 내용을 한번이라도 읽어보고 쓸데없는 중복 댓글을 달지 않을테니까요.


    그런데 댓글목록이 너무 길어질 경우 댓글을 달려면 스크롤을 한참 내려야하는 불편이 생기게됩니다.

    그래서 페이스북처럼 댓글이 너무 많아질 경우 몇개만 보여주고, 나머지는 더 보기를 눌러야 보이는 방식을 적용한 것입니다.


    결국 장점은 저와 비슷한 생각을 갖고 계신 분들에게만 장점일지도 모르겠습니다.

    • 댓글 입력창을 댓글 목록 아래에 배치해도 큰 불편이 없다.
    • 댓글이 많을 경우에도 스크롤이 짧아진다.
    • 재미있다(?)



    지난 버전에서 달라진점

    • 대부분의 스킨에서 사용 가능하도록 수정했습니다. (티스토리 기본스킨일지라도!)
    • 적용법이 더 쉬워졌습니다.
    • 댓글 더 보기 버튼이 표시될 댓글 갯수를 설정할 수 있습니다.
    • 더 보기 버튼에 현재 보여진 댓글 갯수와 남은 댓글 갯수가 표시됩니다.
    • 댓글을 한번에 다 보이게 하는 '전체보기'버튼을 추가했습니다.
    • 애니메이션이 추가되어 새로 보이는 댓글이 어떤 것인지 파악하기 쉬워졌습니다.
    • 댓글이 50개가 넘어서 티스토리 자체의 '이전 댓글 보기' 버튼이 생성되더라도 정상 작동합니다.



    .


    적용 방법

    skin.html에서 </body> 윗줄에 다음 스크립트를 붙여넣으면 끝입니다.

    <script>window.jQuery||document.write('<script src="http://s1.daumcdn.net/svc/original/U03/cssjs/jquery/jquery-1.11.0.min.js"><\/script>');</script>

    <script>

    // 댓글 더 보기 플러그인 - http://nubiz.tistory.com/546

    var thresholdCount = 8; //댓글 표시 갯수

    $("li[id^='comment']").parent().first().addClass("nubiz");

    var commentCount = $(".nubiz>li[id^='comment']").length;

    $(".nubiz").append('<button id="moreComment" onclick="moreComment()" style="display:none"> 보기 </button><button id="allComment" onclick="showAllComment()" style="display:none">전체</br>보기</button><style>#moreComment {width: 85%;height: 50px;font-size: .8em;font-weight: bold;background-color: #eee;float:left;}#allComment{width: 15%;height: 50px;font-size: .8em;font-weight: bold;background-color: #eee;}#moreComment:hover,#allComment:hover {color:#fff;background-color: #999;}</style>')

    function refeshComment() {

        $("#moreComment").html("더 보기 [ " + $("li[id^=comment]:visible").length + "/" + $("li[id^='comment']").length + " ]");

    }

    function moreComment() {

        $(".nubiz>li[id^='comment']:hidden:lt("+thresholdCount+")").show(500)

        if($("li[id^='comment']:hidden")[0]==undefined){

            $("#moreComment, #allComment").hide(500)

        };

        refeshComment();

    }

    function showAllComment() {

        $(".nubiz>li[id^=comment]").show(500);

        $("#moreComment, #allComment").hide(500);

    }

    if (commentCount > thresholdCount) {

        $("#moreComment, #allComment").show();

        $(".nubiz>li[id^='comment']:gt(" + (thresholdCount-1) + ")").hide();

        refeshComment();

    };

    $("li[id^='ttMorePreviousComments']").click(function(){showAllComment()});

    </script>

    수정할 부분은 파란색 표시된 8입니다.

    댓글 갯수가 8개가 넘어가면 더 보기 버튼이 표시되고, 클릭하면 8개씩 댓글들 더 보여주게 됩니다.(대댓글을 제외한 1차 댓글 기준)

    css를 다룰 줄 안다면, 노란색부분을 수정해서 버튼 모양을 수정할 수 있습니다.


    댓글 목록과 댓글 입력창의 순서를 바꾸고 싶으신 분은 맨위에서 두번째 줄의 이전 글 링크에서 확인하세요.



    주의사항

    화면설정-화면출력에서 댓글 펼침에 체크가 되어있어야합니다.




    아래에 직접 댓글을 달아둘테니 테스트 해보세요!

    반응형
    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함