티스토리 스킨: 댓글 개수 표시하기 (feat. 오디세이 스킨)

이 티스토리 블로그에서는 스피드 스타라는 유료 스킨을 한 동안 사용하다 현재는 오디세이(Odyssey)라는 기본 스킨 중 하나를 사용하고 있습니다.

시간이 날 때마다 스킨을 조금씩 수정하고 있습니다. 개별 글에서 제목 아래에 댓글 개수가 나오도록 수정해 보았습니다. 오디세이 스킨을 기준으로 글 제목 아래에 댓글 개수를 표시하고, 댓글 개수를 클릭하면 댓글 섹션으로 이동하도록 하는 방법에 대하여 살펴보겠습니다. 다른 스킨을 사용하는 경우에도 동일한 방법으로 가능합니다.

티스토리 스킨: 댓글 개수 표시하기

티스토리 블로그 글 제목 아래의 댓글 개수(예: 댓글: 3개)를 표시하고 댓글 개수를 클릭하면 댓글 섹션으로 이동하도록 했습니다.

티스토리에서 댓글 개수를 표시하는 치환자 코드는 다음과 같습니다.

<s_rp_count>{##_article_rep_rp_cnt_##}</s_rp_count>

여기에서 {...}는 [...]로 바꾸시기 바랍니다. 티스토리가 업데이트되면서 본문에 치환자를 표시하면 코드가 표시되지 않고 실행되어 결과가 표시됩니다. 예를 들어, 다음과 같이 치환자 부분이 실제 댓글 개수로 바뀌게 됩니다.

먼저 티스토리 HTML 편집 페이지에서 댓글 섹션을 찾아서 id="comments"를 추가합니다.

                    <!-- article-reply -->
                    <div id="comments" class="article-reply">
                      <div class="area-reply">
                        <s_rp>
                        ...

다음 그림을 참고해 보세요:

스킨에 따라 적절한 곳에 추가해 주세요.

그런 다음, 다음 HTML 코드를 댓글 개수를 표시할 곳에 추가하도록 합니다.

<a href="#comments"><s_rp_count>{##_article_rep_rp_cnt_##}</s_rp_count>개</a>

마찬가지로 {...}는 [...]로 변경해 주세요. 저는 다음과 같은 형식으로 추가했습니다.

<span class="comments-count"> • 댓글: <a href="#comments"><s_rp_count>{##_article_rep_rp_cnt_##}</s_rp_count>개</a></span>

오디세이 스킨을 사용하는 경우 [**<div class="box-info">**] 부분을 찾아서 적당한 곳에 추가하세요.

CSS 섹션에 추가하여 글자 색, 글자 크기 등의 스타일을 지정할 수도 있습니다. 예시:

.comments-count a {
    text-decoration: none;
    color: white;
    opacity: 0.7;
}

수정 사항을 저장하고 블로그에 방문하면 글 제목 아래에 댓글 개수가 표시되고, 댓글 개수를 클릭하면 댓글 섹션으로 이동하게 될 것입니다.

참고

https://avada.tistory.com/3217

티스토리 오디세이 스킨에서 블로그 글 제목 글자 크기 조정하기

https://avada.tistory.com/3199

티스토리 스킨을 오디세이(Odyssey)로 변경했습니다

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교