티스토리에서 기본으로 제공해주는 스킨을 사용하다가 아쉬운 부분이 있어서 다른 스킨들을 찾아보게 되었다.
그러던 중 무겁지 않으면서 깔끔한 스킨을 찾게 되었는데 그게 고래 스킨이었다.
예전에는 블로그를 통해서 배포가 되었던 거 같은데, 지금은 카페에서만 배포를 하고 있다.
애센라이프 - 애드센스 / 워드프레스... : 네이버 카페
애센라이프
cafe.naver.com
깔끔하고 군더더기가 없어 무료로 배포하는 것만으로도 무척 감사해하며 쓰고 있다.
좀 더 입맛에 맞게 수정한 내용들을 정리하려 한다.
홈, 태그, 방명록 링크 제거
스킨에서 기본 기능으로 홈, 태그, 방명록으로 연결해주는 기능을 제공하고 있다.
태그와 방명록이 필요하지 않아서 해당 부분을 제거했다.
설정 > 꾸미기 > 스킨편집 > html 편집 > html
<!--
<nav id="gnb">
<ul style="width: 1000px;">
<li><a href="/">홈</a></li>
<li><a href="/tag">태그</a></li>
<li><a href="/guestbook">방명록</a></li>
</ul>
</nav>
-->위와 같이 해당 부분을 주석 처리해주면 링크가 사라지게 된다.
카테고리 관련 글 중복 수정
스킨에서 카테고리 관련 글 링크를 기본으로 보여주는 기능이 있다.
티스토리에서 제공하는 플러그인에서도 활성되어 있는 경우 아래와 같이 글 하단에 관련 글이 중복으로 보여진다.
이를 위해 스킨에서 제공하는 기능을 비활성화 하거나, 티스토리의 플러그인을 비활성화 하는 방법이 있다.
고래 스킨에서 카테고리 관련 글 보이지 않게 하기
설정 > 꾸미기 > 스킨편집 > html 편집 > html
<s_article_related>
...
</s_article_related>위의 코드가 스킨에서 카테고리 관련 글을 표출하는 부분이다.
아래와 같이 해당 부분을 주석처리하면 스킨이 제공하는 관련 글이 보이지 않게된다.
<!--
<s_article_related>
...
</s_article_related>
-->티스토리 카테고리 관련 글 플러그인 비활성화 하기
설정 > 플러그인 > 카테고리 글 더 보기 > 해제
자동 목차 적용하기
목차를 제공하면 긴 글의 특정 부분을 빠르게 찾거나 구조를 쉽게 알 수 있다.
하지만 수동으로 목차를 만드는 건 손이 많이 가는 작업이기에, 자동으로 목차가 글의 초반에 배치되도록 했다.
목차 생성 자바스크립트 설치
https://ndabas.github.io/toc/assets/jquery.toc.zip 에서 이미 만들어진 목차 스크립트를 받을 수 있다.
압축 해제 후 jquery.toc.min.js 파일을 업로드 해 주자.
설정 > 꾸미기 > 스킨편집 > html 편집 > 파일 업로드 에서 jquery.toc.min.js 파일을 업로드 해주면 된다.
html 수정
설정 > 꾸미기 > 스킨편집 > html 편집 > html에서 </body> 바로 위에 아래 내용을 추가해주자.
<!-- 자동 목차 시작 -->
<script src="./images/jquery.toc.min.js"></script>
<script>
// 목차 생성 부분
$(document).ready(function () {
var $toc = $("#toc_list");
$toc.toc({ content: ".e-content", headings: "h2, h3, h4" });
// 카테고리의 다른글 삭제
if ($(".another_category").length > 0) {
$toc.find("li:last").remove();
}
});
</script>
<!-- 자동 목차 끝 -->다른 예제들을 찾아서 적용했을 때 목차가 보이지 않아서 원인을 찾아보니 content 값을 스킨에 맞춰서 수정해줘야 했다.
고래 스킨에서는 .e-content가 적절한 값이 었다.
$toc.toc({ content: ".e-content", headings: "h2, h3, h4" });위와 같이 적용을 하면 목차를 생성하는 부분이 완성 된 것이다.
실제 포스팅에 적용하기 위해 html을 조금 더 수정해주자.
내가 목차를 달고자 하는 위치는 글의 최상단이었다.
_article_rep_desc_ 를 찾아서 그 위에 아래 내용을 추가해주자
<!-- 목차 표시 -->
<div class="toc">
<p>목차</p>
<ul id="toc_list"></ul>
</div>
그러면 꾸며지지 않은 목차가 출력되는 것을 확인할 수 있다.
CSS 수정
더 보기 좋은 목차를 보여주기 위해 CSS를 수정해준다.
설정 > 꾸미기 > 스킨편집 > html 편집 > CSS 에서 원하는 위치에 아래 값을 추가해준다.
.toc {width: 95%; border: 1px #f3f3f3 solid; padding: 15px !important; }
.toc p {margin-bottom: 10px; font-weight: bold !important;}
.toc > ul { margin-left: 0px !important; padding: 0px !important; }
.toc > ul > li { border-bottom: 1px solid #dcdcdc;}
.toc > ul > li > a {display: block; padding: 8px; color: inherit; font-size: 1.0rem; background:#f8f8f8;}
.toc > ul > li a:hover {color: #1500cf; background-color: #f5f2ec;}
.toc > ul > li > ul { margin-left: 15px !important; padding-left: 15px !important; list-style : circle !important;}
.toc > ul > li > ul > li > ul { margin-left: 25px !important; padding-left: 15px !important;list-style : disc !important;}위와 같이 적용을 완료하고 나서 글을 작성해보자.
글에서 제목에 해당하는 문장을 제목1, 2, 3 포멧으로 설정해주면 글의 최상단 목차에 자동으로 적용되게 된다.
댓글 오류 수정
고래스킨 4.1에서는 댓글에 댓글을 남기려고 하면 오류가 발생한다.
이 부분을 수정하도록 하겠다.
html 수정
우선 수정을 위해 설정 > 꾸미기 > 스킨편집 > html 편집 > html 로 이동하자
아래 부분이 4.1에 기본 기본 적용되어 있는 부분이다.
<s_rp_container>
<ol>
<s_rp_rep>
<li id=''>
<div class="reply_thumb"><img src="" width="64px" height="64px"></div>
<div class=" reply_content">
<span class="blogicon"></span>
<span class="name"></span>
<div class="reply_date">
<span class="control"><a href="#" onclick="commentComment(19291848); return false" class="write"><i class="fas fa-pen"></i></a><a href="#" onclick="deleteComment(19291848);return false" class="modify"><i class="fas fa-edit"></i></a></span>
</div>
<div class="comment-content"><p></p></div>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id=''>
<div class="reply_thumb"><img src="" width="64px" height="64px"></div>
<div class=" reply_content">
<span class="blogicon"></span>
<span class="name"></span>
<div class="reply_date">
<span class="control"><a href="#" onclick="deleteComment(19291848);return false" class="modify"><i class="fas fa-edit"></i></a></span>
</div>
<div class="comment-content"><p></p></div>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ol>
</s_rp_container>s_rp_container 로 검색하면 찾기 쉬울 것이다.
이 부분을 다음과 같이 바꿔준다.
<s_rp_container>
<ol>
<s_rp_rep>
<li id=''>
<div class="reply_thumb"><img src="" width="64px" height="64px"></div>
<div class=" reply_content">
<span class="blogicon"></span>
<span class="name"></span>
<div class="reply_date">
<span class="control">
<a href="#" onclick="" class="write">
<i class="fas fa-pen"></i></a>
<a href="#" onclick="" class="modify">
<i class="fas fa-edit"></i></a>
</span>
</div>
<div class="comment-content"><p></p></div>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id=''>
<div class="reply_thumb"><img src="" width="64px" height="64px"></div>
<div class=" reply_content">
<span class="blogicon"></span>
<span class="name"></span>
<div class="reply_date">
<span class="control"><a href="#" onclick="" class="modify"><i class="fas fa-edit"></i></a></span>
</div>
<div class="comment-content"><p></p></div>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ol>
</s_rp_container>댓글에 답하거나 수정하는 부분에 잘 못된 값이 들어가 있어서 발생한 문제로 수정 후 제대로 동작하는 것을 확인했다.
사용 중에 스킨을 수정하는 부분이 생긴다면 지속적으로 업데이트 해나가도록 하겠다.
'티스토리' 카테고리의 다른 글
| 티스토리 코드 블럭 꾸미기 , 라인 넘버 표시하기 (2) | 2019.06.11 |
|---|---|
| 티스토리에 수식 표시하기 (1) | 2019.06.10 |
댓글