이것보다는 좋은 아이디어가 떠올라 만들어봤습니다.
facebook처럼 댓글 더보기를 누르면 5개씩 추가로 나타나게 되는 플러그인입니다.
이미 티스토리 자체적으로도 일정갯수 이상 넘어가면 이전 댓글보기 버튼이 생기지만 저는 그런걸 본적이 없으니.. 5개만 돼도 생기도록 해봤습니다.
선호도에 따라 2가지 방식이 존재합니다.
공통사항
댓글 더 보기 버튼의 모양을 결정해줄 CSS 코드입니다.
style css에 다음을 추가해주세요.
#moreComment {
padding: 1em;
width: 100%;
font-size: .8em;
font-weight: bold;
background-color: #eee;
}
#moreComment:hover {
color:#fff;
background-color: #999;
}
'다음 댓글 더보기' 플러그인
1. 취향에 따라 댓글 입력창을 댓글 목록 아래로 옮겨줍니다.
<s_rp_input_form>가 댓글입력창 요소입니다. <s_rp_input_form>부터 </s_rp_input_form>까지를 잘라내서
댓글 목록과 댓글 쓰기 창을 다음과같은 구조로 붙여넣기합니다.
*이 과정은 스킨마다 다르고 복잡할 수 있으니 꼭하실 필요는 없습니다.
<s_rp>
<div class="comment">
<!-- 댓글읽기 -->
<div class="commentList">
<s_rp_container>
(생략)
</s_rp_container>
</div>
<!--F 댓글쓰기 -->
<s_rp_input_form>
(생략)
</s_rp_input_form>
</div>
</s_rp>
2.버튼 삽입
아래 코드를 </s_rp_container> 아래에 붙여넣습니다.
<button id="moreComment" onclick="moreComment()" style="display:none"> 댓글 더 보기 </button>
3. 아래 스크립트를 </body>바로 위에 붙여넣습니다.
<script>
var commentCount = $(".commentList>ol>li").length;
$(document).ready(function () {
if (commentCount > 5) {
$("#moreComment").show();
for (i=6;i<=commentCount; i++){$(".commentList>ol>li:nth-child("+i+")").hide()};
};
});
var moreCount=0
function moreComment(){
moreCount++;
for (i=1;i<=5; i++){$(".commentList>ol>li:nth-child("+(moreCount*5+i)+")").show()};
if (((moreCount+1)*5) > commentCount){$("#moreComment").hide()};
}
</script>
'이전 댓글 더 보기' 플러그인
1. 취향에 따라 댓글 입력창을 댓글 목록 위로 옮겨줍니다.
<s_rp_input_form>가 댓글입력창 요소입니다. <s_rp_input_form>부터 </s_rp_input_form>까지를 잘라내서
댓글 목록과 댓글 쓰기 창을 다음과같은 구조로 붙여넣기합니다.
*이 과정은 스킨마다 다르고 복잡할 수 있으니 꼭하실 필요는 없습니다.
<s_rp>
<div class="comment">
<!--F 댓글쓰기 -->
<s_rp_input_form>
(생략)
</s_rp_input_form>
<!-- 댓글읽기 -->
<div class="commentList">
<s_rp_container>
(생략)
</s_rp_container>
</div>
</div>
</s_rp>
2.버튼 삽입
아래 코드를 <s_rp_container> 위에 붙여넣습니다.
<button id="moreComment" onclick="moreComment()" style="display:none"> 이전 댓글 더 보기 </button>
3. 아래 스크립트를
</body>바로 위에 붙여넣습니다.
<script>
var commentCount = $(".commentList>ol>li").length;
$(document).ready(function () {
if (commentCount > 5) {
$("#moreComment").show();
for (i=1;i<=(commentCount-5); i++){$(".commentList>ol>li:nth-child("+i+")").hide()};};
});
var moreCount=0
function moreComment(){
moreCount++;
for (i=(commentCount-moreCount*5);i>=(commentCount-moreCount*5-5); i--){$(".commentList>ol>li:nth-child("+i+")").show()};
if (((moreCount+1)*5) > commentCount){$("#moreComment").hide()};
}
</script>
다른 스킨에 적용하려면
HTML과 jQuery selector에 대해 조금 아신다면 직접 수정하시면됩니다.
F12를 눌러서 자신의 스킨에서 댓글 구조가 어떻게 되어있나 확인하셔서
파란색으로 표시된 댓글목록 selector들을 알맞게 수정해주시면 됩니다.
커스텀
표시되는 댓글 갯수는 3번항목 스크립트를 수정하시면됩니다. 대충 5라고 써있는걸 다 10으로 바꾸시면 10개씩 표시됩니다.
버튼 모양은 css를 수정하세요.
버그
목록이 전부 노출되지 않은 상태에서 댓글을 달면 모든댓글이 한번에 보이게됩니다.(버그라고 하기엔 이게 올바른 방향같습니다.)
관리페이지에서 댓글확인을 위해 클릭을해도 해당댓글이 가려져있을경우 해당 댓글로 바로 스크롤되지 않음(주소창에 #comment384273 같이 나타나는 링크)
P.S.
ajax를 알았더라면 더 세련되게 구현할 수 있었을 것도 같네요..
스크립트에 비효율적인 부분있다면 지적 환영합니다!
