친효스킨 긴급 패치! 티스토리 페이지 글이 보이지 않음 + 사이드바 문제 + 커버 초기화 해결 방법
안녕하세요. 친절한효자손입니다. 제보가 들어왔습니다. 친효스킨 최신 버전 사용자께서 티스토리의 페이지 기능을 사용하고 계신데 친효스킨 적용 이후에 페이지 글이 보이지 않는 문제에 대해 문의해 주셨습니다. 과거에 저도 페이지 글을 테스트겸 두 개 정도 작성을 했었기에 바로 들어가 확인해보니 말씀처럼 정말 글이 아예 출력이 되지 않는 문제를 목격했습니다. 타스킨은 다 되는데 친효스킨만 안 된다는것은 친효스킨의 문제가 확실해 보입니다.
티스토리 페이지란?
티스토리 관리자 화면에 들어가보시면 왼쪽의 콘텐츠 카테고리에 페이지 관리라는 소 카테고리가 보일것입니다. 여기에서 글을 작성하시면 자신의 티스토리 도메인 주소에 /pages/문서번호 형태로 글 주소가 세팅됩니다. 페이지의 글도 검색엔진에 똑같이 노출됩니다.
이 페이지라는 기능은 과거 티스토리가 익스플로러의 어도비 플래시 플레이어에 의존도가 높았던 구형 글쓰기 에디터가 메인이던 시절에 업데이트된 기능 중 하나입니다. 페이지의 글쓰기는 현재의 티스토리 신형 글쓰기 에디터 형태였습니다. 제 생각에는 구버전 글쓰기 에디터를 바로 없애버리면 혼선이 있을수도 있으니 이런 페이지라는 기능을 만들어 신형 글쓰기 에디터에 익숙해지도록 하기 위한 목적이 있지 않았을까 싶습니다. 아무튼 저도 페이지 글은 스킨 개발 목적으로 딱 두 개만 작성했고 이후로는 한 번도 이용하지 않았습니다.
티스토리 공식 무료 스킨과 비교하여 원인 발견
티스토리에서 배포중인 무료 스킨으로 임시 교체 후 테스트를 해봤습니다. 그랬더니 타스킨은 페이지 글이 정상적으로 노출이 되더군요. 그러므로 이것은 100% 친효스킨 문제라는것을 알 수 있었습니다. 혹시 스킨 가이드 페이지에서 놓친게 있나 싶어서 방문해 보았습니다. 이윽고 아래의 웹페이지에서 어떤 태그가 부족한지 금새 파악할 수 있었습니다.
https://tistory.github.io/document-tistory-skin/contents/page.html
페이지 · GitBook
tistory.github.io
위의 가이드 페이지를 보시면 <s_page_rep> 이라는 그룹치환자가 현재 친효스킨에는 들어있지 않았던게 원인이었습니다.
왜 빠져있었죠?
간단합니다. 위의 그룹치환자가 없어도 그동안 페이지 기능은 정상 작동되고 있었기 때문입니다. 그런데 어느순간부터인가 안 되기 시작하는거죠. 이 문제를 후원자분께서 발견해 주신것이구요. 으흑! 죄송합니다. 아니 티스토리팀은 진짜 하나 큰 문제인것이 아무런 공지도 없이 업데이트를 해버리는 겁니다. 최소한 일주 전에 이런 부분이 업데이트 될 것이니까 스킨 개발자분들은 참고해달라는 식으로 공지좀 해줬으면 좋겠습니다. 소리 소문없이 업데이트 되거나 바뀌니까 대응할 시간이 없습니다. 참 난처할 따름입니다.
사이드바 모듈을 빼도 출력되는 문제 (2022.11.28 문제 발견)
친효스킨 최신버전을 사용중이신 후원인으로부터 사이드바의 모듈을 스킨 설정에서 제거해도 계속 출력된다는 오류를 보고받았습니다. 이 문제도 페이지 그룹치환자가 없었기 때문이었습니다. 따라서 본문의 내용을 추가하시면 문제 해결 되십니다. 아래 내용부터 차근 차근 따라해 주시기 바랍니다.
친효스킨 페이지 기능 추가 방법
HTML 세팅
이제 원인을 알았으니 친효스킨에 페이지의 글이 출력될 수 있도록 수동 수정해 보겠습니다. 티스토리 관리자 > 꾸미기 > 스킨 편집 > HTML 편집으로 들어갑니다. 그리고 아래의 첨부파일을 다운로드 합니다.
첨부파일을 열어보시면 다음과 같은 HTML 코드가 들어있을 겁니다.
<!-- 페이지 시작 -->
<s_page_rep>
<div class="rgyPage">
<div class="titleWrap">
<h1><a href="[샵샵_article_rep_link_##]">[샵샵_article_rep_title_##]</a></h1>
<div class="date">[샵샵_article_rep_date_##]</div>
</div>
<div class="article">
[샵샵_article_rep_desc_##]
</div>
</div>
</s_page_rep>
<!-- 페이지 끝 -->이 코드를 공지글 끝과 커버 시작이라는 주석 사이에 붙여넣기 합니다. 위의 코드에서 샵샵이라고 한글로 표기한 이유는 ##으로 입력 시 티스토리 값치환자로서의 코드로 작동을 해버리기 때문에 일부러 한글로 변경한 것입니다. 양해 부탁드립니다. 실제 코드에는 ##으로 들어있어야 합니다.
복사한 코드를 친효스킨의 HTML에 위의 이미지과 같이 그대로 붙여넣기 하시면 됩니다. 붙여넣기를 완료했다면 오른쪽 상단의 적용 버튼을 눌러 저장합니다.
CSS 세팅
이제 CSS 스타일 부분을 수정해주면 끝입니다. CSS에서 다음의 코드를 찾습니다.
#contents .entryNotice .titleWrap h1 {
font-size: 20px;
font-weight: normal;
}
#contents .entryNotice .titleWrap .date {
display: block;
padding: 10px 0;
font-size: 12px;
color: #777;
}
#contents .entryNotice .titleWrap .date::before {
content: "\f017";
font-family: "Font Awesome 5 Free";
font-weight: 500;
font-size: 10px;
vertical-align: middle;
}찾으셨나요? 이제 이 코드에 선택자만 추가하면 됩니다. 방금 HTML를 추가했던 태그를 선택해주면 됩니다. 최종 CSS 코드는 아래의 첨부파일을 받으셔서 그대로 복사해 사용하시면 됩니다.
코드를 복사하셨다면 위의 CSS 코드와 바꿔치기를 해줍니다. 그대로 덮어쓰기를 하면 됩니다.
즉 이렇게 수정하면 됩니다. 간단하죠?
커버 초기화 문제
티스토리의 커버 기능으로 메인 화면을 꾸미신 분들은 현재 글 선택을 통한 목록이 초기화가 되어있으실 겁니다. 이것은 친효스킨 뿐만 아니라 티스토리의 모든 반응형 스킨 커버 기능에서 발생하는 오류입니다. 그러므로 티스토리 팀에서 대응을 해줘야만 합니다. 저번 화재 이후로 아직까지 후유증이 남아있는 것 같군요.
임시 조치 방법은 있습니다. 스킨 편집에서 커버 설정 후 한 번에 모든 목록을 설정하는 것입니다. 그리고 절대로 티스토리 스킨 편집 화면으로 재진입을 하시면 안 됩니다. 한 번 커버 설정을 했다면 재편집 없이 당분간 그대로 사용해야 합니다. 또는 커버의 콘텐츠 부분에서 글 선택 또는 직접 입력을 사용하지 않는 방법이 있습니다. 현재로서는 이 방법 말고는 답이 없습니다. 어서 티스토리측에서 이 문제를 빠르게 해결하는 방법 말고는 뾰족한 수가 없습니다.
현재 커버 관련 오류는 해결된 상태입니다.
마무리
수동으로 설정하시느라 고생하셨습니다. 티스토리측은 제발 뭔가 변경사항이 있다면 사전에 꼭 공지를 해줬으면 좋겠습니다. 그리고 앞으로도 지금과 같이 친효스킨을 사용하시다 뭔가 이상이 있는 것 같다고 생각되시면 언제든 제보 부탁드립니다. 여러분들의 적극적인 자세가 친효스킨의 발전으로 이어집니다. 친효스킨이 최고의 스킨이 되도록 최선을 다하겠습니다. 끝.
