(티스토리) 모든 답글에 답변다는 방법 및 최신순으로 나열하는 방법

본 게시글은

marshall-ku님의 게시글을 참고하여 작성되었습니다.

 

이번에 티스토리 블로그를 커스텀하면서 알게 된 내용을 공유할까 합니다. 우선 티스토리에서는 댓글에서 대화가 길어져도 맨 처음 댓글에만 답변 버튼이 생성되어 그곳으로 올라가 눌러줘야 하는데 이부분을 해결해 보려고 합니다.

 

만약 티스토리 스킨편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요!

(티스토리) 스킨 편집 기초 상식

우선, 답글을 달기위해 티스토리에서 기본 제공하는 답글 치환자가 있습니다.

 

html에 답글 치환자인 를 모든 답글에 적용하면 된다 싶겠지만 아닙니다!

 

만약 그렇게 적용하고 답변버튼을 누르면 해당 게시글의 맨 위로 올라가지는 현상을 볼 수 있는데, 이유는 온클릭 이벤트가 아무것도 없는데 href에 #이 있어 사이트 최상단으로 이동하게 되는 것이죠.

 

이것을 해결하려면 아래처럼 하면 됩니다.

모든 답글에 답변 다는 방법

먼저 티스토리 스킨 html에서 <s_rp2_container>을 검색하면 reply리스트 쪽이 나오는데 이곳이 바로 답변 섹션입니다.

 

만약 이곳에도 답변 버튼을 달고 싶다면, 

<a href="#" onclick="">답변</a>

위처럼 코드를 작성하는 것이 아니고!

<a href="javascript:void(0)" onclick="" class="someName">답변</a>

이런 식으로 원하는 곳에 넣어줍니다.

 

class의 someName 부분은 블로그를 운영하시는 분들께서 적당한 이름으로 수정하시면 됩니다.

 

자바스크립트를 작성하기 전에 찾아줘야 할 것이 있는데 이번엔  <s_rp_rep>입니다.

 

요 치환자를 바로 위에서 감싸주고 있는 클래스명을 찾으셔야 하는데, 보통은 <li> 태그가 있을 겁니다. 

 

이게 아래에 최신 글에도 사용할 내용이라 이 <li> 태그를 <ol>로 변경해주고 끝나는 지점에도 </ol>로 수정해줍니다.

<ol class="rgy-reply">
  <s_rp_rep>
  <li id="" class="r-copy">
     ...
     </li>
  </s_rp_rep>
</ol>

<ol> 태그에 rgy-reply이라는 클래스를 생성했죠? 물론 이 부분도 사용자가 직접 이름을 정할 수 있습니다.

 

이제 자바스크립트에 찾아준 클래스들을 하나하나 넣어 봅시다.

<script>

//답변에 넣어준 클래스명
$(".someName").each(function() {
                               //<s_rp_rep>바로 아래에 있는 li 클래스명
  $(this).attr("onclick", $(this).parents(".r-copy").find(".someName").attr("onclick"))});
                                                           //답변에 넣어준 클래스명
                                                           
</script>

쉽죠? 끝입니다! 이제 확인해보면 보든 답글에서 답변을 달 수 있게 된 것을 확인할 수 있습니다.

 

다음으로는 최신 댓글일수록 최상단에 놓이게 만들어 봅시다.

댓글 최신순으로 나열하는 방법

사실 여러 방법이 있는데 그냥 가장 간단한 방법으로 해볼게요.

 

위에서 <li> 태그를 <ol>로 변경해줬고 <ol>에 클래스까지 부여해줬죠? 그럼 그 <ol>을 감싸고 있는 클래스가 위에 존재할 겁니다. 그 클래스를 찾아주세요!

<div class="rp-list comments">
<ol class="rgy-reply">
  <s_rp_rep>
     ...
  </s_rp_rep>
</ol>
</div>

스킨마다 다르니 직접 찾아주셔야 합니다.

 

저는 rp-list comments 클래스네요. 이제 css에 몇 가지를 추가해보겠습니다.

.rp-list.comments>ol {
    display: flex;
    flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
}

끝입니다....! 간단하죠?

 

근데 가끔 방명록에 적용 안 되는 상황이 있더라고요. 방명록 쪽도 그대로 찾아봅시다.

<div class="guest-list comments">
<ol class="rgy-reply">
  <s_rp_rep>
     ...
  </s_rp_rep>
</ol>
</div>

저는 본문의 댓글과 방명록의 댓글의  클래스명을 다르게 해 줬습니다.

.guest-list.comments>ol {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
}

만약 막히신다면 댓글 남겨주세요!

 

 

읽어주셔서 감사합니다🤟