오늘은 그동안 벼르고 별렀던 블로그에 자동 목차 만들기 시간입니다. 요즘 글을 쓰는데 길이가 아주 길어지는 경우가 많아서 스크롤이 길어지는데요. 이럴때 글에 자동으로 목차를 넣어주는 기능을 넣으면 어떨까 해서 알아보니 이미 자동 목차를 만들어주는 라이브러리는 있었고 가져다 쓰기만 하면 된다고 나와있네요.
일단 만들어진 목차를 보시고, 순서를 따라해보면서 알아보겠습니다. 개발적인 요소가 가미되지 않은 한방에 목차만 넣으시겠다는 분은 7번 항목의 전체 스크립트를 자동서식에서 HTML 모드로 변경 한 후 넣으신 다음에 재활용하시면 되겠습니다.
목차.
1. jquery.toc 라이브러리를 다운 받는다.
https://ndabas.github.io/toc/assets/jquery.toc.zip
2. 압축파일을 해제한다.
3. 티스토리 스킨 편집 --> html 편집 --> 파일업로드
jquery.toc.min.js 파일을 올려주면 됩니다.
4. jquery.toc.min.js 임포트!
파일을 업로드 했으니 제 html에서 불러와지게 해줍니다. 용량이 1.1kb 니까 그냥 추가해놔도 상관없을 것 같습니다. </head>를 찾아서 그 위에 아래 내용을 넣어줍시다.
// 생략...
<script type="text/javascript" src="https://tistory4.daumcdn.net/tistory/2831812/skin/images/jquery.toc.min.js" ></script>
</head>
// 생략...
해당 주소는 jquery.toc.min.js를 업로드 하면 html 편집 화면쪽에서 파일업로드에서 해당 파일을 우클릭해서 링크 복사를 하면 얻어집니다.
아니면 제가 업로드해놓은 주소를 그대로 사용하셔도 무방합니다~.
5. 아래 목차 코드를 글에 삽입.
<ul id="toc"></ul>
<script type="text/javascript">
$(function(){
$("#toc").toc( {content: ".area_view", headings: "h1,h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } )
});
</script>
목차
6. jquery.toc 입맛에 맞게 수정
5번에 수정한 버전은 티스토리에서 사용할수 있게 약간 기능을 추가한 버전입니다. 우선 상단에 고정 레이어가 있어서 문단을 가리는 문제를 해결하고, 목차의 컬러를 변경해서 깜빡이게 함으로서 목차에 대해서 인식을 시켜줄수 있는 약간의 기능입니다.
해당 파일은 원본의 jquery.toc의 깃헙을 포크해서 수정해서 올려두었습니다.
위 경로에서 다운받으시면 top, isBlink, blinkColor의 확장된 기능을 사용할 수 있습니다. 감사합니다.
7. 복잡한 과정 없이 한방에 목차 넣기
- 모든 티스토리 적용 가능
<script type="text/javascript" src="https://tistory4.daumcdn.net/tistory/2831812/skin/images/jquery.toc.js"></script>
<p>목차</p>
<ul id="toc"></ul>
<script type="text/javascript">
$(function(){
$("#toc").toc( {content: ".tt_article_useless_p_margin", headings: "h1,h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } )
});
</script>
- JB 팩토리의 경우
Jquery 로드가 이상하게 되고 있어서 한번 더 위에 로드하는 스크립트를 추가했습니다. 한번 적용해봐주시길 부탁드립니다.
<script type="text/javascript" src="https://t1.daumcdn.net/tistory_admin/lib/jquery/jquery-3.2.1.min.js?v=anti_jb"></script>
<script type="text/javascript" src="https://tistory4.daumcdn.net/tistory/2831812/skin/images/jquery.toc.js"></script>
<p>목차</p>
<ul id="toc"></ul>
<script type="text/javascript">
$(function(){
$("#toc").toc( {content: ".tt_article_useless_p_margin", headings: "h1,h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } )
});
</script>
JB 팩토리 스킨 같은 경우 jquery 가 정상적으로 로드되고 있지 못한 상황이라서 목차를 넣는 위에다가 한번 더 로드를 한 다음에 시도를 해봐야 할 것 같습니다.
JB 팩토리 스킨에 적용된 예시, 확인한 모습)
8. 자동 목차(toc)에 CSS를 적용하는 방법
자동목차에 css를 적용하는 방법에 대해서 많은 분들이 관심을 가지고 계신것 같습니다.
<style>
#toc li{color:red;}
#toc li a{color:red;}
</style>
이런식으로 <head></head> 사이에 <style> 태그로 추가를 하면 자동 목록에 대한 css를 추가할 수 있습니다.
안되는 스킨은 댓글로 제보주시면 시간 되는대로 확인해서 추가해드리겠습니다~
'blog' 카테고리의 다른 글
| 글 잘쓰는 방법 Top 13 (5) | 2020.10.31 |
|---|---|
| 애드센스 모바일 전면 광고가 11월 3일부터 더 넓은 화면에 게재됩니다. (1) | 2020.10.22 |
| 애드센스 차단관리 접속 에러 : "불편을 끼쳐 드려 죄송합니다. 현재 귀하가 요청하신 작업을 처리할 수 없습니다. 기술팀에서 이 문제를 검토하고 있으니 신속하게 해결하겠습니다." (2) | 2020.10.20 |
| 애드센스 자동, 수동광고를 특정 주소(글)에서 차단하는 방법 (0) | 2020.10.16 |
| 티스토리 글(포스팅)이 다음 검색 누락되는 경우 (8) | 2020.06.10 |
| 1일 1포스팅 안해도 된다. (14) | 2020.05.24 |
| 티스토리 블로그 방문자수 늘리기와 홍보 방법 (30) | 2020.05.17 |
| 구글 검색 결과 제목이 이상할 때 조치 방법과 원인 (9) | 2020.05.12 |
