1. 목차를 생성해야 하는 이유
목차를 생성하면 좋은점이 구글 seo에 도움이 된다는 것입니다. 즉 구글이 이렇게 소제목을 나열하고 목차를 넣는 글들을 좋아하기때문이죠~ 구글이 좋아하기도 하지만 방문자가 어떤 글들이 있는지 한눈에 파악할수 있고 해당글로 바로 이동할수가 있어어 편리합니다. 하지만 목차를 수동으로 넣는것은 매우 힘이듭니다. 태그를 편집할줄 알아야 하죠~ 저도 방법은 알고 있지만 귀찮아서 하지 않았습니다. 하지만 이렇게 자동으로 목차를 만들수가 있다면 이야기가 달라지죠~ 이런 방법이 있다는것을 알고나서 바로 제 블로그에 적용했습니다. 적용하는게 힘들었지만 한번만 고생하면 이젠 자동으로 목차가 만들어지니 매우 편리합니다.
2. 티스토리 고래스킨 자동목차 생성하기
티스토리 고래스킨을 사용하시는분이 많으실텐데요~ 요즘 뜨는 스킨이죠~ 저도 서브티스토리에 고래스킨을 사용하고 있답니다. 일단 애드센스 광고에 최적화된 무료 블로그라서 너무 마음에 듭니다. 사이드바도 있고 사이드바에 고정광고도 달수가 있어서 적극 추천드립니다. 혹시 고래스킨이 어떤건지 알고싶다면
https://privatenote.tistory.com/28
[고래 스킨 4.0] 티스토리 스킨 배포 2020.05.19
안녕하세요. 고래의 개인 노트입니다. 꼭 필요한 기능과 최소한의 디자인, 깔끔한 스킨을 원하시는 블로거분들을 위해 티스토리 반응형 스킨 고래 스킨을 배포합니다. 블로그 디자인 관련, 추가
privatenote.tistory.com
위 사이트로 가시면 됩니다. 제작자 블로그이며 현재 고래스킨 4.0 을 배포하고 있는 곳입니다.
다시 본론으로 돌아와서...
고래스킨에 자동목차를 넣고싶다면 아래 사이트에 가서 공부하시면 됩니다.
https://avada.tistory.com/1789
티스토리 블로그 고래 3.4 스킨에 목차 자동 생성하는 방법
하루일기 님이 티스토리 스킨 중 하나인 고래 3.4에서 목차가 생성되지 않는 문제가 발생한다고 하여 고래 3.4 스킨에서 목차를 적용하는 방법에 대해 간단히 정리해보았습니다. 티스토리 블로그
avada.tistory.com
제가 검색하다가 우연히 알게된 블로그인데요~ 직접 자바스크립트를 제작해서 만드셨더라구요~ 궁금한게 있으면 댓글로 질문하시면 친절하게 댓글을 달아주실겁니다~ ^^
바쁘신분들을 위해 요점만 말하자면
1. 아래 파일을 압축푼후 티스토리 스킨편집창에서 업로드해줍니다.
2. 아래 소스를 </head> 태그 바로 위에 삽입합니다.
<script src="./images/jquery.toc.min.js"></script>
3. 아래 소스를 </body> 태그 바로 위에 삽입합니다.
<script>
const table = '<div class="book-toc"><p>목차</p><ul id="toc"></ul></div>';
if ( $( ".e-content h2" ).length > 1 || $( ".e-content h3" ).length > 1 )
{
$('.e-content h2:first-of-type').before(table);
}
</script>
<script>
$(function(){
$("#toc").toc( {content: ".e-content", headings: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } )
});
</script>
4. 아래 소스를 css 에 추가합니다.
/* 티스토리 목차 스타일 - TOC */
.book-toc {
border: 1px solid #ccc;
padding: 10px 10px 0px 15px;
background-color: #f5f5f5;
}
.book-toc ul {
list-style-type: decimal;
}
.book-toc p {
font-weight: 550;
margin-bottom: 7px;
}
#toc * {
font-size: 17px;
color: #676767;
}
#toc a:hover {
color: #f00;
}
#toc ul {
margin-bottom: 0px;
margin-top: 5px;
}
#toc > li {
margin-bottom: 15px;
}
#toc {
margin-left: 10px;
}
#toc > li > ul li {
margin-bottom: 5px !important;
}
/* 티스토리 목차 스타일 - TOC */
※ 자세한 설명은 위에 링크한곳에서 천천히 정독해보시기 바랍니다.
3. 티스토리 북클럽 스킨 자동목차 생성하기
북클럽 스킨에 자동목차 생성하는 방법도 아까 소개한 블로그에서 잘 설명하고 있습니다. 북클럽스킨은 정말 깔끔해서 많은분들이 사용하는 스킨이죠~ 커스트마이징 하는 방법도 많이 소개되어 있더군요~ 사이드바도 있고 애드센스 광고 달기도 좋습니다. 고래스킨과 더불어서 북클럽스킨을 많은사람들에게 추천해 주고 있답니다.
북클럽 스킨에서 자동목차를 생성하고싶으시다면 아래 링크를 참고하세요~
https://avada.tistory.com/1776
티스토리에 목차 표시하는 방법 (북클럽 스킨)
티스토리에는 모든 글에 자동으로 목차를 표시하는 방법은 없지만, 원하는 글에 자동으로 목차를 삽입할 수 있습니다. 헤딩 태그를 인식하여 자동으로 목차를 생성하는 jQuery를 사용할 수 있습��
avada.tistory.com
아래는 위에서 소개한 방법에서 제가 조금 응용해서 적용한 내용물입니다.
고래스킨 적용방법에서 1.2번은 동일하고 3번부터 시작하겠습니다.
3. 아래 소스를 </body> 태그 바로 위에 삽입합니다.
<script>
const table = '<div style="box-sizing: border-box; margin: 20px 0px 80px 0px; padding: 25px; border: 1px solid #ececec; vertical-align: baseline; background-color: #fbfbfb; line-height: 2.5em;"><p><b> ■ 목차</b></p><p><br></p><ul id="toc"></ul></div>';
if ( $( ".entry-content h2" ).length > 1 && $("#jm").length ){
$('.entry-content h2:first-of-type').before(table);
}
</script>
<script>
$(function(){
$("#toc").toc( {content: ".entry-content", headings: "h2,h3" , top: -90, isBlink : true, blinkColor : '#21B9DE' } )
});
</script>
4. 아래 소스를 css 에 추가합니다.
/* 티스토리 북클럽 스킨 목차 - TOC */
#toc * {
font-size: 17px;
color: #676767;
}
#toc a:hover {
color: #f00;
}
#toc ul {
margin-bottom: 0px;
margin-top: 5px;
}
#toc > li {
margin-bottom: 15px;
}
#toc {
margin-left: 10px;
}
#toc > li > ul li {
margin-bottom: 5px !important;
}
#toc > li {
list-style-type:none;
}
/** 티스토리 북클럽 스킨 목차 - TOC */
5. 포스팅 하실때 아래 소스를 제일 위에 삽입합니다.
<div id="jm"></div>
위 소스가 있으면 목차를 생성하고 없으면 목차를 생성하지 않습니다.
목차 on off 스위치 기능이라고 생각하시면 됩니다.
4. 티스토리 fastboot 스킨 자동목차 생성하기
fastboot 스킨은 제가 현재 사용하는 스킨입니다. 이 스킨은 원래 예전에는 로딩이 빨라서 인기있는 스킨이였지만 최근 티스트리가 업데이트를 하면서 아이콘이 안나오는 문제와 그외 자잘한 오류가 발생했는데 스킨 제작자의 사정으로 더이상 업데이트가 되지 않음으로 인해 많은사람들이 다른 스킨으로 넘어가게되었습니다. 하지만 저는 너무 이 스킨에 애정이 깊어서 자잘한 오류들을 계속 수정해가며 계속 사용하고 있네요~ 공들여 커스트마이징 한게 아까워서라도 스킨 변경은 하지 않으려고 하고 있답니다~
암튼 fastboot 스킨에서 자동목차를 넣는 방법은
고래스킨에서 1,2번 항목까지는 동일합니다.
3번부터 설명하겠습니다.
3. 아래 소스를 </body> 태그 바로 위에 삽입합니다.
<!--목차-->
<script>
const table = '<div class="book-toc"><p> ■ 목차</p><ul id="toc"></ul></div>';
if ( $( ".article h2" ).length > 1 && $("#jm").length ){
$('.article h2:first-of-type').before(table);
}
</script>
<script>
$(function(){
$("#toc").toc( {content: ".article", headings: "h2" , top: -90, isBlink : true, blinkColor : '#21B9DE' } )
});
</script>
<!--목차-->
4. 아래 소스를 css 에 추가합니다.
/* 티스토리 목차 - TOC */
.book-toc {
/* border: 1px dashed #9fd331;*/
padding: 40px 10px 30px 20px;
margin: 80px 0px 100px 0px;
background-color: #e7fdb5;
}
.book-toc ul {
list-style-type: decimal;
}
.book-toc p {
font-weight: 550;
margin-bottom: 7px;
}
#toc * {
font-size: 17px;
color: #676767;
}
#toc a{
position: relative;
display: block;
padding: .4em .4em .2em .4em;
*padding: .2em;
margin: .1em 0 .1em 0em;
background: #E7FDB5;
color: #444;
text-decoration: undrline;
transition: all .3s ease-out;
}
#toc a:after{
position: absolute;
content: '';
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
#toc a:hover:after{
left: -.5em;
border-left-color: #fa8072;
}
#toc a:hover {
color: #f00;
}
#toc ul {
margin-bottom: 0px;
margin-top: 5px;
}
#toc > li {
margin-bottom: 15px;
list-style-type:none;
}
#toc {
margin-left: 10px;
}
#toc > li > ul li {
margin-bottom: 5px !important;
}
/** 티스토리 목차 - TOC */
5. 포스팅 하실때 아래 소스를 제일 위에 삽입합니다.
<div id="jm"></div>
위 소스가 있으면 목차를 생성하고 없으면 목차를 생성하지 않습니다.
목차 on off 스위치 기능이라고 생각하시면 됩니다.
제가 이렇게 넣은 이유는 예전에 발행한 포스팅에 수동으로 목차를 넣은 경우가 많아서 모든글에 목차가 자동으로 들어가게 되면 목차가 중복이 되기때문에 이런 기능을 넣었답니다.
위 소스를 서식으로 만들어 놓고 사용하시면 편리하겠죠~ ^^
6. css 한군데 삭제
.article ul
css 수정에 들어가셔서 위 소스로 검색해서
border-left:5px solid #eee;
를 지우거나 주석처리를 해줍니다.
배경색이 지저분하게 보이는것을 깔끔하게 보이게 합니다.
이것은 fastboot 스킨에만 해당됩니다.
fastboot 스킨 적용방법을 넣을까 뺄까 고민하다가 추가하였습니다. 다른스킨에 적용할때 혹시라도 도움이 될지도 모르니깐요~ 스킨마다 적용방법이 다르기때문에 많은 예제가 있으면 더 좋을겁니다. ^^
5. 마무리 한마디
북클럽 스킨과 고래스킨은 위에 소개한 링크에 들어가서 천천히 정독하시면 충분히 적용하실수가 있을겁니다. fastboot 스킨에서 적용한 방법은 제가 시행착오를 격으면서 사용한 방법입니다. 혹시나 fastboot 사용자 이시라면 질문 환영합니다. 다른 스킨이라면 위에 소개한 블로그에 가셔서 질문하시기 바랍니다~ 저도 아는게 별로 없어서요... ^^;;
공감♥ 은 고래도 춤추게 합니다~ ^^
댓글