[티스토리 블로그 스킨 제작 가이드 강의 9] 최근 댓글

스킨 저장하기

하지만 바로 스킨을 변경하면 기존의 스킨이 사라지기 때문에 따로 저장을 해둬야하는데요. 관리 페이지에서 스킨 변경 에 들어가보겠습니다.

그러면 우리가 수정했던 스킨이 (사용자 수정) 이라고 나와 있는데요. 내 스킨이라고 스킨을 등록한 다음에 수정을 해서 그렇습니다. 아래 두 가지 버튼으로 스킨을 저장할 수 있어요.

먼저 보관 버튼을 누르면 스킨 등록처럼 현재 코드 내용을 스킨으로 만들어서 보관해주는데요. 스킨명은 내 스킨 v2 라고 해서 확인 버튼을 눌러보겠습니다.

그러면 스킨 목록에서는 우리 스킨이 없지만 스킨 보관함에 들어가면

이렇게 처음 등록했던 내 스킨과 함께 내 스킨 v2 가 들어있습니다.

이런 식으로 구현한 스킨을 저장해뒀다가 다시 적용해서 사용할 수 있습니다.

이번엔 다운로드 버튼을 눌러보겠습니다.

그러면 CustomSkin이라는 이름과 날짜가 들어간 압축파일이 다운로드됩니다.

압축을 해제하고 폴더 안의 내용을 보면 우리가 업로드했던 파일들이 들어가 있습니다.

그런데 잘 보시면 index.xml 파일은 없는데요. 내용이 없는 빈 파일이였기 때문에 제외된 것 같습니다. 이 파일들로 다시 스킨 등록하면 그대로 사용할 수 있겠죠?

      참고로 index.xml 파일은 필수파일이라 없으면 안되기 때문에, 다시 빈 파일로 만들어서 같이 업로드해주셔야합니다.

스킨 등록으로 이동해서 파일들을 업로드하고 저장을 클릭해보겠습니다.

마찬가지로 스킨 이름을 지어주시면 되는데 이번엔 구별될 수 있게 내 스킨 v2.2 라고 지어주겠습니다.

      실제로 다른 사람들이 스킨을 배포할 때 이런 식으로 다운로드해서 스킨 파일들을 전달하고 받은 사람은 이것들로 등록을 해서 사용합니다.

스킨 보관함을 보시면 이렇게 백업된 스킨들이 들어있습니다. 내 스킨 v2.2와 내스킨 v2는 같은 스킨이겠죠?

스킨 변경 시 주의사항

스킨을 이렇게 백업을 했지만 주의하실 사항ㅗ메ㅔㅛ$020

이 있습니다. 스킨을 변경할 때 잠시 이런 경고창을 보게 되는데요.

말 그대로 홈 커버와 사이드바 설정이 초기화 될 수 있습니다. 사이드바 설정에 들어가보시면 다행히도 방문자 수나 태그 클라우드는 그대로 있지만, 태그 개수를 10개로 했었던게 30개로 바뀌어 있습니다.

이렇게 의도치 않게 원래 설정들이 초기화될 수 있으니 고려하고 변경해주시길 바랍니다.

스킨 변경하기

이제 댓글을 쓰기 위해 Book Club 스킨으로 바꿔보겠습니다. 스킨 목록에서 Book Club 스킨을 찾아 적용해주세요.

댓글 작성하기

이제 글 관리에서 아무 글이나 써보겠습니다.

공개로 포스팅을 올린 뒤에 글 아래에 댓글을 5개 정도 써보겠습니다.

이제 이전에 만들던 스킨으로 되돌려보겠습니다. 스킨 변경에 들어가서 보관으로 만들어두었던 내 스킨 v2 에 적용 버튼을 누릅니다.

최근 댓글 치환자

스킨 가이드에서 최근 댓글 부분을 보시면 <s_rctrp_rep> 라는 그룹치환자가 있습니다. 이것도 이전에 랜덤 태그와 마찬가지로 설정한 개수만큼 댓글 개수를 만들어주는데요.

해당 댓글이 있는 주소와 내용, 쓴 사람 이름과 시간까지 댓글 관련 내용들은 다 불러올 수 있습니다.

      그리고 rctrp_rep의 뜻이 무엇일까 곰곰히 생각해보았는데, recent reply repeat을 줄인 말이 아닐까 조심스레 생각합니다. 뜻을 해석하자면 최근 댓글 반복 이라고 볼 수 있겠죠? 맨 앞에 있는 s는 skin이 아닐까 생각합니다.

예시 코드를 가져와서 sidebar에 넣어보겠습니다.

html

      <s_sidebar_element>
  ...
</s_sidebar_element>
<s_sidebar_element>
  <!-- 최근에 달린 댓글 -->
  <div class="recentComment">
    <h3>최근에 달린 댓글</h3>
    <ul id="recentComments">
      <s_rctrp_rep>
        <li>
          <a href="[##_rctrp_rep_link_##]">[##_rctrp_rep_desc_##].</a>
          <span class="info_wrap">
            <span class="name">[##_rctrp_rep_name_##]</span>
            <span class="date">[##_rctrp_rep_time_##]</span>
          </span>
        </li>
      </s_rctrp_rep>
    </ul>
  </div>
</s_sidebar_element>

적용을 하고 미리보기 했을 때 나타나지 않는다면 사이드바에서 설정이 적용이 안되어 있는지 확인해보세요.

최근 댓글은 태그 위로 올라가도록 하겠습니다. 변경사항을 저장하고 블로그에 와서 개발자도구로 보면 치환자들이 어떤 식으로 치환되었는지 알 수 있습니다. 지금은 작성한지 얼마 안되서 시간으로 나오지만, 시간이 지나면 작성한 날짜가 나타나요.

마찬가지로 최근 댓글들은 사이드바에서 개수과 몇 글자까지 나오게할지 설정할 수 있습니다.

지금은 4개까지 설정되어있어서 5개를 작성했지만 4개까지만 나오는 거구요. 이제 기능들을 알았으니 Book Club 스킨처럼 최근 댓글을 구현해보도록 하겠습니다.

HTML 편집 페이지로 돌아와서 기존 코드들은 지워주겠습니다.

html

      <s_sidebar_element>
  <!-- 최근에 달린 댓글 -->
  ...
</s_sidebar_element>

그리고 recent-reply class를 가진 <div> 태그를 추가하고 그 안에 최근댓글이라고 제목을 넣겠습니다.

html

      <s_sidebar_element>
  <!-- 최근에 달린 댓글 -->
  <div class="recent-reply">
    <h3>최근댓글</h3>
  </div>
</s_sidebar_element>

제목 아래에 <li>로 댓글들이 여러개 만들어지도록 할게요.

html

      <s_sidebar_element>
  <!-- 최근에 달린 댓글 -->
  <div class="recent-reply">
    <h3>최근댓글</h3>
    <ul>
      <s_rctrp_rep>
        <li></li>
      </s_rctrp_rep>
    </ul>
  </div>
</s_sidebar_element>

그리고 <a> 태그를 추가해서 링크와 내용을 넣어주겠습니다.

html

      <s_sidebar_element>
  <!-- 최근에 달린 댓글 -->
  <div class="recent-reply">
    <h3>최근댓글</h3>
    <ul>
      <s_rctrp_rep>
        <li>
          <a href="[##_rctrp_rep_link_##]">[##_rctrp_rep_desc_##]</a>
        </li>
      </s_rctrp_rep>
    </ul>
  </div>
</s_sidebar_element>

적용하고 미리보기하면 이렇게 최근댓글들이 나타나는데요. 스타일도 꾸며보겠습니다.

CSS 스타일 꾸미기

기존에 tagbox 스타일과 똑같이 복사해서 .recent-reply class에 적용해보겠습니다.

css

      .recent-reply {
  margin-bottom: 30px;
  font-size: 14px;
  color: gray;
  line-height:1.6;
}

.recent-reply h3 {
  font-size: 14px;
  margin-bottom: 5px;
}

다시 적용하고 새로고침하면 이렇게 최근 댓글이 완성되었습니다.