
팁과노하우
댓글 개수가 많을 때 더보기 버튼을 통해 댓글 펼치기
안녕하세요...
미니님a입니다.
개선 및 제안 게시판 내 해당 요청이 있어 간단하게 팁으로 만들었습니다.
https://rebuilder.co.kr/propose/771
댓글이 5개가 넘지 않는다면, 더보기 버튼이 보이지 않으며,
5개가 넘을 시 총 개수가 함께 노출 됩니다.
만약 스킨으로 적용하고자 한다면 아래 링크를 통해 다운로드 할 수 있습니다.
https://rebuilder.co.kr/userdata/393
기본 / 통합 모두 적용 가능합니다.
1. 기본의 경우 사용하시는 게시판 스킨 폴더의 view_comment.skin.php 파일을 열어주세요
만약 통합이라면 사용하시는 게시판 스킨 폴더 내 cmt/basic/skin.php 파일을 열어주세요
그 이후 똑같이 쓰시면 됩니다.
상단에 css 를 추가 해주세요
단. style.css 에 작성하셔도 무방합니다.
<style>
.hidden-comment { display: none; }
.load-more-btn {
display: block;
width: 100%;
padding: 15px;
margin: 20px 0;
background: #f9f9f9;
border: 1px solid #ddd;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.load-more-btn:hover {
background: #f0f0f0;
}
</style>
위치를 잘 모르겠다 하시면 아래 스샷 참고 하세요
자 다음에는 아래 코드를 찾아주세요
<article id="c_<?php echo $comment_id ?>">
그리고 아래 처럼 변경 합니다.
<article id="c_<?php echo $comment_id ?>" class="<?php if($i >= 5) echo 'hidden-comment'; ?>">
변경 이니 별도로 스샷은 업로드 하지 않습니다.
자 다음에는 아래 코드를 찾아주세요
<?php if ($i == 0) { //댓글이 없다면 ?><p id="bo_vc_empty">등록된 댓글이 없습니다.</p><?php } ?>
그리고 그 아래에 아래 코드를 추가 합니다.
<?php if($cmt_amt > 5) { ?>
<button type="button" id="load-more-comments" class="load-more-btn" data-current="5" data-total="<?php echo $cmt_amt; ?>">
더보기 (5/<?php echo $cmt_amt; ?>)
</button>
<?php } ?>
어디인지 모르겠다? 하시면 스샷 참고 하시길 바랍니다.
마지막으로 맨 하단에 보면 스크립트 댓글 열기를 찾아주세요
단. 통합의 경우는 해당 파일이 아닌 통합 스킨폴더 내 view_comment.skin.php 에 아래 내용이 있습니다.
<script>
jQuery(function($) {
//댓글열기
$(".cmt_btn").click(function(e){
e.preventDefault();
$(this).toggleClass("cmt_btn_op");
$("#bo_vc").toggle();
});
});
</script>
var $comments = $('#bo_vc article'); var $loadMoreBtn = $('#load-more-comments'); $loadMoreBtn.click(function() { var current = parseInt($(this).data('current')); var total = parseInt($(this).data('total')); var next = current + 5; var $btn = $(this); // 다음 5개의 댓글을 보여줌 $comments.slice(current, next).removeClass('hidden-comment').fadeIn(400, function() { // fadeIn 완료 후 실행 if (next >= total) { $btn.fadeOut(200); // 버튼을 부드럽게 사라지게 함 } }); // 더보기 버튼 상태 업데이트 $btn.data('current', next); $btn.text('더보기 (' + Math.min(next, total) + '/' + total + ')'); });

실제 구동 영상은 아래와 같습니다.
- 이전글클라우드플레어 : 특정 도메인 aaa.com 과 www.aaa.com 을 메인 도메인으로 이동시켜주기2025.02.25
- 다음글테스트 서버에는 정해진 아이피만 접근하기2025.02.18
댓글목록




신청 이후 담당자가 개별연락 드리고 있습니다.
입금자명과 실제 입금자가 동일한 경우 자동처리 됩니다.
결제예정 금액 : 0 (VAT별도)
하나은행(KOEXKRSE) : 258-910104-00407 / 김은정(인덱스)